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

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

import { MultipleToggleOptions } from 'src/types/recognitions';

export type MultipleToggleControlProps = {
  label: string;
  name: string;
  control?: Control;
  options: MultipleToggleOptions[];
  longText?: boolean;
  defaultValue?: string;
  isReadOnly?: boolean;
  sx?: any;
  t?: any;
};

export const MultipleToggleControl: FC<MultipleToggleControlProps> = props => {
  const {
    label,
    name,
    control = null,
    options,
    longText = false,
    defaultValue = null,
    isReadOnly = false,
  } = props;

  return (
    <Controller
      name={name}
      control={control}
      render={({ field }) => (
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            width: '100%',
            px: 2,
            my: 2,
          }}
        >
          <Typography
            variant="body1"
            sx={{
              width: '70%',
              textAlign: 'justify',
            }}
          >
            {label}
          </Typography>
          <ToggleButtonGroup
            exclusive
            value={field.value !== undefined ? field.value : defaultValue}
            color="primary"
            sx={{ height: '40px', mt: 0.6 }}
            onChange={(_, value) => field.onChange(value)}
            disabled={isReadOnly}
          >
            {options.map(option => (
              <ToggleButton
                key={option.value}
                value={option.value}
                sx={{
                  borderRadius: '4px',
                  p: 1,
                  width: longText ? 'fit-content' : '40px',
                }}
              >
                {option.label}
              </ToggleButton>
            ))}
          </ToggleButtonGroup>
        </Box>
      )}
    />
  );
};

export default MultipleToggleControl;
