import { CheckCircleFilled } from "@ant-design/icons";
import { useQuery } from "@apollo/client/react";
import { Button, Card, Col, List, Row } from "antd";
import { useState } from "react";

import { useTranslation } from "react-i18next";
import { GET_ALL_QUESTION_SETS } from "../../graphql/csi.queries";
import { DateFormatter } from "../../utils/DateFormatter";
import AlertComponent from "../alert/alert.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import ShopCsiConfigForm from "../shop-csi-config-form/shop-csi-config-form.component";

export default function ShopCsiConfig() {
  const { loading, error, data } = useQuery(GET_ALL_QUESTION_SETS, {
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only"
  });
  const [selectedCsi, setselectedCsi] = useState(null);
  const { t } = useTranslation();

  if (loading) return <LoadingSpinner />;
  if (error) return <AlertComponent title={error.message} type="error" />;
  return (
    <Card>
      <Row>
        <Col span={3}>
          <List
            dataSource={data ? data.csiquestions : []}
            renderItem={(item) => (
              <List.Item>
                <DateFormatter>{item.created_at}</DateFormatter>
                {item.csis_aggregate.aggregate.count}
                <Button onClick={() => setselectedCsi(item)}>{t("general.actions.view")}</Button>
                {item.current ? <CheckCircleFilled /> : <Button>{t("csi.actions.activate")}</Button>}
              </List.Item>
            )}
          />
        </Col>
        <Col span={1} />
        <Col span={20}>
          <ShopCsiConfigForm selectedCsi={selectedCsi} />
        </Col>
      </Row>
    </Card>
  );
}
