import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Box, Collapse, IconButton, TableCell, TableRow, Typography } from '@mui/material';

import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';

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

  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="400">
              {row.action_type}
            </Typography>
          </Box>
        </TableCell>
        <TableCell
          sx={{
            borderBottom: '0',
          }}
        >
          <Box display="flex" alignItems="center">
            <Typography variant="h5" fontWeight="400">
              {row.sub_action_type}
            </Typography>
          </Box>
        </TableCell>
        <TableCell
          sx={{
            borderBottom: '0',
          }}
        >
          <Box display="flex" alignItems="center">
            <Typography variant="h5" fontWeight="400">
              {row.admin_id}
            </Typography>
          </Box>
        </TableCell>
        <TableCell
          sx={{
            borderBottom: '0',
          }}
        >
          <Typography color="textSecondary" variant="h5" fontWeight="400">
            {row.created_at}
          </Typography>
        </TableCell>
        <TableCell
          sx={{
            borderBottom: '0',
          }}
        >
          <Typography color="textSecondary" variant="h5" fontWeight="400">
            {row.message}
          </Typography>
        </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>
            </Box>
          </Collapse>
        </TableCell>
      </TableRow>
    </>
  );
}

export default Row;

Row.propTypes = {
  row: PropTypes.shape({
    action_type: PropTypes.string.isRequired,
    sub_action_type: PropTypes.string.isRequired,
    admin_id: PropTypes.number.isRequired,
    created_at: PropTypes.string.isRequired,
    message: PropTypes.string.isRequired,
  }),
};