import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Box, Button, Collapse, FormControl, IconButton, Link, 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 APIs from '../../api/APIs';
import useStatus from '../../hooks/useStatus';
import { changeArtistData } from '../../redux/reducers/ArtistReducer';

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

  const { status, handleChangeStatus, handleClickStatusApply } = useStatus(row.status, APIs.changeArtistStatus, row.id, changeArtistData)

  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="4000">
            {row.email}
          </Typography>
        </TableCell>
        <TableCell
          sx={{
            borderBottom: '0',
          }}
        >
          <Typography variant="h5" fontWeight="4000">
            {row.name}
          </Typography>
        </TableCell>
        <TableCell
          sx={{
            borderBottom: '0',
          }}
        >
          <Typography variant="h5" fontWeight="4000">
            {row.team}
          </Typography>
        </TableCell>
        <TableCell
          sx={{
            borderBottom: '0',
          }}
        >
          <Typography variant="h5" fontWeight="400">
            {row.address}
          </Typography>
        </TableCell>
        <TableCell
          sx={{
            borderBottom: '0',
          }}
        >
          <Typography fontWeight="400">
            {row.created_at}
          </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>
              <MenuItem value='withdrawal'>탈퇴</MenuItem>
            </Select>
          </FormControl>
          <Button variant="outlined" size="small" color="primary" sx={{ ml: '20px;' }} onClick={handleClickStatusApply}>
            적용
          </Button>
        </TableCell>
      </TableRow>
      <TableRow sx={{ borderBottom: '1px solid rgba(224, 224, 224, 1)' }}>
        <TableCell sx={{ paddingBottom: 0, paddingTop: 0, borderBottom: 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">Checksum</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.name}
                      </Typography>
                    </TableCell>
                    <TableCell component="th" scope="row">
                      <Typography color="textSecondary" fontWeight="400">
                        {row.enc_version}
                      </Typography>
                    </TableCell>
                    <TableCell component="th" scope="row">
                      <Typography color="textSecondary" fontWeight="400">
                        {row.check_sum}
                      </Typography>
                    </TableCell>
                    <TableCell component="th" scope="row">
                      <Typography color="textSecondary" fontWeight="400">
                        {row.phone}
                      </Typography>
                    </TableCell>
                    <TableCell component="th" scope="row">
                      <Typography color="textSecondary" fontWeight="400">
                        true
                      </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,
    team: PropTypes.string.isRequired,
    address: PropTypes.string.isRequired,
    created_at: PropTypes.string.isRequired,
    status: PropTypes.string.isRequired,
    enc_version: PropTypes.number.isRequired,
    check_sum: PropTypes.string.isRequired,
    phone: PropTypes.string.isRequired
  }),
};