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 { CATEGORIES } from 'src/constants/recognitions';
import CategoryForm from 'src/pages/dashboard/recognitions/components/categoriesQuestions/CategoryForm';
import CheckboxControl from 'src/pages/dashboard/recognitions/components/formControls/CheckboxControl';
import EmployeesTable from 'src/pages/dashboard/recognitions/components/formControls/EmployeesTable';
import ImageControl from 'src/pages/dashboard/recognitions/components/formControls/ImageControl';
import SelectControl from 'src/pages/dashboard/recognitions/components/formControls/SelectControl';
import TextFieldControl from 'src/pages/dashboard/recognitions/components/formControls/TextFieldControl';
import ToggleControl from 'src/pages/dashboard/recognitions/components/formControls/ToggleControl';
import { useTranslation } from 'src/pages/dashboard/recognitions/i18n';
import { PlantObject, AreaObject } from 'src/types/recognitions';
import { getCategoryClassification } from 'src/utils/recognitions';

export type IdeaDataFormProps = {
  plantsData?: PlantObject[];
  areasData?: AreaObject[];
  isLoadingAreas?: boolean;
  onAddStartImage: any;
  onAddEndImage: any;
  startImage: any;
  endImage: any;
  onAddSelectedUsers?: any;
  selectedUsers?: any;
  isReadOnly?: boolean;
  defaultValues?: any;
  isIdeaDetail?: boolean;
};

