import { useCanGoBack, useRouter } from '@tanstack/react-router';
import { FC } from 'react';

import {
  Tooltip,
  TopBar,
  TopBarLogo,
  TopBarNavigation,
} from '@nuclearplayer/ui';

import { useAppVersion } from '../hooks/useAppVersion';
import { useCanGoForward } from '../hooks/useCanGoForward';
import { useFramelessWindow } from '../hooks/useFramelessWindow';
import { ConnectedThemeController } from './ConnectedThemeController';
import { SearchBox } from './SearchBox';
import { UpdateBadge } from './UpdateBadge';

export const ConnectedTopBar: FC = () => {
  const router = useRouter();
  const { version } = useAppVersion();
  const canGoBack = useCanGoBack();
  const canGoForward = useCanGoForward();
  const frameless = useFramelessWindow();

  return (
    <TopBar draggable={frameless}>
      <div className="flex flex-row items-center gap-4">
        <Tooltip
          content={`Nuclear ${version}`}
          side="bottom"
          wrapperClassName="flex items-center"
        >
          <TopBarLogo />
        </Tooltip>
        <TopBarNavigation
          onBack={() => router.history.back()}
          onForward={() => router.history.forward()}
          canGoBack={canGoBack}
          canGoForward={canGoForward}
        />
        <UpdateBadge />
      </div>
      <SearchBox />
      <ConnectedThemeController />
    </TopBar>
  );
};
