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 React from 'react'

export interface ITicketsAssignedTable {
  tableTitle?: string;
  classNamePrefix?: string;
  noTicketsAssignedText?: string;
  issuePageData: {
    tickets: Array<any>;
  };
}

const TicketsAssignedTable = ({
  tableTitle = 'Tickets assigned',
  classNamePrefix = 'delegations',
  issuePageData,
  noTicketsAssignedText = "You haven't issued any tickets yet.",
}: ITicketsAssignedTable) => (
  <div className={`${classNamePrefix}-tables-block`}>
    <div className={`${classNamePrefix}-ticket-holder`}>{tableTitle}</div>
    {issuePageData.tickets?.length ? (
      <TableContainer className="my-ticket-table">
        <Table aria-label="collapsible table">
          <TableHead>
            <TableRow>
              <TableCell key={'Ticket Holder'}>{'Ticket Holder'}</TableCell>
              <TableCell key={'Ticket Type'}>{'Ticket Type'}</TableCell>
              <TableCell key={'Status'}>{'Status'}</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {issuePageData.tickets?.map((ticket: any) => (
              <TableRow key={ticket.id}>
                <TableCell key={ticket.id + 'type'}>
                  {ticket.firstName + ' ' + ticket.lastName}
                </TableCell>
                <TableCell key={ticket.id + 'ticketType'}>{ticket.ticketType}</TableCell>
                <TableCell key={ticket.id + 'status'}>{ticket.status}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    ) : (
      noTicketsAssignedText
    )}
  </div>
)

export default TicketsAssignedTable