import { useRef, useState } from 'react';
import { useOutletContext } from 'react-router-dom';

import { IconArrowLeft } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import { useTheme } from '@material-hu/mui/index';
import Stack from '@material-hu/mui/Stack';
import { fadeIn } from '@material-hu/utils/animations';

import ContentSwitcher from '@material-hu/components/composed-components/peopleExperience/surveyResults/ContentSwitcher';
import { type DimensionDatum } from '@material-hu/components/composed-components/peopleExperience/surveyResults/SatisfactionDimensionsTable/types';
import BreadCrumbs from '@material-hu/components/design-system/Breadcrumbs';

import { type TransformedSurvey } from '../../../../types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import DimensionSatisfactionHeader from './components/DimensionSatisfactionHeader';
import DimensionsTable from './components/DimensionsTable';
import GeneralSatisfactionHeader from './components/GeneralSatisfactionHeader';
import QuestionsTable from './components/QuestionsTable';

const ListResults = () => {
  const { t } = useLokaliseTranslation('people_experience');
  const [selectedDimension, setSelectedDimension] =
    useState<DimensionDatum | null>(null);
  const { survey } = useOutletContext<{ survey: TransformedSurvey }>();
  const rootRef = useRef<HTMLDivElement>(null);
  const theme = useTheme();

  const handleScrollToTop = () => {
    rootRef.current?.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  };

  const handleUnselectDimension = () => {
    setSelectedDimension(null);
  };

  return (
    <Stack
      ref={rootRef}
      sx={{
        overflowY: 'auto',
        width: '100%',
        p: 3,
      }}
    >
      {selectedDimension && (
        <Stack
          sx={{ gap: 3, animation: `${fadeIn} 200ms ease-in-out backwards` }}
        >
          <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
            <IconButton onClick={handleUnselectDimension}>
              <IconArrowLeft color={theme.palette.new.text.neutral.brand} />
            </IconButton>
            <BreadCrumbs
              links={[
                {
                  title: t('favorability_list'),
                  onClick: handleUnselectDimension,
                },
                {
                  title: t('satisfaction.general'),
                },
              ]}
            />
          </Stack>
          <DimensionSatisfactionHeader
            surveyId={survey.id}
            dimensionId={selectedDimension.id}
          />
          <QuestionsTable
            surveyId={survey.id}
            dimensionId={selectedDimension.id}
            onScrollToTop={handleScrollToTop}
          />
        </Stack>
      )}
      {!selectedDimension && (
        <Stack
          sx={{ gap: 3, animation: `${fadeIn} 200ms ease-in-out backwards` }}
        >
          <GeneralSatisfactionHeader surveyId={survey.id} />
          <ContentSwitcher
            title={current => current.label}
            options={[
              {
                id: 'topics',
                label: t('dimension_other'),
                content: (
                  <DimensionsTable
                    surveyId={survey.id}
                    onClickRow={setSelectedDimension}
                    onScrollToTop={handleScrollToTop}
                  />
                ),
              },
              {
                id: 'questions',
                label: t('question_other'),
                content: (
                  <QuestionsTable
                    surveyId={survey.id}
                    dimensionId={undefined}
                    onScrollToTop={handleScrollToTop}
                  />
                ),
              },
            ]}
          />
        </Stack>
      )}
    </Stack>
  );
};

export default ListResults;
