// @mui
import { Box, Button, Card, Collapse, Container, IconButton, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from '@mui/material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
// hooks
import useSettings from '../../hooks/useSettings';
// components
import Page from '../../components/Page';
import axios from '../../utils/axios';
import useAuth from '../../hooks/useAuth';
import { Link } from 'react-router-dom';
import React from 'react';

export default function Members() {
  const { themeStretch } = useSettings();

  const { logout } = useAuth();

  const loadSomething = () => {
    console.log('Loading Something')
  }

  type Member = {
    id: number;
    code: string;
    nik: string;
    name: string;
    plan_code: string;
    number_of_families: number;
    number_of_claim: number;
    active: boolean;
    history?: [];
  }

  function createData( member: Member ): Member {
    return {
      ...member,
      history: [
        {
          date: '2020-01-05',
          customerId: '11091700',
          amount: 3,
        },
        {
          date: '2020-01-02',
          customerId: 'Anonymous',
          amount: 1,
        },
      ]
    }
  }

  function Row(props: { row: ReturnType<typeof createData> }) {
    const { row } = props;
    const [open, setOpen] = React.useState(false);

    return (
      <React.Fragment>
        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
          <TableCell>
            <IconButton
              aria-label="expand row"
              size="small"
              onClick={() => setOpen(!open)}
            >
              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
            </IconButton>
          </TableCell>
          <TableCell align="left">{row.code}</TableCell>
          <TableCell align="left">{row.name}</TableCell>
          <TableCell align="right">{row.nik}</TableCell>
          <TableCell align="right">{row.plan_code}</TableCell>
          <TableCell align="right">{row.number_of_claim}</TableCell>
          <TableCell align="right">{row.number_of_families}</TableCell>
        </TableRow>
        <TableRow>
          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
            <Collapse in={open} timeout="auto" unmountOnExit>
              <Box sx={{ margin: 1 }}>
                <Typography variant="h6" gutterBottom component="div">
                  History
                </Typography>
                <Table size="small" aria-label="purchases">
                  <TableHead>
                    <TableRow>
                      <TableCell>Date</TableCell>
                      <TableCell>Customer</TableCell>
                      <TableCell align="right">Amount</TableCell>
                      <TableCell align="right">Total price ($)</TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {row.history ? row.history.map((historyRow) => (
                      <TableRow key={historyRow?.date}>
                        <TableCell component="th" scope="row">
                          {historyRow?.date}
                        </TableCell>
                        <TableCell>{historyRow?.customerId}</TableCell>
                        <TableCell align="right">{historyRow?.amount}</TableCell>
                        <TableCell align="right">
                          {Math.round(historyRow?.amount * row.price * 100) / 100}
                        </TableCell>
                      </TableRow>
                    ))
                    : (
                      <TableRow>
                        <TableCell colSpan={8}>No Data</TableCell>
                      </TableRow>
                      )
                    }
                  </TableBody>
                </Table>
              </Box>
            </Collapse>
          </TableCell>
        </TableRow>
      </React.Fragment>
    );
  }

  // Dummy Default Data
  const rows = [
    createData({
      id: 1,
      code: 'MEMBERCODE',
      nik: 'SM12310003',
      name: 'Dede Pardede',
      plan_code: 'PLAN001',
      number_of_families: 4,
      number_of_claim: 0,
      active: true,
    })
  ];

  const headStyle = {
    fontWeight: 'bold',
  };

  return (
    <Page title="Member List">
      <Container maxWidth={themeStretch ? false : 'xl'}>
        <Typography variant="h3" component="h1" paragraph>
          Member List
        </Typography>


        <Typography variant="body1" component="p" paragraph>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, delectus? Suscipit placeat tempora mollitia optio, assumenda maiores architecto officia itaque molestias cum id eligendi necessitatibus! A velit eos ratione ullam.
        </Typography>

        <Card>
        <TableContainer component={Paper}>
          <Table aria-label="collapsible table">
            <TableBody>
              <TableRow>
                <TableCell style={headStyle} align="left">Detail</TableCell>
                <TableCell style={headStyle} align="left">MemberID</TableCell>
                <TableCell style={headStyle} align="left">Name</TableCell>
                <TableCell style={headStyle} align="right">NIK</TableCell>
                <TableCell style={headStyle} align="right">PlanID</TableCell>
                <TableCell style={headStyle} align="right">Claim&nbsp;(time)</TableCell>
                <TableCell style={headStyle} align="right">Family&nbsp;(person)</TableCell>
                <TableCell style={headStyle} align="right">Status</TableCell>
              </TableRow>
            </TableBody>
            <TableBody>
              {rows.map((row, index) => (
                <Row key={index} row={row} />
              ))}
            </TableBody>
          </Table>
        </TableContainer>
        </Card>
      </Container>
    </Page>
  );
}
