noahspan-flying/app/src/components/pilotFormCertificates/PilotFormCertificates.tsx

import { PilotFormCertificatesProps } from './PilotFormCertificatesProps.interface';
import {
  Button,
  DatePicker,
  Grid,
  Icon,
  IconButton,
  IconName,
  Select,
  TextField,
  Typography,
} from '@noahspan/noahspan-components';
import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
import { FormMode } from '../../enums/formMode';

const PilotFormCertificates = ({
  isDisabled,
  mode
}: PilotFormCertificatesProps ) => {
  const {
    control,
    formState: { errors },
  } = useFormContext();

  const { fields, append, remove } = useFieldArray({
    name: 'certificates',
    control
  });

  return (
    <Grid
      container
      spacing={2}
    >
      {fields.length > 0 || mode !== FormMode.VIEW &&
        <Grid size={12}>
          <Typography variant="h5">Certificates</Typography>
        </Grid>
      }
      {fields.length > 0 && (
        <>
          <Grid size={4}>
            <Typography variant="h6">Type</Typography>
          </Grid>
          <Grid size={4}>
            <Typography variant="h6">Number</Typography>
          </Grid>
          <Grid size={3}>
            <Typography variant="h6">Date of Issue</Typography>
          </Grid>
          <Grid size={1}>
          </Grid>
          {fields.map((field, index) => {
            return (
              <>
                <Grid size={4}>
                  <Controller
                    name={`certificates.${index}.type`}
                    control={control}
                    render={({ field: { onChange, value } }) => {
                      return (
                        <Select
                          disabled={isDisabled}
                          fullWidth
                          onChange={onChange}
                          options={
                            [
                              {
                                label: 'Student',
                                value: 'student'
                              },
                              {
                                label: 'Private',
                                value: 'private'
                              },
                              {
                                label: 'Instrument',
                                value: 'instrument'
                              },
                              {
                                label: 'Recreational',
                                value: 'recreational'
                              },
                              {
                                label: 'Sport',
                                value: 'sport'
                              }
                            ]
                          }
                          value={value}
                        />
                      );
                    }}
                  />
                </Grid>
                <Grid size={4}>
                  <Controller
                    name={`certificates.${index}.number`}
                    control={control}
                    render={({ field: { onChange, value } }) => {
                      return (
                        <TextField
                          disabled={isDisabled}
                          fullWidth
                          onChange={onChange}
                          value={value}
                        />
                      )
                    }}
                  />
                </Grid>
                <Grid size={3}>
                  <Controller
                    name={`certificates.${index}.dateOfIssue`}
                    control={control}
                    render={({ field: { onChange, value } }) => {
                      return (
                        <DatePicker
                          disabled={isDisabled}
                          onChange={onChange}
                          value={value}
                        />
                      );
                    }}
                  />
                </Grid>
                <Grid size={1}>
                  <IconButton
                    disabled={isDisabled}
                    onClick={() => remove(index)}
                    sx={{
                      marginTop: '-5px'
                    }}
                  >
                    <Icon iconName={IconName.TRASH} size='sm' />
                  </IconButton>
                </Grid>
              </>
            );
          })}
        </>
      )}
      {!isDisabled &&
        <Grid display="flex" justifyContent="right" size={12}>
          <Button
            onClick={() => {
              append({
                type: '',
                number: '',
                dateOfIssue: null
              });
            }}
            startIcon={<Icon iconName={IconName.PLUS} />}
            variant="contained"
          >
            Add Certificate
          </Button>
        </Grid>
      }     
    </Grid>
  );
};

export default PilotFormCertificates;