import { type PropsWithChildren } from 'react';

import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import HuAccordion from '@material-hu/components/design-system/Accordion';
import Button from '@material-hu/components/design-system/Buttons/Button';

import { useNewPathStepper } from 'src/pages/dashboard/Learning/Paths/hooks/useNewPathStepper';
import { type PathStepsType } from 'src/pages/dashboard/Learning/Paths/types';
import { getAccordionTitleStyles } from 'src/pages/dashboard/Learning/Paths/utils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { useNewSessionStepper } from '../../Sessions/hooks/useNewSessionStepper';
import { useSessionStatus } from '../../Sessions/hooks/useSessionStatus';
import { type SessionStepsType } from '../../Sessions/types';

type RevisionAccordionProps = PropsWithChildren<{
  step: PathStepsType | SessionStepsType;
  place?: 'paths' | 'sessions';
}>;

export const RevisionAccordion = ({
  step,
  children,
  place = 'paths',
}: RevisionAccordionProps) => {
  const theme = useTheme();
  const { blockSessionEdition } = useSessionStatus();
  const { setStep: setPathStep } = useNewPathStepper();
  const { setStep: setSessionStep } = useNewSessionStepper();
  const { t } = useLokaliseTranslation('learning');

  const handleNavigateToStep = () => {
    if (place === 'paths') setPathStep(step);
    else setSessionStep(step as SessionStepsType);
  };

  const title = t(`common.${step}`);

  return (
    <HuAccordion
      title={title}
      defaultExpanded
      sx={getAccordionTitleStyles(theme)}
      customDetail={
        <Stack>
          {children}
          <Button
            variant="secondary"
            fullWidth
            size="large"
            disabled={blockSessionEdition}
            onClick={handleNavigateToStep}
            sx={{ alignSelf: 'flex-end' }}
          >
            {t('common.step_edit', { step: title.toLowerCase() })}
          </Button>
        </Stack>
      }
    />
  );
};
