import * as React from 'react';
import { useTranslation } from 'react-i18next';
import { Controller } from 'react-hook-form';

// @MUI Components
import { InputLabel, MenuItem, ListSubheader, FormControl, Select, FormHelperText, Skeleton } from '@mui/material/';

// @Layouts
import Translations from 'src/layouts/components/Translations';

export default function SelectDescription({ control, name, items, errorName, disabled = false, isLoading }) {
  const { t } = useTranslation();

  return (
    <>
      {!isLoading ? (
        <FormControl fullWidth sx={{ minWidth: 120 }}>
          <Controller
            control={control}
            name={name}
            render={({ field }) => (
              <>
                <InputLabel htmlFor='my-select'>{t('general.category')}</InputLabel>

                <Select
                  inputProps={{
                    name: 'my-select',
                    id: 'my-select',
                  }}
                  error={Boolean(t(errorName))}
                  disabled={disabled}
                  label={t('general.category')}
                  {...field}
                >
                  {items.map((item, index) => (
                    <MenuItem key={`item${index}`} value={item.value} sx={{ fontWeight: 600 }}>
                      {item.label}
                    </MenuItem>
                  ))}
                  {items.map((item, index) => (
                    <ListSubheader
                      key={`description${index}`}
                      sx={{ lineHeight: '30px', fontWeight: 400, textTransform: 'none' }}
                    >
                      {item.description}
                    </ListSubheader>
                  ))}
                </Select>
                {errorName && (
                  <FormHelperText sx={{ color: 'error.main' }}>
                    <Translations text={errorName.message} />
                  </FormHelperText>
                )}
              </>
            )}
          />
        </FormControl>
      ) : (
        <Skeleton variant='rectangular' animation='wave' height={60} />
      )}
    </>
  );
}