import Table from '@mui/material/Table'
import TableBody from '@mui/material/TableBody'
import TableCell from '@mui/material/TableCell'
import TableContainer from '@mui/material/TableContainer'
import TableHead from '@mui/material/TableHead'
import TableRow from '@mui/material/TableRow'
import _map from 'lodash/map'
import React from 'react'

import { IDelegationsTicketType } from '../../api/guestTicketDelegation'

export interface ITicketsAvailableTable {
  tableTitle?: string;
  classNamePrefix?: string;
  issuePageData: {
    ticketTypes: IDelegationsTicketType;
  };
}

const TicketsAvailableTable = ({
  tableTitle = 'Tickets available',
  classNamePrefix = 'delegations',
  issuePageData,
}: ITicketsAvailableTable) => (
  <div className={`${classNamePrefix}-tables-block`}>
    <div className={`${classNamePrefix}-ticket-holder`}>{tableTitle}</div>
    <TableContainer className="my-ticket-table">
      <Table aria-label="collapsible table">
        <TableHead>
          <TableRow>
            <TableCell key={1}>{'Ticket Type'}</TableCell>
            <TableCell key={2}>{'Total Quantity'}</TableCell>
            <TableCell key={3}>{'Quantity Issued'}</TableCell>
            <TableCell key={4}>{'Quantity Remaining'}</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {_map(issuePageData.ticketTypes, (val, key) => (
            <TableRow key={key}>
              <TableCell key={key + 'name'}>{val.optionValue}</TableCell>
              <TableCell key={key + 'maxQty'}>{val.delegationMaxQuantity}</TableCell>
              <TableCell key={key + 'issued'}>{val.delegationQuantityIssued}</TableCell>
              <TableCell key={key + 'remaining'}>
                {Number(val.delegationMaxQuantity) - Number(val.delegationQuantityIssued)}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  </div>
)

export default TicketsAvailableTable