import { useState } from 'react';
import { Helmet } from 'react-helmet-async';
import { useQuery } from 'react-query';
import { useNavigate, useParams } from 'react-router-dom';

import Close from '@material-hu/icons/material/Close';
import IconButton from '@material-hu/mui/IconButton';
import Paper from '@material-hu/mui/Paper';
import Stack from '@material-hu/mui/Stack';

import { PeopleExperience } from '@material-hu/components/composed-components/peopleExperience';

import useNewTheme from 'src/hooks/useNewTheme';
import { getManagerSurveyDetail } from '../services';
import { type CollaboratorSurveyStatus, ManagerSurveyStatus } from '../types';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import EnpsTab from '../components/EnpsTab';
import ParticipationTab from '../components/ParticipationTab';
import ResultLayout from '../components/ResultsLayout';
import SatisfactionTab from '../components/SatisfactionTab';
import StatusChip from '../components/StatusChip';
import TextOverflowTip from '../components/TextOverflowTip';
import { pxKeys } from '../queries';
import { pxRoutes } from '../routes';
import HeatMapTab from '../SurveyResults/components/Heatmap';

const { SideTabNavigation } = PeopleExperience;

type HeaderProps = {
  title: string;
  status: CollaboratorSurveyStatus | ManagerSurveyStatus;
};

const Header = ({ title, status }: HeaderProps) => {
  const navigate = useNavigate();
  const handleClose = () => navigate(pxRoutes.managerSurveysBase());

  return (
    <Paper
      component={Stack}
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        py: 1,
        pl: 2,
        pr: 3,
        zIndex: 10,
      }}
      square
    >
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 1,
          width: '100%',
        }}
      >
        <IconButton onClick={handleClose}>
          <Close />
        </IconButton>
        <TextOverflowTip
          typographyProps={{
            variant: 'h5',
            component: 'h1',
            sx: { width: 'auto' },
          }}
          primary={title}
        />
        <StatusChip status={status} />
      </Stack>
    </Paper>
  );
};

const ManagerResults = () => {
  const [selectedIndex, setSelectedIndex] = useState(0);
  const NewThemeProvider = useNewTheme();
  const { t } = useLokaliseTranslation('people_experience');
  const urlParams = useParams();
  const surveyId = Number(urlParams.id);

  const surveyResultTabs = [
    {
      id: 'participation',
      title: t('participation.title'),
      element: <ParticipationTab />,
    },
    {
      id: 'e-nps',
      title: t('e_nps.title'),
      element: <EnpsTab />,
    },
    {
      id: 'satisfaction',
      title: t('FAVORABILITY_LIST'),
      element: <SatisfactionTab />,
    },
    {
      id: 'heat-map',
      title: t('HEAT_MAP'),
      element: <HeatMapTab />,
    },
  ] as const;

  const { data } = useQuery(
    pxKeys.managerSurveyDetail(surveyId),
    () => getManagerSurveyDetail(surveyId),
    { select: response => response.data },
  );

  const filteredTabs = surveyResultTabs.filter(tab => {
    if (tab.id === 'e-nps') {
      return data?.hasNPSQuestion;
    }
    if (tab.id === 'heat-map') {
      return data?.hasLikertQuestion;
    }
    return true;
  });

  return (
    <NewThemeProvider>
      <Helmet>
        <title>{formatTitle(t('MANAGER_RESULTS'))}</title>
      </Helmet>
      <Stack
        sx={{
          bgcolor: theme => theme.palette.new.background.layout.tertiary,
          height: '100%',
        }}
      >
        <Header
          title={data?.name || ''}
          status={ManagerSurveyStatus.FINISHED}
        />
        <Stack sx={{ height: '100%', overflowY: 'auto' }}>
          <SideTabNavigation
            title={t('result_other')}
            selectedIndex={selectedIndex}
            onChangeIndex={setSelectedIndex}
            tabs={filteredTabs}
            layout={ResultLayout}
            slotProps={{
              tabs: { sx: { width: 228 } },
            }}
          />
        </Stack>
      </Stack>
    </NewThemeProvider>
  );
};

export default ManagerResults;
