import React, {forwardRef, useState} from 'react';
import {View} from 'react-native';
import {IconButton} from '@components/_HuGo/Button';
import {
  TextInput,
  TextInputProps,
  TextInputType,
} from '@components/_core/TextInput';

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

interface InputPasswordProps
  extends InputCommonProps,
    InputAccessibilities,
    Omit<TextInputProps, 'secureTextEntry' | 'size'> {}

export const InputPassword = forwardRef<TextInputType, InputPasswordProps>(
  (
    {
      value,
      onChangeText,
      label,
      helper,
      isError,
      isSuccess,
      disabled,
      onFocus,
      onBlur,
      size,
      ...textInputProps
    },
    ref,
  ) => {
    const {
      inputRef,
      focused,
      focusInput,
      onInputBlur,
      onInputFocus,
      clearInput,
    } = useInputRef({ref, onFocus, onBlur, onChangeText});
    const [hidden, setHidden] = useState(true);
    const Icon = hidden ? INPUT_ICONS.hideEntry : INPUT_ICONS.showEntry;

    const toggleHidden = () => setHidden(current => !current);

    return (
      <InputCore
        label={label}
        helper={helper}
        isSuccess={isSuccess}
        isError={isError}
        focused={focused}
        disabled={disabled}>
        <InputBox
          isSuccess={isSuccess}
          isError={isError}
          disabled={disabled}
          focused={focused}
          size={size}
          onPress={focusInput}
          RightComponent={
            !disabled ? (
              <View style={styles.iconsContainer}>
                <IconButton Icon={Icon} onPress={toggleHidden} variant="flat" />
                {focused && !!value?.length ? (
                  <IconButton
                    Icon={INPUT_ICONS.clear}
                    variant="flat"
                    onPress={clearInput}
                  />
                ) : null}
              </View>
            ) : null
          }>
          <TextInput
            ref={inputRef}
            value={value}
            onChangeText={onChangeText}
            onFocus={onInputFocus}
            onBlur={onInputBlur}
            secureTextEntry={hidden}
            editable={!disabled}
            accessibilityLabel={label}
            {...textInputProps}
          />
        </InputBox>
      </InputCore>
    );
  },
);

type InputPasswordControllerProps = InputPasswordProps &
  UseInputControllerProps;

export const InputPasswordController = forwardRef<
  TextInputType,
  InputPasswordControllerProps
>(({name, showSuccess, helper, ...props}, ref) => {
  const {onChange, ...inputController} = useInputController({
    name,
    showSuccess,
    helperText: helper,
  });

  return (
    <InputPassword
      {...props}
      {...inputController}
      ref={ref}
      onChangeText={onChange}
    />
  );
});
