import {useCallback, useMemo, memo} from 'react';
import {useTranslation} from 'react-i18next';
import {
  InputClassicController,
  InputDateController,
  InputSelectController,
  InputSelectOption,
} from '@components';
import {
  FullProfileDataItem,
  ProfileDataType,
  ProfileValue,
} from '@modules/profile/interfaces';
import InputSelectUser from '@modules/profile/components/InputSelectUser';
import {
  InputApplyClearSelectController,
  InputApplyClearSelectOption,
} from '@modules/profile/components/InputApplyClearSelect';

import {getOptions} from '../../utils';

interface Props {
  input: FullProfileDataItem;
  fieldName: string;
}

function RenderInput({input, fieldName}: Props) {
  const {t} = useTranslation();
  const options = useMemo(
    () => getOptions(input, input.value as ProfileValue) ?? [],
    [input],
  );
  const hasMoreThanOneOption = useMemo(
    () => Array.isArray(input.value) && input.value.length > 1,
    [input.value],
  );

  const onAddStringOption = useCallback(
    (item: string) => ({
      id: item,
      label: String(item),
    }),
    [],
  );

  const onAddNumberOption = useCallback(
    (item: string) => ({
      id: Number(item) || 0,
      label: String(item),
    }),
    [],
  );

  const renderInput = useCallback(() => {
    switch (input.type) {
      case ProfileDataType.STRING:
        return (
          <InputClassicController
            name={fieldName}
            label={input.name}
            placeholder={t('general.write_here')}
          />
        );
      case ProfileDataType.NUMBER:
        return (
          <InputClassicController
            name={fieldName}
            label={input.name}
            placeholder={t('general.write_here')}
            keyboardType="numeric"
          />
        );
      case ProfileDataType.DATE:
        return (
          <InputDateController
            name={fieldName}
            label={input.name}
            placeholder={t('general.date_placeholder').toUpperCase()}
            initialDate={
              input.value ? new Date(input.value as string) : undefined
            }
          />
        );
      case ProfileDataType.USER:
        return (
          <InputSelectUser
            name={fieldName}
            label={input.name}
            placeholder={t('general.select')}
            menuTitle={input.name}
          />
        );
      case ProfileDataType.USER_LIST:
        return (
          <InputSelectUser
            name={fieldName}
            label={input.name}
            placeholder={t('general.select')}
            multipleSelect
            showCount={hasMoreThanOneOption}
            menuTitle={input.name}
          />
        );
      case ProfileDataType.MULTIPLE_OPTION:
        return (
          <InputApplyClearSelectController
            name={fieldName}
            label={input.name}
            placeholder={t('general.select')}
            options={options as InputApplyClearSelectOption<string>[]}
            showCount={hasMoreThanOneOption}
            snapPoints={['45%', '55%']}
            menuTitle={input.name}
          />
        );
      case ProfileDataType.OPTION:
        return (
          <InputSelectController
            name={fieldName}
            label={input.name}
            placeholder={t('general.select')}
            options={options as InputSelectOption<string>[]}
            menuTitle={input.name}
          />
        );
      case ProfileDataType.STRING_LIST:
        return (
          <InputApplyClearSelectController<string>
            name={fieldName}
            label={input.name}
            placeholder={t('general.select')}
            menuTitle={input.name}
            options={options as InputApplyClearSelectOption<string>[]}
            withCreateButton
            snapPoints={['45%', '55%']}
            onAddOption={onAddStringOption}
            showCount={hasMoreThanOneOption}
          />
        );
      case ProfileDataType.NUMBER_LIST:
        return (
          <InputApplyClearSelectController<number>
            name={fieldName}
            label={input.name}
            placeholder={t('general.select')}
            menuTitle={input.name}
            options={options as InputApplyClearSelectOption<number>[]}
            withCreateButton
            snapPoints={['45%', '55%']}
            onAddOption={onAddNumberOption}
            showCount={hasMoreThanOneOption}
            keyboardType="numeric"
          />
        );
      default:
        return null;
    }
  }, [
    input.type,
    input.name,
    input.value,
    fieldName,
    t,
    hasMoreThanOneOption,
    options,
    onAddStringOption,
    onAddNumberOption,
  ]);

  return renderInput();
}

export default memo(RenderInput);