/**
 * 二级头部导航
 * */

import React, { useEffect, useState, useRef, useCallback, useMemo } from "react";
import clsx from "clsx";
import ResizeObserver from "resize-observer-polyfill";
import { NavArrowIcon } from "@icons/NavArrowIcon";
interface Props {
  /**数据是否在加载中 */
  loading?: boolean;
  children?: React.ReactNode;
}

const MarketMenu: React.FC<Props> = props => {
  const { loading = false, children } = props;
  const parentRef = useRef<HTMLDivElement | null>(null);
  const childRef = useRef<HTMLDivElement | null>(null);
  const resizeObserverRef = useRef<ResizeObserver | null>(null);
  const [state, setState] = useState<{
    parentWidth: number;
    childWidth: number;
    diffWidth: number;
    showLeftIcon: boolean;
    showRightIcon: boolean;
  }>({
    parentWidth: 0,
    childWidth: 0,
    diffWidth: 0,
    showLeftIcon: false,
    showRightIcon: false
  });

  const calcPosition = useCallback(() => {
    const parent = parentRef.current;
    const child = childRef.current;
    if (!parent || !child) return;

    resizeObserverRef.current = new ResizeObserver(entries => {
      const [parentEntry, childEntry] = entries;

      if (childEntry?.target && parentEntry?.target) {
        const childTarget = childEntry.target;
        setState({
          ...state,
          parentWidth: parentEntry.target.clientWidth,
          childWidth: childTarget.scrollWidth,
          diffWidth: childTarget.scrollWidth - parentEntry.target.clientWidth,
          showRightIcon: childTarget.scrollWidth - parentEntry.target.clientWidth > 0
        });

        childTarget.setAttribute("style", "transform:translateX(0);");
      }
    });

    resizeObserverRef.current.observe(parent);
    resizeObserverRef.current.observe(child);
  }, []);

  const childIsOverflow = useMemo(() => {
    return state.childWidth > state.parentWidth;
  }, [state]);

  useEffect(() => {
    let timer: NodeJS.Timeout | null = null;

    if (!loading) {
      timer = setTimeout(() => calcPosition(), 300);
    }

    return () => {
      resizeObserverRef.current?.disconnect();
      timer && clearTimeout(timer);
    };
  }, [loading]);

  return (
    <div
      className={clsx("market-menu-root", {
        hadLeft: childIsOverflow && state.showLeftIcon,
        hadRight: childIsOverflow && state.showRightIcon
      })}
    >
      <div className="market-menu-parent" ref={parentRef}>
        <div className="menu-container" ref={childRef}>
          {children}
        </div>
      </div>

      {childIsOverflow && (
        <React.Fragment>
          {state.showLeftIcon && (
            <div
              className={clsx("arrowIcon", "arrowLeft")}
              onClick={() => {
                childRef.current!.style.transform = `translateX(0)`;
                setState({ ...state, showRightIcon: true, showLeftIcon: false });
              }}
            >
              <div className="button">
                <NavArrowIcon />
              </div>
            </div>
          )}
          {state.showRightIcon && (
            <div
              className={clsx("arrowIcon", "arrowRight")}
              onClick={() => {
                childRef.current!.style.transform = `translateX(-${state.diffWidth}px)`;
                setState({ ...state, showLeftIcon: true, showRightIcon: false });
              }}
            >
              <div className="button">
                <NavArrowIcon />
              </div>
            </div>
          )}
        </React.Fragment>
      )}
    </div>
  );
};

export { MarketMenu };