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

export const InputTagsCore = 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 = [], error, clearError } = useField(props.name);

      const [tags, setTags] = useImmer<any>(defaultValue);
      const refTags = useRef<any>(tags);

      useEffect(() => {
         registerField({
            name: fieldName,
            ref,
            path: 'current' as any,
            clearValue(_ref) {
               refTags.current = [];
               setTags([]);
            },
            setValue(_ref: any, value: string) {
               refTags.current = value;
            },
            getValue(_ref: any) {
               return refTags.current;
            },
         });
      }, [fieldName, registerField]);

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

      const onSelect = useCallback(function onSelectItem(text: any, tagValue: any) {
         // add tag
         setTags((v) => {
            if (v.find((tag) => tag.id == tagValue.value.id)) {
               const tmp = [...v];
               tmp.splice(
                  v.findIndex((tag) => tag.id == tagValue.value.id),
                  1,
               );
               refTags.current = tmp;
               return tmp;
            }
            refTags.current = [...v, tagValue.value];
            return [...v, tagValue.value];
         });

         if (props.onSelect) props.onSelect(text, tagValue);
      }, []);

      // eslint-disable-next-line @typescript-eslint/no-use-before-define
      return (
         <AutocompleteCoreWithoutUnform
            {...props}
            ref={ref}
            tags={tags}
            onSelect={onSelect}
            value={null}
            error={error}
            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} />;
   },
);
