import { type ComponentProps } from 'react';
import { Helmet } from 'react-helmet-async';
import { useQuery } from 'react-query';
import { useParams, useSearchParams } from 'react-router-dom';

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

import TaskFocusLayout from '@material-hu/components/composed-components/TaskFocusLayout';
import HuSpinner from '@material-hu/components/design-system/ProgressIndicators/Spinner';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { getExternalCycle } from 'src/pages/dashboard/performance/services';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { mapReviewerFormReviewsToReviewDetails } from '../utils';
import { PerformanceReviewProvider } from '../PerformanceReviewContext';
import { performanceKeys } from '../queries';

import ExternalReviewLayout from './components/ExternalReviewLayout';

const PerformanceExternalReview = () => {
  const { id } = useParams();
  const cycleId: string = id ?? '';
  const { t } = useLokaliseTranslation('apps');
  const HuGoThemeProvider = useHuGoTheme();

  const [searchParams] = useSearchParams();

  const rawExternalReviewerId = searchParams.get('id');
  const externalReviewerId = rawExternalReviewerId
    ? Number(rawExternalReviewerId)
    : null;

  const { data: cycle, isLoading } = useQuery(
    performanceKeys.externalCycle(cycleId, externalReviewerId),
    () => getExternalCycle(cycleId, externalReviewerId),
    {
      select: response => response.data,
      enabled: !!externalReviewerId,
    },
  );

  const pageTitle = formatTitle(t('title_view_reviews'));

  const reviews = cycle?.reviewerFormReviews
    ? mapReviewerFormReviewsToReviewDetails(cycle.reviewerFormReviews)
    : [];

  if (isLoading || !cycle) {
    return (
      <HuGoThemeProvider>
        <Helmet>
          <title>{pageTitle}</title>
        </Helmet>
        <TaskFocusLayout
          slotProps={
            {
              root: {
                sx: {
                  height: '100%',
                  minHeight: '100%',
                  display: 'flex',
                  flexDirection: 'column',
                  overflow: 'hidden',
                  backgroundColor: 'new.background.layout.default',
                },
              },
              header: {
                title: '',
                loading: true,
              },
            } as ComponentProps<typeof TaskFocusLayout>['slotProps']
          }
        >
          <Stack
            sx={{
              flex: 1,
              alignItems: 'center',
              justifyContent: 'center',
              minHeight: 240,
            }}
          >
            <HuSpinner />
          </Stack>
        </TaskFocusLayout>
      </HuGoThemeProvider>
    );
  }

  return (
    <HuGoThemeProvider>
      <Helmet>
        <title>{pageTitle}</title>
      </Helmet>
      <PerformanceReviewProvider
        reviews={reviews}
        reviewedFormReviews={cycle.reviewedFormReviews ?? []}
        performanceReviewStatus={cycle.status}
      >
        <ExternalReviewLayout
          cycleName={cycle.name}
          isLoading={isLoading}
          isResponsible={cycle.isResponsible || false}
          reviews={reviews}
          reviewedFormReviews={cycle.reviewedFormReviews ?? []}
        />
      </PerformanceReviewProvider>
    </HuGoThemeProvider>
  );
};

export default PerformanceExternalReview;