import Link from 'next/link';
import * as stylex from '@stylexjs/stylex';

import type { PageHeaderProps } from './types';

import ChevronIconWrapper from '~/src/components/Icon/ChevronIcon';
import MenuIcon from '~/src/components/Icon/MenuIcon';
import useAppShell from '~/src/components/NextApp/lib/useAppShell';
import { useAppRouter } from '~/src/lib/router2';
import { Layout } from '~/src/ui/layouts/layout';
import { LayoutGrid } from '~/src/ui/layouts/layoutGrid';
import { Clickable } from '~/src/ui/primitives/clickable';
import { Text } from '~/src/ui/primitives/text';
import { pageHeaderStyles } from './styles';

export const PageHeader = ({
  title,
  rightContent,
  backUrl,
}: PageHeaderProps) => {
  const { openAppDrawer } = useAppShell();
  const router = useAppRouter();

  const renderBackButton = () => {
    const canGoBack = router.canGoBack();

    if (!backUrl && !canGoBack) return null;

    const icon = <ChevronIconWrapper direction="left" size={24} />;

    if (backUrl) return <Link href={backUrl}>{icon}</Link>;
    return <Clickable onClick={() => router.back()}>{icon}</Clickable>;
  };

  return (
    <div {...stylex.props(pageHeaderStyles.base)}>
      <LayoutGrid paddingX="6" height="6.5rem" align="center">
        <Layout span="4" gap="4" align="center" justify="start">
          {renderBackButton()}
          <Clickable onClick={openAppDrawer} testId="sideNavButton">
            <MenuIcon size={48} />
          </Clickable>
        </Layout>
        <Layout span="4" justify="center">
          <Text variant="title-4" color="title" align="center" truncate>
            {title}
          </Text>
        </Layout>
        <Layout span="4">{rightContent}</Layout>
      </LayoutGrid>
    </div>
  );
};