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";

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 || ""),
          item?.mobile === profile?.mobile ? (
            <Typography variant="body2" className="text-gray-400">
              -
            </Typography>
          ) : (
            <Popover key={i}>
              <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;
