import { useEffect, useMemo, useState } from 'react';
import { useQuery } from 'react-query';
import { useParams } from 'react-router-dom';

import { once } from 'lodash-es';

import { PeopleExperience } from '@material-hu/components/composed-components/peopleExperience';
import PxHeatmap from '@material-hu/components/composed-components/peopleExperience/Heatmap';
import type * as PxTypes from '@material-hu/components/composed-components/peopleExperience/types';

import { logEvent } from 'src/config/amplitude';
import { useAuth } from 'src/contexts/JWTContext';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { pxKeys } from '../../../queries';
import { getHeatmapScores, getHeatmapTotals } from '../../../services';
import { EventName } from 'src/types/amplitude';
import {
  type HeatmapReqParams,
  type HeatmapScoresReqParams,
  SegmentType,
} from '../../../types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { SegmentDropdown } from './components';
import { getInitialHeatmapFilters } from './constants';
import { isBossSegment } from './utils';

const { ResultContainer } = PeopleExperience;

const HeatMapTab = () => {
  const { t } = useLokaliseTranslation('people_experience');
  const HuGoThemeProvider = useHuGoTheme();
  const { user } = useAuth();

  const initialHeatmapFilters = getInitialHeatmapFilters(t);

  const [heatmapFilters, setHeatmapFilters] = useState<PxTypes.HeatmapFilters>(
    initialHeatmapFilters,
  );

  const { dataSource, segment, parentId } = heatmapFilters;

  const urlParams = useParams();
  const surveyId = Number(urlParams.id);
  const logEventOnce = useMemo(() => once(logEvent), []);

  const baseReqParams: HeatmapReqParams = {
    surveyId,
    parentId: isBossSegment(segment) ? (parentId ?? undefined) : segment.id,
    dimension: isBossSegment(segment)
      ? segment.id
      : SegmentType.SEGMENTATION_GROUPS,
  };

  const { data: totalsData, isLoading: isTotalLoading } = useQuery({
    queryKey: pxKeys.heatmapTotals(baseReqParams),
    queryFn: () => getHeatmapTotals(baseReqParams),
    select: resData => resData.data,
  });

  const scoreReqParams: HeatmapScoresReqParams = {
    ...baseReqParams,
    dataSource,
  };

  const { data: scoresData, isLoading: isScoreLoading } = useQuery({
    queryKey: pxKeys.heatmapScores(scoreReqParams),
    queryFn: () => getHeatmapScores(scoreReqParams),
    select: resData => resData.data,
  });

  const isDataLoading = isTotalLoading || isScoreLoading;

  useEffect(() => {
    logEventOnce(EventName.HEATMAP_VIEWED, {
      surveyID: surveyId,
    });
  }, []);

  return (
    <HuGoThemeProvider>
      <ResultContainer
        title={t('HEAT_MAP')}
        sx={{ minHeight: '0%' }}
      >
        <PxHeatmap
          totalsData={totalsData}
          scoresData={scoresData}
          loading={isDataLoading}
          onFiltersChange={nextFilters => setHeatmapFilters(nextFilters)}
          SegmentSelect={SegmentDropdown}
          defaultFilters={heatmapFilters}
          restrictToParentId={user?.id}
          scoreSelectDisabled
        />
      </ResultContainer>
    </HuGoThemeProvider>
  );
};

export default HeatMapTab;
