function useEventListener<K extends keyof HTMLElementEventMap>(
  eventName: K,
  handler: (ev: HTMLElementEventMap[K]) => void,
  options?: Options<HTMLElement>,
): void;
function useEventListener<K extends keyof ElementEventMap>(
  eventName: K,
  handler: (ev: ElementEventMap[K]) => void,
  options?: Options<Element>,
): void;
function useEventListener<K extends keyof DocumentEventMap>(
  eventName: K,
  handler: (ev: DocumentEventMap[K]) => void,
  options?: Options<Document>,
): void;
function useEventListener<K extends keyof WindowEventMap>(
  eventName: K,
  handler: (ev: WindowEventMap[K]) => void,
  options?: Options<Window>,
): void;
function useEventListener(eventName: string, handler: noop, options: Options): void;

function useEventListener(
  // 事件名稱
  eventName: string,
  // 處理函數(shù)
  handler: noop,
  // 設(shè)置
  options: Options = {},
) {
  const handlerRef = useLatest(handler);
  useEffectWithTarget(
    () => {
      const targetElement = getTargetElement(options.target, window);
      if (!targetElement?.addEventListener) {
        return;
      }
      const eventListener = (event: Event) => {
        return handlerRef.current(event);
      };
      // 監(jiān)聽事件
      targetElement.addEventListener(eventName, eventListener, {
        // listener 會在該類型的事件捕獲階段傳播到該 EventTarget 時(shí)觸發(fā)。
        capture: options.capture,
        // listener 在添加之后最多只調(diào)用一次。如果是 true，listener 會在其被調(diào)用之后自動(dòng)移除。
        once: options.once,
        // 設(shè)置為 true 時(shí)，表示 listener 永遠(yuǎn)不會調(diào)用 preventDefault() 。如果 listener 仍然調(diào)用了這個(gè)函數(shù)，客戶端將會忽略它并拋出一個(gè)控制臺警告
        passive: options.passive,
      });
      // 移除事件
      return () => {
        targetElement.removeEventListener(eventName, eventListener, {
          capture: options.capture,
        });
      };
    },
    [eventName, options.capture, options.once, options.passive],
    options.target,
  );
}

export default function useClickAway<T extends Event = Event>(
  // 觸發(fā)函數(shù)
  onClickAway: (event: T) => void,
  // DOM 節(jié)點(diǎn)或者 Ref，支持?jǐn)?shù)組
  target: BasicTarget | BasicTarget[],
  // 指定需要監(jiān)聽的事件，支持?jǐn)?shù)組
  eventName: string | string[] = 'click',
) {
}

// 事件列表
const eventNames = Array.isArray(eventName) ? eventName : [eventName];
// document.addEventListener 監(jiān)聽事件，通過事件代理的方式知道目標(biāo)節(jié)點(diǎn)
eventNames.forEach((event) => document.addEventListener(event, handler));
return () => {
  eventNames.forEach((event) => document.removeEventListener(event, handler));
};

const handler = (event: any) => {
  const targets = Array.isArray(target) ? target : [target];
  if (
    // 判斷點(diǎn)擊的 DOM Target 是否在定義的 DOM 元素（列表）中
    targets.some((item) => {
      const targetElement = getTargetElement(item);
      return !targetElement || targetElement.contains(event.target);
    })
  ) {
    return;
  }
  // 觸發(fā)點(diǎn)擊事件
  onClickAwayRef.current(event);
};

function useEventTarget<T, U = T>(options?: Options<T, U>) {
  const { initialValue, transformer } = options || {};
  const [value, setValue] = useState(initialValue);
  // 自定義轉(zhuǎn)換函數(shù)
  const transformerRef = useLatest(transformer);
  const reset = useCallback(() => setValue(initialValue), []);
  const onChange = useCallback((e: EventTarget<U>) => {
    // 獲取 e.target.value 的值，并進(jìn)行設(shè)置
    const _value = e.target.value;
    if (isFunction(transformerRef.current)) {
      return setValue(transformerRef.current(_value));
    }
    // no transformer => U and T should be the same
    return setValue(_value as unknown as T);
  }, []);
  return [
    value,
    {
      onChange,
      reset,
    },
  ] as const;
}

function useTitle(title: string, options: Options = DEFAULT_OPTIONS) {
  const titleRef = useRef(isBrowser ? document.title : '');
  useEffect(() => {
    document.title = title;
  }, [title]);
  useUnmount(() => {
    // 組件卸載后，恢復(fù)上一次的 title
    if (options.restoreOnUnmount) {
      document.title = titleRef.current;
    }
  });
}

const useFavicon = (href: string) => {
  useEffect(() => {
    if (!href) return;
    const cutUrl = href.split('.');
    const imgSuffix = cutUrl[cutUrl.length - 1].toLocaleUpperCase() as ImgTypes;
    const link: HTMLLinkElement =
      document.querySelector("link[rel*='icon']") || document.createElement('link');
    // 用于定義鏈接的內(nèi)容的類型。
    link.type = ImgTypeMap[imgSuffix];
    // 指定被鏈接資源的URL。
    link.href = href;
    // 此屬性命名鏈接文檔與當(dāng)前文檔的關(guān)系。
    link.rel = 'shortcut icon';
    document.getElementsByTagName('head')[0].appendChild(link);
  }, [href]);
};