// ** MUI Imports
import Paper from '@mui/material/Paper';
import Table from '@mui/material/Table';
import TableRow from '@mui/material/TableRow';
import TableHead from '@mui/material/TableHead';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import NotesIcon from '@mui/icons-material/Notes';
import crypto from 'crypto';
import { Box, Stack, Typography } from '@mui/material';
import { useEffect, useState } from 'react';
import fetchCustomerOrders from 'src/api/fetchCustomerOrders';
import Loading from './Loading';
import NoOrders from './NoOrders';

const CustomerOrderTable = () => {
  let [orders, setOrders] = useState(null);
  let [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchOrder = async () => {
      try {
        let session_raw = localStorage.getItem('session');
        let { session } = JSON.parse(session_raw);
        let fetch_orders = await fetchCustomerOrders({ session });
        setOrders(fetch_orders);
        setLoading(false);
      } catch (error) {
        console.error('error during fetching orders');
      }
    };
    fetchOrder();
  }, []);

  if (loading) return <Loading />;

  if (!orders || orders.length == 0) return <NoOrders />;

  return (
    <TableContainer component={Paper} sx={{ minWidth: '66vw' }}>
      <Table sx={{ width: '100%', minWidth: 650 }} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell align="center"></TableCell>
            {/* <TableCell align="center">custom_id</TableCell> */}
            {/* <TableCell align="center">username</TableCell> */}
            <TableCell align="center">invoice_id</TableCell>
            <TableCell align="center">currency</TableCell>
            <TableCell align="center">order status</TableCell>
            <TableCell align="center">amount</TableCell>
            <TableCell align="center">items</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {orders.map(row => (
            <TableRow
              key={row.name}
              sx={{
                '&:last-of-type td, &:last-of-type th': {
                  border: 0,
                },
              }}
            >
              <TableCell component="th" scope="row">
                <NotesIcon />
              </TableCell>
              {/* <TableCell align="right">{row.custom_id}</TableCell> */}
              {/* <TableCell align="right">{row.username}</TableCell> */}
              <TableCell align="right">{row.invoice_id}</TableCell>
              <TableCell align="right">{row.currency_code}</TableCell>
              <TableCell align="right">{row.order_status}</TableCell>
              <TableCell align="right">{parseInt(row.amount).toFixed(2)}</TableCell>
              <TableCell align="right">
                {JSON.parse(row.items).map(i => (
                  <>
                    <Stack direction="column" spacing={'0.2rem'} alignItems={'flex-start'}>
                      <Typography variant="caption" fontWeight={'bold'}>
                        {i.item_name}
                      </Typography>
                      <Typography variant="caption" fontWeight={'bold'}>
                        {'QTY :' + i.quantity}
                      </Typography>
                      <Typography variant="caption" fontWeight={'bold'}>
                        {row.currency_code + ' ' + parseInt(i.unit_price).toFixed(2)}
                      </Typography>
                    </Stack>
                  </>
                ))}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
};

export default CustomerOrderTable;