import {
  Button,
  Chip,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Typography,
} from "@mui/material";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { formatJustDate } from "../../../../utils/formatTime";
import { getFaUserRole } from "../../../../utils/getFaUserRole";
import { provinceGetManageUsersService } from "../../services/province-get-manage-users";
// import { useSelector } from "react-redux";
// import { provinceGetManageUsersService } from "../../services/province-get-manage-users";
import { ProvinceManageUsersRow } from "./ProvinceManageUsersRow";

function createData(
  image,
  userRoles,
  userKey,
  name,
  nationalCode,
  phone,
  birthDate,
  password,
  identityDocuments,
  rolesTitle,
  userState,
  rolesData
) {
  return {
    image,
    userRoles,
    userKey,
    name,
    nationalCode,
    phone,
    birthDate,
    password,
    identityDocuments,
    rolesTitle,
    userState,
    rolesData,
  };
}

// const rows = [
//   createData(
//     "Frozen yoghurt",
//     "4061112233",
//     "تلفن",
//     "تاریخ تولد",
//     "رمزعبور",
//     "اسناد",
//     "نقش های کاربر",
//     "وضعیت"
//   ),
//   createData(
//     "Frozen yoghurt",
//     "4061112233",
//     "تلفن",
//     "تاریخ تولد",
//     "رمزعبور",
//     "اسناد",
//     "نقش های کاربر",
//     "وضعیت"
//   ),
//   createData(
//     "Frozen yoghurt",
//     "4061112233",
//     "تلفن",
//     "تاریخ تولد",
//     "رمزعبور",
//     "اسناد",
//     "نقش های کاربر",
//     "وضعیت"
//   ),
//   createData(
//     "Frozen yoghurt",
//     "4061112233",
//     "تلفن",
//     "تاریخ تولد",
//     "رمزعبور",
//     "اسناد",
//     "نقش های کاربر",
//     "وضعیت"
//   ),
// ];

export const ProvinceManageUsers = () => {
  const dispatch = useDispatch();
  const [tableData, setTableData] = useState([]);

  const { provinceGetManageUsers } = useSelector(
    (state) => state.provinceSlice
  );

  useEffect(() => {
    dispatch(provinceGetManageUsersService());
  }, []);

  useEffect(() => {
    const temp = provinceGetManageUsers?.map((user) => {
      const rolesTransformed = user.role?.map((item, i) => (
        <Chip
          key={item + i}
          label={getFaUserRole(item.name)}
          variant="outlined"
        />
      ));
      return createData(
        user.image,
        user.role?.map((item) => item.name),
        user.key,
        user.fullname,
        user.nationalId ? user.nationalId : "-",
        user.mobile,
        user.birthday ? formatJustDate(user.birthday) : "-",
        user.password,
        "-",
        <Grid container gap={SPACING.TINY}>
          {rolesTransformed}
        </Grid>,
        user.active,
        user.rolesData
      );
    });

    setTableData(temp);
  }, [provinceGetManageUsers]);

  return (
    <>
      <Grid
        container
        alignItems="center"
        gap={SPACING.SMALL}
        mt={SPACING.MEDIUM}
      >
        <Typography>مدیریت کاربران</Typography>
        <Button>ایجاد کاربر جدید</Button>
      </Grid>
      <TableContainer component={Paper} style={{ marginTop: 10 }}>
        <Table aria-label="collapsible table">
          <TableHead>
            <TableRow>
              <TableCell />
              <TableCell>نام و نام خانوادگی</TableCell>
              <TableCell align="center">کدملی</TableCell>
              <TableCell align="center">تلفن همراه</TableCell>
              <TableCell align="center">تاریخ تولد</TableCell>
              <TableCell align="center">رمزعبور</TableCell>
              <TableCell align="center">اسناد هویتی</TableCell>
              <TableCell align="center">نقش ها</TableCell>
              <TableCell align="center">وضعیت</TableCell>
              <TableCell align="center">عملیات</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {tableData?.map((row) => (
              <ProvinceManageUsersRow key={row.name} row={row} />
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </>
  );
};
