import { type FC } from 'react';
import { Helmet } from 'react-helmet-async';
import { useTranslation } from 'react-i18next';

import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { RESULT_TYPE_LABEL_KEY } from 'src/pages/dashboard/search/groupings';
import { formatTitle } from 'src/utils/helmetUtils';

import ResultsView from './components/ResultsView';
import Sidebar from './components/Sidebar';
import { useSearchUrlState } from './hooks/useSearchUrlState';

const SearchResults: FC = () => {
  const { t } = useTranslation('global_search');
  const { query, category, setCategory } = useSearchUrlState();
  const HuGoThemeProvider = useHuGoTheme();

  const hasFilter = category !== 'all';
  const title = hasFilter
    ? t(`detail_page.title.filtered`, {
        filterName: t(RESULT_TYPE_LABEL_KEY[category]).toLowerCase(),
      })
    : t(`detail_page.title.all`);

  return (
    <HuGoThemeProvider>
      <Helmet>
        <title>{formatTitle(title)}</title>
      </Helmet>
      <Stack
        direction="row"
        sx={{
          width: '100%',
          minHeight: '100%',
        }}
      >
        <Sidebar
          category={category}
          onSelect={setCategory}
        />
        <Stack
          sx={{
            flex: 1,
            gap: 2,
            maxWidth: 'lg',
            mx: 'auto',
            py: 3,
            px: 4,
          }}
        >
          <Stack>
            <Typography
              variant="globalL"
              sx={{ fontWeight: 'fontWeightSemiBold' }}
            >
              {title}
            </Typography>
            {query && (
              <Typography
                variant="globalS"
                sx={{ color: theme => theme.palette.new.text.neutral.lighter }}
              >
                {hasFilter
                  ? t(`detail_page.subtitle.filtered`, {
                      filterName: t(
                        RESULT_TYPE_LABEL_KEY[category],
                      ).toLowerCase(),
                    })
                  : // TODO: use real data
                    t('detail_page.subtitle.all', { count: 10 })}
              </Typography>
            )}
          </Stack>
          <ResultsView
            query={query}
            category={category}
          />
        </Stack>
      </Stack>
    </HuGoThemeProvider>
  );
};

export default SearchResults;
