import { useEffect } from 'react';

import type { TabItem } from '~/src/components/Tabs';
import type { CatalogTab } from './types';

import Box from '~/src/components/Box';
import Clickable from '~/src/components/Clickable';
import Page from '~/src/components/Page';
import { PAGE_HEADER_HEIGHT } from '~/src/components/PageHeader';
import PageMetadata from '~/src/components/PageMetadata';
import Tabs from '~/src/components/Tabs';
import Text from '~/src/components/Text';
import useIsEnabled from '~/src/hooks/useIsEnabled';
import useTheme from '~/src/hooks/useTheme';
import { useI18n } from '~/src/lib/i18n';
import { useAppRouter } from '~/src/lib/router2';
import { Features } from '~/src/store/session/types';
import { ContentLinksTab } from './ContentLinksTab';
import { PagesTab } from './PagesTab';
import { isCatalogTab } from './utils';

export const CatalogPage = () => {
  const { t } = useI18n('catalog');

  const isContentLinksEnabled = useIsEnabled(Features.CONTENT_LINKS);

  const theme = useTheme();
  const router = useAppRouter();
  const query = router.getQuery();

  const activeTabId = ((): CatalogTab => {
    if (isCatalogTab(query.tab)) {
      if (!isContentLinksEnabled && query.tab === 'contentLinks') {
        return 'pages';
      }

      return query.tab;
    }

    return 'pages';
  })();

  const tabs = (() => {
    const result: TabItem<CatalogTab>[] = [
      {
        id: 'pages',
        testId: 'catalogTabPages',
        text: t('tabs.pages'),
        content: <PagesTab />,
      },
    ];

    if (isContentLinksEnabled) {
      result.push({
        id: 'contentLinks',
        testId: 'catalogTabContentLinks',
        text: t('tabs.contentLinks'),
        content: <ContentLinksTab />,
      });
    }

    return result;
  })();

  const handleTabChange = async (tabId) => {
    const persistedQuery = router.getPersistedQuery('/catalog', tabId);

    await router.setQuery(
      { tab: tabId, ...persistedQuery },
      { type: 'replace', reset: true }
    );
  };

  useEffect(() => {
    router.setPersistedQuery(query);
  }, [router, query]);

  return (
    <Page
      withGradient={false}
      withTopOverflowGradient={false}
      withOverflowGradients={false}
      withHeaderGradient={false}
      withMenuButton
      renderHeaderContent={() => (
        <Text isBold size="1.5rem" color={theme.textColor40}>
          {t('pageTitle')}
        </Text>
      )}
      renderHeaderRight={() => (
        <Clickable
          testId="createPageButton"
          fullHeight
          centerContent
          padding="0 .5rem"
          href="/create"
        >
          <Text isBold size="1.5rem" color={theme.textColor90}>
            {t('createPage')}
          </Text>
        </Clickable>
      )}
    >
      <PageMetadata title={t('pageTitle')} />
      <Box padding={`${PAGE_HEADER_HEIGHT} 2rem 12rem`}>
        <Box positionRelative maxWidth="76rem" margin="0 auto">
          <Box centerContent padding="1.6rem 0">
            <Tabs<CatalogTab>
              selectedId={activeTabId}
              items={tabs}
              onChange={handleTabChange}
            />
          </Box>
        </Box>
      </Box>
    </Page>
  );
};