export const IdeaDataForm: FC<IdeaDataFormProps> = props => {
  const {
    plantsData,
    areasData,
    isLoadingAreas,
    onAddStartImage,
    onAddEndImage,
    startImage,
    endImage,
    onAddSelectedUsers,
    selectedUsers,
    isReadOnly = false,
    defaultValues = null,
    isIdeaDetail = false,
  } = props;

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

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

  const showEmployeeTable = () =>
    (!isIdeaDetail && watch('team')) ||
    (isIdeaDetail && getDefaultValue('team'));

  const showCategory = () =>
    (!isReadOnly && watch('category')) ||
    (isReadOnly && getDefaultValue('category'));

  const showIdeaImplemented = () =>
    (!isIdeaDetail && watch('ideaImplemented')) ||
    (isIdeaDetail && getDefaultValue('ideaImplemented'));

  return (
    <CardContent sx={{ p: 2 }}>
      {isIdeaDetail && (
        <TextFieldControl
          name="folio"
          label={t('FOLIO')}
          control={control}
          defaultValue={getDefaultValue('folio')}
          isReadOnly
          isRequired
        />
      )}
      <TextFieldControl
        name="ideaTitle"
        label={t('IDEA_TITLE')}
        control={control}
        isReadOnly={isReadOnly}
        defaultValue={getDefaultValue('ideaTitle')}
        isRequired
      />
      <CheckboxControl
        name="team"
        label={t('GROUP_IDEA')}
        control={control}
        isReadOnly={isIdeaDetail}
        defaultValue={getDefaultValue('team')}
      />
      {showEmployeeTable() && (
        <EmployeesTable
          selectedUsers={selectedUsers}
          onAddSelectedUsers={onAddSelectedUsers}
          isReadOnly={isIdeaDetail}
        />
      )}
      {isIdeaDetail && (
        <>
          <TextFieldControl
            name="ideaPlantID"
            label={t('PLANT')}
            control={control}
            defaultValue={getDefaultValue('ideaPlant')}
            isReadOnly
            isRequired
          />
          <TextFieldControl
            name="ideaAreaID"
            label={t('AREA')}
            control={control}
            defaultValue={getDefaultValue('ideaArea')}
            isReadOnly
            isRequired
          />
        </>
      )}
      {!isIdeaDetail && (
        <>
          <SelectControl
            label={t('PLANT')}
            name="ideaPlantID"
            options={plantsData}
            control={control}
            defaultValue={getDefaultValue('ideaPlantID')}
            disabled={isIdeaDetail}
            isRequired
          />
          <SelectControl
            label={t('AREA')}
            name="ideaAreaID"
            options={areasData || []}
            control={control}
            disabled={watch('ideaPlantID') === '' || isIdeaDetail}
            isLoading={isLoadingAreas}
            defaultValue={getDefaultValue('ideaAreaID')}
            isRequired
          />
        </>
      )}
      <TextFieldControl
        name="equipment"
        label={t('EQUIPMENT')}
        placeholder={t('EQUIPMENT_PLACEHOLDER')}
        control={control}
        isReadOnly={isReadOnly}
        defaultValue={getDefaultValue('equipment')}
        isRequired
        multiline
      />
      <TextFieldControl
        name="product"
        label={t('PRODUCT')}
        placeholder={t('PRODUCT_PLACEHOLDER')}
        control={control}
        isReadOnly={isReadOnly}
        defaultValue={getDefaultValue('product')}
        isRequired
        multiline
      />
      <TextFieldControl
        name="problemDescription"
        label={t('PROBLEM_DESCRIPTION')}
        placeholder={t('PROBLEM_PLACEHOLDER')}
        control={control}
        isReadOnly={isReadOnly}
        defaultValue={getDefaultValue('problemDescription')}
        isRequired
        multiline
      />
      <ImageControl
        image={startImage}
        onAddImage={onAddStartImage}
        title={t('ATTACH_IMAGE_BEFORE')}
        isReadOnly={isReadOnly}
      />
      <TextFieldControl
        name="ideaProposal"
        label={t('SITUATION_PROPOSED')}
        placeholder={t('IDEA_PLACEHOLDER')}
        control={control}
        isReadOnly={isReadOnly}
        defaultValue={getDefaultValue('ideaProposal')}
        isRequired
        multiline
      />
      <SelectControl
        label={t('IMPROVE_INDICATOR')}
        name="category"
        options={CATEGORIES}
        control={control}
        defaultValue={getDefaultValue('categoryID')}
        disabled={isReadOnly}
        isRequired
      />
      {showCategory() && (
        <TextField
          label={t('IDEA_CATEGORY')}
          value={getCategoryClassification(
            watch('category') || getDefaultValue('categoryID'),
          )}
          variant="outlined"
          sx={{ mt: 2, mb: 1 }}
          fullWidth
          disabled
        />
      )}
      <CategoryForm
        currentCategory={watch('category')}
        control={control}
        defaultValues={defaultValues}
        isReadOnly={isReadOnly}
      />
      <ToggleControl
        name="ownIdea"
        label={t('IDEA_IS_YOURS')}
        control={control}
        isReadOnly={isReadOnly}
        defaultValue={getDefaultValue('ownIdea')}
        isRequired
      />
      <ToggleControl
        name="hasSecurityRisks"
        label={t('SECURITY_RISKS')}
        control={control}
        isReadOnly={isReadOnly}
        defaultValue={getDefaultValue('hasSecurityRisks')}
        isRequired
      />
      <ToggleControl
        name="hasNegativeImpact"
        label={t('NEGATIVE_IMPACT')}
        control={control}
        isReadOnly={isReadOnly}
        defaultValue={getDefaultValue('hasNegativeImpact')}
        isRequired
      />
      <ToggleControl
        name="isARepair"
        label={t('IDEA_REPAIR')}
        control={control}
        isReadOnly={isReadOnly}
        defaultValue={getDefaultValue('isARepair')}
        isRequired
      />
      <ToggleControl
        name="ideaImplemented"
        label={t('IDEA_IMPLEMENTED')}
        control={control}
        isReadOnly={isIdeaDetail}
        defaultValue={getDefaultValue('ideaImplemented')}
        isRequired
      />
      {showIdeaImplemented() && (
        <ImageControl
          image={endImage}
          onAddImage={onAddEndImage}
          title={t('ATTACH_IMAGE_AFTER')}
          isReadOnly={isIdeaDetail}
        />
      )}
      <TextFieldControl
        name="ideaBenefits"
        label={t('BENEFIT')}
        placeholder={t('BENEFIT_PLACEHOLDER')}
        isReadOnly={isReadOnly}
        defaultValue={getDefaultValue('ideaBenefits')}
        control={control}
        isRequired
        multiline
      />
    </CardContent>
  );
};

export default IdeaDataForm;