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

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

import SelectControl from 'src/pages/dashboard/recognitions/components/formControls/SelectControl';
import TextFieldControl from 'src/pages/dashboard/recognitions/components/formControls/TextFieldControl';
import { useTranslation } from 'src/pages/dashboard/recognitions/i18n';
import {
  UserData,
  PlantObject,
  AreaObject,
  SupervisorObject,
} from 'src/types/recognitions';

export type UserDataFormProps = {
  userData?: UserData;
  plantsData?: PlantObject[];
  areasData?: AreaObject[];
  supervisorsData?: SupervisorObject[];
  isLoadingAreas?: boolean;
  isLoadingSupervisors?: boolean;
  defaultValues?: any;
  isIdeaDetail?: boolean;
};

export const UserDataForm: FC<UserDataFormProps> = props => {
  const {
    userData = null,
    plantsData = null,
    areasData = null,
    supervisorsData = null,
    isLoadingAreas = false,
    isLoadingSupervisors = false,
    defaultValues = null,
    isIdeaDetail = false,
  } = props;

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

  const isEmpty = elem => elem === '';

  const getDefaultValue = name => (isIdeaDetail ? defaultValues?.[name] : '');

  return (
    <CardContent sx={{ p: 2 }}>
      <TextFieldControl
        name="employeeID"
        label={t('EMPLOYEE_NUMBER')}
        control={control}
        defaultValue={
          isIdeaDetail ? getDefaultValue('employeeID') : userData.UserId
        }
        isReadOnly
      />
      {!isIdeaDetail && (
        <TextField
          label={t('NAME')}
          value={`${userData.FirstName}  ${userData.LastName}`}
          sx={{ mt: 2, mb: 1 }}
          fullWidth
          disabled
        />
      )}
      {isIdeaDetail && (
        <>
          <TextFieldControl
            name="employeePlantID"
            label={t('PLANT')}
            defaultValue={getDefaultValue('employeePlant')}
            control={control}
            isReadOnly
            isRequired
          />
          <TextFieldControl
            name="employeeAreaID"
            label={t('AREA')}
            defaultValue={getDefaultValue('employeeArea')}
            control={control}
            isReadOnly
            isRequired
          />
          <TextFieldControl
            name="manager"
            label={t('SUPERVISOR')}
            defaultValue={getDefaultValue('manager')}
            control={control}
            isReadOnly
            isRequired
          />
        </>
      )}
      {!isIdeaDetail && (
        <>
          <SelectControl
            name="employeePlantID"
            label={t('PLANT')}
            options={plantsData}
            control={control}
            disabled={isIdeaDetail}
            isRequired
          />
          <SelectControl
            label={t('AREA')}
            name="employeeAreaID"
            options={areasData || []}
            control={control}
            disabled={isEmpty(watch('employeePlantID'))}
            isLoading={isLoadingAreas}
            isRequired
          />
          <SelectControl
            label={t('SUPERVISOR')}
            name="managerID"
            options={supervisorsData || []}
            control={control}
            disabled={isEmpty(watch('employeeAreaID'))}
            isLoading={isLoadingSupervisors}
            isRequired
          />
        </>
      )}
    </CardContent>
  );
};

export default UserDataForm;