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

import ToggleButton from '@material-hu/mui/ToggleButton';
import ToggleButtonGroup from '@material-hu/mui/ToggleButtonGroup';

export type ToggleButtonControlProps = {
  name: string;
  order: string | number;
};

export const ToggleButtonControl: FC<ToggleButtonControlProps> = props => {
  const { name, order } = props;

  const { control } = useFormContext();

  return (
    <Controller
      name={name}
      control={control}
      defaultValue={order}
      render={({ field }) => (
        <ToggleButtonGroup
          {...field}
          color="primary"
          sx={{ height: '40px' }}
        >
          <ToggleButton
            value="ASC"
            sx={{ borderRadius: '4px', p: 1 }}
          >
            ASC
          </ToggleButton>
          <ToggleButton
            value="DESC"
            sx={{ borderRadius: '4px', p: 1 }}
          >
            DESC
          </ToggleButton>
        </ToggleButtonGroup>
      )}
    />
  );
};

export default ToggleButtonControl;