import React, {useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Typography} from '@components/_core/Typography';
import {
  YearMonthPicker,
  YearMonthPickerProps,
} from '@components/_HuGo/DatePicker';
import {Language} from '@config/i18n';
import {useModalHandler} from '@hooks/useModalHandler';
import {getMonthYearDate} from '@shared/utils';
import {useTheme} from '@shared/theme';

import {
  useInputController,
  UseInputControllerProps,
} from '../../hooks/useInputController';
import {InputAccessibilities, InputCommonProps} from '../../interfaces';
import {INPUT_ICONS} from '../../constants';
import {InputCore} from '../InputCore';
import {InputBox} from '../InputBox';
import {styles} from './styles';

export interface InputYearMonthPickerProps
  extends InputCommonProps,
    InputAccessibilities,
    Omit<YearMonthPickerProps, 'onClose'> {}

export function InputYearMonthPicker({
  value,
  onChange,
  placeholder,
  label,
  helper,
  isError,
  isSuccess,
  disabled,
  size,
}: InputYearMonthPickerProps) {
  const {i18n} = useTranslation();
  const {iconSizes, theme} = useTheme();
  const {isVisible, onOpenModal, onCloseModal} = useModalHandler();
  const [yearMonthPickerDate, setYearMonthPickerDate] = useState(value);
  const selectedDate =
    yearMonthPickerDate || value
      ? getMonthYearDate(
          yearMonthPickerDate || value,
          i18n.language as Language,
        )
      : null;
  const textColor = theme.text.neutral[disabled ? 'disabled' : 'default'];

  const onYearMonthChange = (newValue?: Date) => {
    setYearMonthPickerDate(newValue);
    onChange?.(newValue);
  };

  return (
    <InputCore
      label={label}
      helper={helper}
      isSuccess={isSuccess}
      isError={isError}
      focused={isVisible}
      disabled={disabled}>
      <InputBox
        isSuccess={isSuccess}
        isError={isError}
        disabled={disabled}
        focused={isVisible}
        onPress={onOpenModal}
        size={size}
        RightComponent={
          <INPUT_ICONS.calendar size={iconSizes.x6} color={textColor} />
        }>
        <View style={styles.dateContainer}>
          {selectedDate ? (
            <Typography color={textColor}>{selectedDate}</Typography>
          ) : placeholder ? (
            <Typography
              color={theme.text.neutral[disabled ? 'disabled' : 'lighter']}>
              {placeholder}
            </Typography>
          ) : null}
        </View>
      </InputBox>
      {isVisible && (
        <YearMonthPicker
          onChange={onYearMonthChange}
          value={value}
          onClose={onCloseModal}
        />
      )}
    </InputCore>
  );
}

type InputYearMonthPickerControllerProps = InputYearMonthPickerProps &
  UseInputControllerProps;

export const InputYearMonthPickerController = ({
  name,
  showSuccess,
  helper,
  ...props
}: InputYearMonthPickerControllerProps) => {
  const inputController = useInputController({
    name,
    showSuccess,
    helperText: helper,
  });

  return <InputYearMonthPicker {...props} {...inputController} />;
};
