import { useApiRequest } from "../../utils/useApiRequest";
import { useModalStore } from "../../context/zustand-store/appStore";
import { Grid } from "../../components/Grid/Grid";
import Button from "../../components/Button/Button";
import { motion } from "framer-motion";
import SVGImage from "../../components/SvgImage/SvgImage";
import editIcon from "../../assets/images/svg/edit.svg?react";
import { AddSaleUnit } from "./AddSaleUnit";
import { NoData } from "../../components/NoData/NoData";
import { PageTitle } from "../../components/PageTitle/PageTitle";
import { checkAccess } from "../../utils/checkAccess";
import { BooleanQuestion } from "../../components/BooleanQuestion/BooleanQuestion";
import trashIcon from "../../assets/images/svg/trash.svg?react";

export const SaleUnits = () => {
  const { openModal } = useModalStore();

  const { data: saleUnits, refetch } = useApiRequest({
    api: "/product/web/api/v1/sale_unit/",
    method: "get",
    params: { page: 1, page_size: 1000 },
    queryKey: ["saleUnits"],
  });

  return (
    <Grid container column className="">
      <Grid>
        <Button
          size="small"
          variant="submit"
          page="pricing"
          access="Submit-Sale-Unit"
          onClick={() => {
            openModal({
              title: "ایجاد واحد فروش",
              content: <AddSaleUnit getData={refetch} />,
            });
          }}
        >
          ایجاد واحد فروش
        </Button>
      </Grid>
      <Grid className="mt-4">
        <PageTitle title="واحدهای فروش" />
      </Grid>

      {!saleUnits?.results?.length ? (
        <NoData title="واحد فروش موجود نیست!" />
      ) : (
        <motion.div className="grid sm:grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-2 justify-items-center mt-4 items-center">
          {saleUnits?.results?.map((item: any, i: number) => (
            <motion.div
              key={i}
              className="bg-white h-16 dark:bg-dark-600 rounded-lg border border-gray1-200 dark:border-dark-300 overflow-hidden flex justify-between items-center p-2 w-full"
              initial="hidden"
              animate="show"
            >
              <div className="rounded-full flex justify-start">
                <div className="bg-white1-400 w-8 p-1 dark:bg-gray-800 rounded-lg flex justify-center text-gray2-300 dark:text-dark-300">
                  {i + 1}
                </div>
              </div>

              <div className="p-3 flex flex-col text-sm text-gray-500 dark:text-dark-200">
                <p>{item?.unit}</p>
              </div>

              <div className="flex justify-between items-end flex-col">
                {checkAccess({ page: "pricing", access: "Edit-Sale-Unit" }) && (
                  <SVGImage
                    onClick={() => {
                      openModal({
                        title: "ویرایش واحد فروش",
                        content: <AddSaleUnit getData={refetch} item={item} />,
                      });
                    }}
                    src={editIcon}
                    className={`cursor-pointer w-5 text-primary-600 dark:text-primary-100`}
                  />
                )}
                {checkAccess({ page: "pricing", access: "Edit-Sale-Unit" }) && (
                  <SVGImage
                    onClick={() => {
                      openModal({
                        title: "از حذف واحد فروش مطمئنید؟",
                        content: (
                          <BooleanQuestion
                            isAlert
                            getData={refetch}
                            api={`product/web/api/v1/sale_unit/${item?.id}/`}
                            method="delete"
                          />
                        ),
                      });
                    }}
                    src={trashIcon}
                    className={`cursor-pointer w-5  text-red-500 dark:text-red-400`}
                  />
                )}
              </div>
            </motion.div>
          ))}
        </motion.div>
      )}
    </Grid>
  );
};
