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 trashIcon from "../../assets/images/svg/trash.svg?react";
import { AddAttribute } from "./AddAttribute";
import { NoData } from "../../components/NoData/NoData";
import { PageTitle } from "../../components/PageTitle/PageTitle";
import { checkAccess } from "../../utils/checkAccess";
import { BooleanQuestion } from "../../components/BooleanQuestion/BooleanQuestion";

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

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

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

      {!attributes?.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">
          {attributes?.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="w-1/6 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 w-2/6">
                <p className="">{item?.name}</p>
              </div>

              <div className="flex flex-col justify-center text-[8px] sm:text-[8px] lg:text-[10px] 2xl:text-xs w-2/6 gap-1">
                <p
                  className={`w-full text-gray-800 ${
                    item?.product
                      ? "bg-primary-500 text-white"
                      : "bg-white1-400"
                  } rounded-lg text-center py-1`}
                >
                  {item?.product ? item?.product?.name : "عمومی"}
                </p>
                <p
                  className={`w-full text-white bg-gray-300 rounded-lg text-center py-1`}
                >
                  {item?.type?.unit || "-"}
                </p>
              </div>

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