import { useQuery } from "@apollo/client/react";
import { Button, Drawer, List } from "antd";
import { QUERY_CUSTOM_TEMPLATES } from "../../graphql/templates.queries";
import AlertComponent from "../alert/alert.component";
import Skeleton from "../loading-skeleton/loading-skeleton.component";
import { useTranslation } from "react-i18next";
import { useLocation, useNavigate } from "react-router-dom";
import queryString from "query-string";
import { TemplateList } from "../../utils/TemplateConstants";
import ShopTemplateAdd from "../shop-template-add/shop-template-add.component";
import ShopTemplateDeleteComponent from "../shop-template-delete/shop-template-delete.component";

export default function ShopTemplatesListContainer({ openState }) {
  const [open, setOpen] = openState;
  const { loading, error, data, refetch } = useQuery(QUERY_CUSTOM_TEMPLATES, {
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only"
  });
  const { t } = useTranslation();
  const search = queryString.parse(useLocation().search);
  const history = useNavigate();
  if (error) return <AlertComponent title={error.message} type="error" />;

  const handleEdit = (record) => {
    if (record) {
      if (record.id) {
        search.customTemplateId = record.id;
        history({ search: queryString.stringify(search) });
      }
    } else {
      delete search.customTemplateId;
      history({ search: queryString.stringify(search) });
    }
  };

  return (
    <Drawer placement="left" size="25%" open={open} onClose={() => setOpen(false)}>
      <div>
        <div>{t("bodyshop.labels.customtemplates")}</div>
        <ShopTemplateAdd shopTemplateList={data ? data.templates : []} refetch={refetch} />
        <List
          loading={loading}
          itemLayout="horizontal"
          dataSource={data ? data.templates : []}
          renderItem={(item) => (
            <List.Item
              actions={[
                <Button key="editButton" onClick={() => handleEdit(item)}>
                  {t("general.actions.edit")}
                </Button>,
                <ShopTemplateDeleteComponent key="shopTemplateDelete" templateId={item.id} refetch={refetch} />
              ]}
            >
              <Skeleton title={false} loading={item.loading} active>
                <div style={{ display: "flex", flexDirection: "column" }}>
                  <div>{TemplateList()[item.name].title}</div>
                  <div>{TemplateList()[item.name].description}</div>
                  <div>{TemplateList()[item.name].drivingid}</div>
                </div>
              </Skeleton>
            </List.Item>
          )}
        />
      </div>
    </Drawer>
  );
}
