import { useMemo } from 'react';
import { useParams } from 'react-router';

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

import AudienceSkeleton from '@material-hu/components/composed-components/audience/AudienceSkeleton';

import useHuGoTheme from 'src/hooks/useHuGoTheme';

import useGetAudienceItems from 'src/components/Audience/hooks/useGetAudienceItems';
import { audienceQueryToCriterias } from 'src/components/Audience/utils/audienceQueryToCriterias';
import { segmentationPayloadToAudienceQuery } from 'src/components/Audience/utils/segmentationPayloadToAudienceQuery';

import CalibrationRuleForm from './CalibrationRuleForm';
import { EMPTY_CALIBRATION_RULES } from './constants';
import useGetCalibrationRule from './hooks/useGetCalibrationRule';
import { type CalibrationRuleDefaults } from './types';

const CalibrationRuleCreate = () => {
  const HuGoThemeProvider = useHuGoTheme();
  const { id, ruleId } = useParams<{ id: string; ruleId?: string }>();
  const cycleId = Number(id);

  const { data: existingRule, isLoading: isLoadingRule } =
    useGetCalibrationRule(cycleId, ruleId);

  const {
    valueItems,
    itemToGroupMap,
    isLoading: isLoadingItems,
  } = useGetAudienceItems();

  const defaultValues = useMemo<CalibrationRuleDefaults | null>(() => {
    if (!ruleId) return EMPTY_CALIBRATION_RULES;
    if (!existingRule) return null;
    return {
      calibrators: {
        criterias: audienceQueryToCriterias(
          segmentationPayloadToAudienceQuery(
            existingRule.calibratorsAudienceQuery,
          ),
          itemToGroupMap,
          valueItems,
        ),
      },
      calibrated: {
        criterias: audienceQueryToCriterias(
          segmentationPayloadToAudienceQuery(
            existingRule.calibratedAudienceQuery,
          ),
          itemToGroupMap,
          valueItems,
        ),
      },
    };
  }, [ruleId, existingRule, itemToGroupMap, valueItems]);

  const waitingForData =
    !!ruleId && (isLoadingRule || isLoadingItems || !defaultValues);

  if (waitingForData) {
    return (
      <HuGoThemeProvider>
        <Stack sx={{ minHeight: '100vh', pt: 12 }}>
          <Container
            maxWidth="md"
            sx={{ width: '100%' }}
          >
            <AudienceSkeleton />
          </Container>
        </Stack>
      </HuGoThemeProvider>
    );
  }

  return (
    <HuGoThemeProvider>
      <CalibrationRuleForm
        cycleId={cycleId}
        ruleId={ruleId}
        defaultValues={defaultValues ?? EMPTY_CALIBRATION_RULES}
      />
    </HuGoThemeProvider>
  );
};

export default CalibrationRuleCreate;