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

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

export const FormColorInput: FC = () => {
  const { control, watch } = useFormContext();

  const companyColor = watch('companyColor');

  return (
    <Box sx={{ display: 'flex' }}>
      <Controller
        control={control}
        name="companyColor"
        render={({ field }) => (
          <TextField
            id="companyColor"
            type="color"
            value={companyColor}
            sx={{ m: 0, width: '100%' }}
            margin="normal"
            {...field}
          />
        )}
      />
    </Box>
  );
};

export default FormColorInput;
