import React, { InputHTMLAttributes, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
import { OnlyNumbers } from '@devesharp/react-utils';
import { useField } from '@unform/core';
import { maskValue } from '../MaskText/mask.utils';

export const AutocompleteCore = React.forwardRef<InputHTMLAttributes<any>, any>(function AutocompleteCore(
   props,
   inputRef: any,
) {
   const ref = useRef();
   useImperativeHandle(inputRef, () => ref.current, []);

   if (props.name) {
      return <AutocompleteCoreWithUnform {...props} ref={ref} />;
   }

   return <AutocompleteCoreWithoutUnform {...props} ref={ref} />;
});

export const AutocompleteCoreWithUnform = React.forwardRef<InputHTMLAttributes<any>, any>(
   function AutocompleteCoreWithUnform(props, inputRef: any) {
      const ref = useRef<any>();
      useImperativeHandle(inputRef, () => ref.current, []);

      const { fieldName, registerField, defaultValue = null, error, clearError } = useField(props.name);
      // const inputValueRef = useRef(maskValue(defaultValue, props.mask, props as any));

      useEffect(() => {
         registerField({
            name: fieldName,
            ref,
            path: 'current' as any,
            clearValue(_ref) {
               ref.current.value = '';
               // for native
               if (ref.current?.clear) ref.current?.clear();
            },
            setValue(_ref: any, value: string) {
               ref.current.value = maskValue(value, props.mask, props as any);
            },
            getValue(_ref: any) {
               if (props.mask == 'number') {
                  return (Number(OnlyNumbers(ref.current.value)) / 10 ** (props.decimals ?? 2)) as any;
               }

               if (props.mask == 'CEP' || props.mask == 'phone' || props.mask == 'CPF') {
                  return OnlyNumbers(ref.current.value) as any;
               }
               return ref.current.value;
            },
         });
      }, [fieldName, registerField]);

      const onInput = useCallback(function onSelectItem(text: any) {
         // ref.current.value = text;
         clearError();
         if (props.onInput) props.onInput(text);
      }, []);

      const onSelect = useCallback(function onSelectItem(text: any) {
         ref.current.value = text;
         onInput(text);
         if (props.onSelect) props.onSelect(text);
      }, []);

      // eslint-disable-next-line @typescript-eslint/no-use-before-define
      return (
         <AutocompleteCoreWithoutUnform
            {...props}
            ref={ref}
            onInput={onInput}
            onSelect={onSelect}
            value={null}
            error={error}
            defaultValue={defaultValue}
         />
      );
   },
);

export const AutocompleteCoreWithoutUnform = React.forwardRef<HTMLInputElement, any>(
   function AutocompleteCoreWithoutUnform(props, inputRef: any) {
      const { as, ...rest } = props;
      const ref = useRef(null);
      useImperativeHandle(inputRef, () => ref.current, []);

      const PureComponent = useMemo(() => as, [as]) as any;

      return <PureComponent {...rest} ref={ref} />;
   },
);
