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

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

interface InputPercentageProps
  extends InputCommonProps,
    InputAccessibilities,
    Omit<TextInputProps, 'size'> {
  withDecimals?: boolean;
}

export const InputPercentage = forwardRef<TextInputType, InputPercentageProps>(
  (
    {
      value,
      onChangeText,
      label,
      helper,
      isError,
      isSuccess,
      disabled,
      onFocus,
      onBlur,
      size,
      withDecimals = false,
      ...textInputProps
    },
    ref,
  ) => {
    const {
      inputRef,
      focused,
      focusInput,
      onInputBlur,
      onInputFocus,
      clearInput,
    } = useInputRef({ref, onFocus, onBlur, onChangeText});

    const formattedValue = useMemo(
      () => formatNumber(value, withDecimals),
      [value, withDecimals],
    );

    const onChange = (text: string) => {
      if (isValidInput(text)) {
        onChangeText?.(text);
      }
    };

    return (
      <InputCore
        label={label}
        helper={helper}
        isSuccess={isSuccess}
        isError={isError}
        focused={focused}
        disabled={disabled}>
        <InputBox
          isSuccess={isSuccess}
          isError={isError}
          disabled={disabled}
          focused={focused}
          onPress={focusInput}
          size={size}
          RightComponent={
            focused &&
            value?.length && (
              <IconButton
                Icon={INPUT_ICONS.clear}
                variant="flat"
                onPress={clearInput}
              />
            )
          }>
          <View style={styles.flex}>
            <Typography>{`${formattedValue}%`}</Typography>
            <TextInput
              ref={inputRef}
              value={value}
              onChangeText={onChange}
              onFocus={onInputFocus}
              onBlur={onInputBlur}
              editable={!disabled}
              keyboardType="numeric"
              style={styles.hidden}
              {...textInputProps}
            />
          </View>
        </InputBox>
      </InputCore>
    );
  },
);

type InputPercentageControllerProps = InputPercentageProps &
  UseInputControllerProps;

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

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