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

import MenuItem from '@material-hu/mui/MenuItem';
import Select from '@material-hu/mui/Select';

import { SelectOptions } from 'src/types/nemakEvents';
import { isMobileScreen } from 'src/utils/recognitions';

import { useTranslation } from '../i18n';

export type SelectControlProps = {
  name: string;
  options: SelectOptions[];
  orderBy: string | number;
};

export const SelectControl: FC<SelectControlProps> = props => {
  const { name, options, orderBy } = props;

  const { t } = useTranslation();
  const { control } = useFormContext();

  return (
    <Controller
      name={name}
      control={control}
      defaultValue={orderBy}
      render={({ field }) => (
        <Select
          {...field}
          sx={{
            minWidth: isMobileScreen() ? '140px' : '280px',
            width: isMobileScreen() ? '140px' : 'auto',
            height: '40px',
            '& fieldset': {
              borderRadius: '4px',
            },
          }}
        >
          {options.map(option => (
            <MenuItem
              key={option.value}
              value={option.value}
            >
              {t(option.label)}
            </MenuItem>
          ))}
        </Select>
      )}
    />
  );
};

export default SelectControl;