import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Box, Button, Checkbox, Collapse, FormControl, FormControlLabel, IconButton, MenuItem, Select, Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@mui/material';

import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import AddAuth from './AddAuth';
import APIs from '../../api/APIs';
import useStatus from '../../hooks/useStatus';
import { changeAdminData } from '../../redux/reducers/AdminReducer';

function Row(props) {
  const { row } = props;
  const [open, setOpen] = useState(false);
  const [showAddAuth, setShowAddAuth] = useState(false);
  const { status, handleChangeStatus, handleClickStatusApply } = useStatus(row.status, APIs.changeAdminStatus, row.id, changeAdminData)

  return (
    <>
      <TableRow>
        <TableCell
          sx={{
            borderBottom: '0',
          }}
        >
          <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
            {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
          </IconButton>
        </TableCell>
        <TableCell
          sx={{
            borderBottom: '0',
          }}
        >
          <Box display="flex" alignItems="center">
            <Typography variant="h5" fontWeight="600">
              {row.id}
            </Typography>
          </Box>
        </TableCell>
        <TableCell
          sx={{
            borderBottom: '0',
          }}
        >
          <Typography variant="h5" fontWeight="400">
            {row.email}
          </Typography>
        </TableCell>
        <TableCell
          sx={{
            borderBottom: '0',
          }}
        >
          <Typography variant="h5" fontWeight="400">
            {row.name}
          </Typography>
        </TableCell>
        <TableCell
          sx={{
            borderBottom: '0',
          }}
        >

          <FormControl sx={{ minWidth: 'auto' }}>
            <Select
              labelId="demo-simple-select-helper-label"
              id="demo-simple-select-helper"
              value={status}
              onChange={(e) => handleChangeStatus(e, row.id)}
              sx={{ width: '120px' }}
              size="small"
            >
              <MenuItem value='none'>선택안함</MenuItem>
              <MenuItem value='stable'>정상</MenuItem>
              <MenuItem value='blocked'>정지</MenuItem>
            </Select>
          </FormControl>
          <Button variant="outlined" size="small" color="primary" sx={{ ml: '20px;' }} onClick={handleClickStatusApply}>
            적용
          </Button>
        </TableCell>
        <TableCell
          sx={{
            borderBottom: '0',
          }}
        >
          <FormControlLabel
            control={<Checkbox color="primary" checked={!!row.user} disabled />}
            label="유저 관리"
            labelPlacement="end"
          />
          <FormControlLabel
            control={<Checkbox color="secondary" checked={!!row.collection} disabled />}
            label="컬렉션 관리"
            labelPlacement="end"
          />
          <FormControlLabel
            control={<Checkbox color="success" checked={!!row.system} disabled />}
            label="시스템 설정"
            labelPlacement="end"
          />
          <FormControlLabel
            control={<Checkbox color="error" checked={!!row.admin} disabled />}
            label="관리자 설정"
            labelPlacement="end"
          />
          <FormControlLabel
            control={<Checkbox color="warning" checked={!!row.log} disabled />}
            label="로그"
            labelPlacement="end"
          />
          <Button variant="contained" size="small" color="primary" sx={{ ml: '20px;' }} onClick={() => setShowAddAuth(true)}>
            권한설정
          </Button>
          {showAddAuth && (
            <Box
              sx={{
                position: 'fixed',
                top: '0',
                right: '0',
                bottom: '0',
                left: '0',
                zIndex: 1,
              }}
            >
              <AddAuth id={row.id} setShowAddAuth={setShowAddAuth} auth={{ user: row.user, collection: row.collection, system: row.system, admin: row.admin, log: row.log }} />
            </Box>
          )}
        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell sx={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
          <Collapse in={open} timeout="auto" unmountOnExit>
            <Box margin={1}>
              <Typography
                gutterBottom
                variant="h5"
                sx={{
                  mt: 2,
                  backgroundColor: (theme) => theme.palette.grey.A700,
                  p: '5px 15px',
                  color: (theme) =>
                    `${theme.palette.mode === 'dark'
                      ? theme.palette.grey.A200
                      : 'rgba(0, 0, 0, 0.87)'
                    }`,
                }}
              >
                History
              </Typography>
              <Table size="small" aria-label="purchases">
                <TableHead>
                  <TableRow>
                    <TableCell>
                      <Typography variant="h6">직책</Typography>
                    </TableCell>
                    <TableCell>
                      <Typography variant="h6">담당업무</Typography>
                    </TableCell>
                    <TableCell>
                      <Typography variant="h6">소속</Typography>
                    </TableCell>
                    <TableCell>
                      <Typography variant="h6">휴대폰번호</Typography>
                    </TableCell>
                    <TableCell>
                      <Typography variant="h6">등록일자</Typography>
                    </TableCell>
                    <TableCell>
                      <Typography variant="h6">최종 권한 변경일</Typography>
                    </TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  <TableRow>
                    <TableCell component="th" scope="row">
                      <Typography color="textSecondary" fontWeight="400">
                        {row.position}
                      </Typography>
                    </TableCell>
                    <TableCell>
                      <Typography color="textSecondary" fontWeight="400">
                        {row.chargeof}
                      </Typography>
                    </TableCell>
                    <TableCell>
                      <Typography color="textSecondary" fontWeight="400">
                        {row.team}
                      </Typography>
                    </TableCell>
                    <TableCell>
                      <Typography color="textSecondary" fontWeight="400">
                        {row.phone}
                      </Typography>
                    </TableCell>
                    <TableCell>
                      <Typography color="textSecondary" fontWeight="400">
                        {row.created_at}
                      </Typography>
                    </TableCell>
                    <TableCell>
                      <Typography color="textSecondary" fontWeight="400">
                        {row.update_at}
                      </Typography>
                    </TableCell>
                  </TableRow>
                </TableBody>
              </Table>
            </Box>
          </Collapse>
        </TableCell>
      </TableRow>
    </>
  );
}

export default Row;

Row.propTypes = {
  row: PropTypes.shape({
    id: PropTypes.number.isRequired,
    email: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    status: PropTypes.string.isRequired,
    user: PropTypes.number.isRequired,
    collection: PropTypes.number.isRequired,
    system: PropTypes.number.isRequired,
    admin: PropTypes.number.isRequired,
    log: PropTypes.number.isRequired,
    position: PropTypes.string.isRequired,
    chargeof: PropTypes.string.isRequired,
    team: PropTypes.string.isRequired,
    phone: PropTypes.string.isRequired,
    created_at: PropTypes.string.isRequired,
    update_at: PropTypes.string.isRequired,
  }),
};