import { CheckCircleFilled } from "@ant-design/icons";
import { Button, Col, List, Row } from "antd";
import React, { useState } from "react";
import { useQuery } from "@apollo/client";
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);
  const [selectedCsi, setselectedCsi] = useState(null);
  const { t } = useTranslation();

  if (loading) return <LoadingSpinner />;
  if (error) return <AlertComponent message={error.message} type="error" />;
  return (
    <div>
      The Config Form
      <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={21}>
          <ShopCsiConfigForm selectedCsi={selectedCsi} />
        </Col>
      </Row>
    </div>
  );
}