import { DevHeader } from './dev-header';
import { useSetFullScreenLoading } from './page-loading';
import { useHistoryReplace } from '@/hooks/use-history';
import { useInDev } from '@/hooks/use-in-dev';
import { isBextClient } from '@/util/config';
import { Pivot, PivotItem } from '@fluentui/react';
import { FC, useCallback } from 'react';
import { useLocation, useRouteMatch } from 'umi';

const NormalHeader = () => {
  const location = useLocation();
  const historyReplace = useHistoryReplace();
  const route = `/${location.pathname.split('/')[1]}`;

  const onLinkClick = useCallback(
    (key: string) => {
      historyReplace(key);
    },
    [history],
  );

  return (
    <>
      <header className="px-6 flex items-center">
        <span
          className="text-xl font-extralight mr-4"
          onClick={() =>
            historyReplace('/', {
              previewId: undefined,
              previewMeta: undefined,
            })
          }
        >
          Bext
        </span>
        <Pivot
          selectedKey={route}
          onLinkClick={(item) => onLinkClick(item?.props.itemKey || '/')}
        >
          <PivotItem headerText="首页" itemKey="/" />
          <PivotItem headerText="脚本" itemKey="/meta" />
          <PivotItem headerText="工具" itemKey="/tool" />
          <PivotItem headerText="开发" itemKey="/dev" />
          <PivotItem headerText="更多" itemKey="/more" />
        </Pivot>
      </header>
    </>
  );
};

export const Header: FC = () => {
  const inDev = useInDev();
  const inReview = !!useRouteMatch('/meta/:id/review');
  useSetFullScreenLoading();

  if (inReview) {
    return null;
  }
  return inDev ? <DevHeader /> : isBextClient ? null : <NormalHeader />;
};