import { ComponentType, FC, createElement, useRef } from 'react';
import { autorun } from 'mobx';
import { Field } from 'mobx-react-form';

/**
 * Свойства целевого компонента.
 */
type InnerProps = {
  /**
   * Обрабатывает событие потери фокуса.
   */
  onBlur?: (...args: any[]) => void;
};

/**
 * Свойства итогового компонента.
 */
type OuterProps<P extends InnerProps> = P;

export const withTextInputFilledMetric = (field: Field, dispatch: () => void) => <P extends InnerProps>(Target: ComponentType<P>) => {
  const WithTextInputFilledMetric: FC<OuterProps<P>> = ({ onBlur, ...props }) => {
    const stopObserving = useRef<any>();

    function handleBlur(...args: any[]) {
      if (onBlur) {
        onBlur(...args);
      }

      if (stopObserving.current) {
        stopObserving.current();
      }

      stopObserving.current = autorun(() => {
        if (!field.validating && field.validated && field.isValid) {
          dispatch();
        }
      });
    }

    return createElement(Target, { ...props, onBlur: handleBlur } as P);
  };

  WithTextInputFilledMetric.displayName = `WithTextInputFilledMetric(${Target.displayName || Target.name})`;

  return WithTextInputFilledMetric;
};