import { FC } from 'react';
import { useForm, Controller } from 'react-hook-form';

import Box from '@material-hu/mui/Box';
import TextField from '@material-hu/mui/TextField';

import Button from '@material-hu/components/design-system/Buttons/Button';

export type AddEmployeeTableProps = {
  onSubmit: (value: string) => void;
  label: string;
  placeholder: string;
};

export const AddEmployeeTable: FC<AddEmployeeTableProps> = props => {
  const { onSubmit, label, placeholder } = props;

  const { handleSubmit, control, reset, getValues } = useForm();

  const onAddClick = () => {
    const data = getValues();
    onSubmit(data.employeeId);
    reset();
  };

  return (
    <Box>
      <form onSubmit={handleSubmit(onAddClick)}>
        <Controller
          name="employeeId"
          control={control}
          defaultValue=""
          render={({ field }) => (
            <TextField
              {...field}
              variant="standard"
              placeholder={placeholder}
              sx={{
                pl: 2,
                minWidth: '220px',
              }}
            />
          )}
        />
        <Button
          onClick={onAddClick}
          sx={{ ml: 1 }}
        >
          {label}
        </Button>
      </form>
    </Box>
  );
};

export default AddEmployeeTable;