import { FC } from 'react';

import Box from '@material-hu/mui/Box';
import Table from '@material-hu/mui/Table';
import TableBody from '@material-hu/mui/TableBody';
import TableCell from '@material-hu/mui/TableCell';
import TableHead from '@material-hu/mui/TableHead';
import TableRow from '@material-hu/mui/TableRow';

import { Volunteer } from 'src/types/nemakEvents';

import AddEmployeeTable from './AddEmployeeTable';
import DeleteEmployeeTable from './DeleteEmployeeTable';
import { useTranslation } from './i18n';

export type VolunteerTableProps = {
  handleAddVolunteer: (name: string) => void;
  selectedVolunteers: Volunteer[];
  handleDeleteVolunteer: (index: number) => void;
};

export const VolunteerTable: FC<VolunteerTableProps> = props => {
  const { handleAddVolunteer, selectedVolunteers, handleDeleteVolunteer } =
    props;

  const { t } = useTranslation();

  const onAddVolunteer = (name: string) => handleAddVolunteer(name);

  return (
    <Box sx={{ mt: 2 }}>
      <AddEmployeeTable
        onSubmit={onAddVolunteer}
        label={t('ADD_VOLUNTEER')}
        placeholder={t('ADD_VOLUNTEER_PLACEHOLDER')}
      />
      {selectedVolunteers.length > 0 && (
        <Table sx={{ mb: 2 }}>
          <TableHead>
            <TableRow>
              <TableCell>{t('NAME_FIELD')}</TableCell>
              <TableCell />
            </TableRow>
          </TableHead>
          <TableBody>
            {selectedVolunteers.map((volunteer, index) => (
              <TableRow key={index}>
                <TableCell>{volunteer.VolunteerName}</TableCell>
                <DeleteEmployeeTable
                  title={t('REMOVE_VOLUNTEER')}
                  onDelete={() => handleDeleteVolunteer(index)}
                />
              </TableRow>
            ))}
          </TableBody>
        </Table>
      )}
    </Box>
  );
};

export default VolunteerTable;