/* eslint-disable react/display-name */
import type { InputHTMLAttributes } from 'react';
import React, {
  useRef, useState, useImperativeHandle,
} from 'react';
import './index.scss';
import { IconCloseCircleFilled } from '@tencentcloud/uikit-base-component-react';

export interface InputLegacyProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type'> {
  className?: string | undefined;
  inputClassName?: string | undefined;
  placeholder?: string | undefined;
  clearable?: boolean | undefined;
  prefix?: React.ReactNode | undefined;
  suffix?: React.ReactNode | undefined;
  value?: InputHTMLAttributes<HTMLInputElement>['value'] | undefined;
  border?: '' | 'bottom' | undefined;
  disabled?: boolean | undefined;
  maxLength?: number | undefined;
  onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
  onBlur?: ((event: React.FocusEvent<HTMLInputElement>) => void) | undefined;
  onFocus?: ((event: React.FocusEvent<HTMLInputElement>) => void) | undefined;
  onKeyDown?: ((event: React.KeyboardEvent<HTMLInputElement>) => void) | undefined;
}
export interface InputLegacyRef {
  focus: (options?: object) => void;
  blur: () => void;
  input: HTMLInputElement | null;
}
export const InputLegacy = React.forwardRef<InputLegacyRef, InputLegacyProps>(
  (props: InputLegacyProps, ref): React.ReactElement => {
    const {
      className = '',
      inputClassName = '',
      placeholder,
      clearable = false,
      prefix,
      suffix,
      onChange,
      onBlur,
      onFocus,
      onKeyDown,
      value: propsValue = '',
      border = '',
      disabled = false,
      maxLength = undefined,
    } = props;

    const [focused, setFocused] = useState<boolean>(false);
    const enterCodeList = ['Enter', 'NumpadEnter'];
    const [value, setValue] = useState(propsValue);
    const inputRef = useRef<HTMLInputElement>(null);
    const handleFocus = (e: any) => {
      setFocused(true);
      onFocus?.(e);
    };
    const handleBlur = (e: any) => {
      setFocused(false);
      onBlur?.(e);
    };
    const handleEnterKeyDown = (e: any) => {
      if (enterCodeList.indexOf(e?.key) > -1 && onKeyDown) {
        e?.preventDefault();
        onKeyDown(e);
      }
    };
    const focus = () => {
      if (inputRef.current) {
        inputRef.current.focus({
          preventScroll: true,
        });
      }
    };
    const clearInput = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
      setValue('');
      focus();
      const currentTarget = inputRef?.current?.cloneNode(
        true,
      ) as HTMLInputElement;
      const event = Object.create(e, {
        target: { value: currentTarget },
        currentTarget: { value: currentTarget },
      });
      currentTarget.value = '';
      onChange?.(event as React.ChangeEvent<HTMLInputElement>);
    };
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      setValue(e.target.value);
      if (inputRef.current) {
        onChange?.(e);
      }
    };
    useImperativeHandle(ref, () => ({
      focus,
      blur: () => {
        inputRef.current?.blur();
      },
      input: inputRef.current,
    }));

    return (
      <div className={`chat-input ${className}`}>
        <div
          className={[
            'chat-input__box',
            border ? `chat-input__box--border-${border}` : '',
            focused ? 'chat-input__box--focused' : '',
          ].filter(Boolean).join(' ')}
        >
          {prefix}
          <input
            maxLength={maxLength}
            disabled={disabled}
            className={`chat-input__control ${inputClassName}`}
            placeholder={placeholder}
            ref={inputRef}
            value={value}
            onFocus={handleFocus}
            onBlur={handleBlur}
            onChange={handleChange}
            onKeyDown={handleEnterKeyDown}
          />
          {suffix}
          {(clearable && value)
          && (
            <div onClick={(e: any) => {
              clearInput(e);
            }}
            >
              <IconCloseCircleFilled />
            </div>
          )}
        </div>
      </div>
    );
  },
);