import React, { useEffect, useState } from "react";
import { Grid } from "../components/Grid/Grid";
import { useUserProfileStore } from "../context/zustand-store/userStore";
import { useApiRequest } from "../utils/useApiRequest";
import Table from "../components/Table/Table";
import Typography from "../components/Typography/Typography";
import Button from "../components/Button/Button";
import { useDrawerStore } from "../context/zustand-store/appStore";
import { SubmitNewUser } from "../partials/users/SubmitNewUser";
import { Popover } from "../components/PopOver/PopOver";
import { DeleteButtonForPopOver } from "../components/PopOverButtons/PopOverButtons";
import { getFaPermissions } from "../utils/getFaPermissions";
import { getFaProvince } from "../utils/getFaProvince";
import { getFaCityName } from "../utils/getFaCityName";
import { Tooltip } from "../components/Tooltip/Tooltip";

const Users: React.FC = () => {
  const { profile } = useUserProfileStore();
  const { openDrawer } = useDrawerStore();
  const [tableData, setTableData] = useState<any[][]>([]);

  const { data: usersData, refetch } = useApiRequest({
    api: `/users/${profile?.province || "hamedan"}`,
    method: "get",
    queryKey: ["users", profile?.province],
  });

  useEffect(() => {
    if (usersData) {
      const d = usersData.map((item: any, i: number) => {
        return [
          i + 1,
          item?.fullname || "-",
          item?.mobile || "-",
          item?.permissions?.map((perm: string, idx: number) => (
            <Typography key={idx} variant="body2" className="text-xs">
              {getFaPermissions(perm)}
            </Typography>
          )) || "-",
          getFaProvince(item?.province || ""),
          getFaCityName(item?.city || ""),

          <Popover key={i}>
            <Tooltip title="ویرایش" position="right">
              <Button
                variant="edit"
                access="add"
                onClick={() => {
                  openDrawer({
                    title: "ویرایش کاربر",
                    content: (
                      <SubmitNewUser
                        province={profile?.province || ""}
                        onSuccess={refetch}
                        item={item}
                      />
                    ),
                  });
                }}
              />
            </Tooltip>
            <DeleteButtonForPopOver
              access="add"
              api={`users/${item?._id || item?.Id}`}
              getData={refetch}
            />
          </Popover>,
        ];
      });
      setTableData(d);
    }
  }, [usersData, profile]);

  return (
    <Grid container column className="justify-center">
      <Grid>
        <Button
          variant="submit"
          access="add"
          onClick={() => {
            openDrawer({
              title: "ثبت کاربر جدید",
              content: (
                <SubmitNewUser
                  province={profile?.province || ""}
                  onSuccess={refetch}
                />
              ),
            });
          }}
        >
          ثبت کاربر جدید
        </Button>
      </Grid>

      <Table
        title="کاربران"
        columns={[
          "ردیف",
          "نام کامل",
          "شماره موبایل",
          "دسترسی‌ها",
          "استان",
          "شهر",
          "عملیات",
        ]}
        rows={tableData}
      />
    </Grid>
  );
};

export default Users;