import { useEffect, useState } from "react";
import { getFaPermissions } from "../../utils/getFaPermissions";
import { useApiRequest } from "../../utils/useApiRequest";
import { useModalStore } from "../../context/zustand-store/appStore";
import Table from "../../components/Table/Table";
import { Grid } from "../../components/Grid/Grid";
import Button from "../../components/Button/Button";
import { AddPage } from "./AddPage";
import { Popover } from "../../components/PopOver/PopOver";
import { Tooltip } from "../../components/Tooltip/Tooltip";
import { DeleteButtonForPopOver } from "../../components/PopOverButtons/PopOverButtons";
import { ArrowPathIcon } from "@heroicons/react/24/outline";
import { BooleanQuestion } from "../../components/BooleanQuestion/BooleanQuestion";

export default function Pages() {
  const { openModal } = useModalStore();
  const [pagesInfo, setPagesInfo] = useState({ page: 1, page_size: 10 });
  const [pagesTableData, setPagesTableData] = useState([]);

  const { data: pagesData, refetch } = useApiRequest({
    api: "/auth/api/v1/page/",
    method: "get",
    params: pagesInfo,
    queryKey: ["pages", pagesInfo],
  });

  useEffect(() => {
    if (pagesData?.results) {
      const formattedData = pagesData.results.map((item: any, i: number) => {
        return [
          pagesInfo.page === 1
            ? i + 1
            : i + pagesInfo.page_size * (pagesInfo.page - 1) + 1,
          getFaPermissions(item?.name),
          item?.name,
          item?.permissions?.map((option: any) => option.name)?.join(" - "),
          <Popover key={i}>
            <Tooltip title="ویرایش" position="right">
              <Button
                page="permission_control"
                access="Post-Page"
                variant="edit"
                onClick={() => {
                  openModal({
                    title: "ویرایش صفحه",
                    content: <AddPage item={item} getData={refetch} />,
                  });
                }}
              />
            </Tooltip>
            <DeleteButtonForPopOver
              page="permission_control"
              access="Post-Page"
              api={`auth/api/v1/page/${item?.id}/`}
              getData={refetch}
            />
          </Popover>,
        ];
      });
      setPagesTableData(formattedData);
    }
  }, [pagesData, pagesInfo]);

  return (
    <Grid container column>
      <Grid container className="items-center gap-2">
        <Button
          size="small"
          page="permission_control"
          access="Post-Page"
          variant="submit"
          onClick={() => {
            openModal({
              title: "ایجاد صفحه",
              content: <AddPage getData={refetch} />,
            });
          }}
        >
          ایجاد صفحه
        </Button>
        {(window.location.origin.includes("localhost") ||
          window.location.origin.includes("tdam.rasadyar")) && (
          <Tooltip title="ارسال لیست به سامانه" position="top">
            <Button
              size="small"
              page="permission_control"
              access="Post-Page"
              icon={<ArrowPathIcon className="w-5 h-5" />}
              onClick={() => {
                openModal({
                  title: "آیا از ارسال لیست به سامانه مطمئنید؟",
                  content: (
                    <BooleanQuestion
                      getData={refetch}
                      api={`auth/api/v1/update_access/`}
                      method="post"
                    />
                  ),
                });
              }}
            >
              {" "}
            </Button>
          </Tooltip>
        )}
      </Grid>
      <Table
        className="mt-2"
        onChange={setPagesInfo}
        count={pagesData?.count || 10}
        isPaginated
        title="صفحات سامانه"
        columns={["ردیف", "صفحه", "کلید", "دسترسی ها", "عملیات"]}
        rows={pagesTableData}
      />
    </Grid>
  );
}