import {
  Avatar,
  Button,
  Collapse,
  IconButton,
  Switch,
  TableCell,
  TableRow,
} from "@mui/material";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import { useState } from "react";
import { ProvinceManageUsersRoles } from "./ProvinceManageUsersRoles";
// import { useDispatch } from "react-redux";
// import { provinceGetManageUsersRolesService } from "../../services/province-get-manage-users-roles";

export function ProvinceManageUsersRow(props) {
  const { row } = props;
  const [open, setOpen] = useState(false);

  const [checked, setChecked] = useState(row.userState);

  const handleChange = () => {
    setChecked(!checked);
  };

  return (
    <>
      <TableRow sx={{ "& > *": { borderBottom: "unset" } }}>
        <TableCell>
          <IconButton
            aria-label="expand row"
            size="small"
            onClick={() => setOpen(!open)}
          >
            {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
          </IconButton>
        </TableCell>
        <TableCell component="th" scope="row">
          {row.image && <Avatar alt="User Avatar" src={row.image} />}
          {row.name}
        </TableCell>
        <TableCell align="center">{row.nationalCode}</TableCell>
        <TableCell align="center">{row.phone}</TableCell>
        <TableCell align="center">{row.birthDate}</TableCell>
        <TableCell align="center">{row.password}</TableCell>
        <TableCell align="center">{row.identityDocuments}</TableCell>
        <TableCell align="center">{row.rolesTitle}</TableCell>
        <TableCell align="center">
          <Switch checked={checked} onChange={handleChange} color="primary" />
        </TableCell>

        <TableCell align="center">
          <Button>افزودن نقش</Button>
        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={12}>
          <Collapse in={open} timeout="auto" unmountOnExit>
            <ProvinceManageUsersRoles userRoles={row.userRoles} row={row} />
          </Collapse>
        </TableCell>
      </TableRow>
    </>
  );
}
