import { useState, useRef, useCallback, useEffect } from "react";

type ChangeAction<S> = S | ((prevValue: S) => S);

export interface ChangeHandler<T, P extends any[]> {
  (value: T, ...args: P);
}

export function useDefault<T, P extends any[] = any[]>(
  value: T | undefined,
  defaultValue: T | undefined,
  onChange: ChangeHandler<T, P> | undefined
): [T, ChangeHandler<ChangeAction<T>, P>] {
  const isControlledRef = useRef<boolean>(false);
  const valueRef = useRef<T>(defaultValue);
  const [internalValue, setInternalValue] = useState(defaultValue);

  useEffect(() => {
    if (isControlledRef.current) {
      valueRef.current = value;
    }
  }, [value]);

  const handleInternalChange = useCallback<ChangeHandler<T, P>>(
    (newValue, ...args) => {
      // 回调形式更新
      if (typeof newValue === "function") {
        // eslint-disable-next-line no-param-reassign
        newValue = newValue(valueRef.current);
      }

      setInternalValue(newValue);
      valueRef.current = newValue;
      if (typeof onChange === "function") {
        onChange(newValue, ...args);
      }
    },
    [onChange]
  );

  const handleChange = useCallback<ChangeHandler<T, P>>(
    (newValue, ...args) => {
      // 回调形式更新
      if (typeof newValue === "function") {
        // eslint-disable-next-line no-param-reassign
        newValue = newValue(valueRef.current);
      }
      if (typeof onChange === "function") {
        onChange(newValue, ...args);
      }
    },
    [onChange]
  );

  // 受控模式
  if (isControlledRef.current || typeof value !== "undefined") {
    isControlledRef.current = true;
    return [value, handleChange];
  }

  // 非受控模式
  return [internalValue, handleInternalChange];
}