import { type FC } from 'react';

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

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

import { useLokaliseTranslation } from 'src/utils/i18n';

import ContainerLayout from '../../../components/ContainerLayout';
import { Step } from '../../../types';

import AssignmentValues from './AssignmentValues';
import BasicInfoValues from './BasicInfoValues';
import CollaboratorsValues from './CollaboratorsValues';
import CollapsibleCard from './CollapsibleCard';

type Props = {
  onNavigateToSection: (section: Step) => void;
  onNavigateToEditForm: () => void;
  showValidations: boolean;
};

const Revision: FC<Props> = ({
  onNavigateToSection,
  onNavigateToEditForm,
  showValidations,
}) => {
  const { t } = useLokaliseTranslation('service_management');

  return (
    <Stack
      sx={{
        backgroundColor: ({ palette }) => palette.new.background.layout.default,
        minHeight: '100%',
      }}
    >
      <ContainerLayout sx={{ pb: 6 }}>
        <Stack sx={{ gap: 3 }}>
          <Title
            title={t('revision_title')}
            description={t('revision_description')}
            variant="L"
          />
          <CollapsibleCard title={t(Step.BASIC_INFORMATION)}>
            <BasicInfoValues showValidations={showValidations} />
            <Button
              variant="secondary"
              fullWidth
              size="large"
              onClick={() => onNavigateToSection(Step.BASIC_INFORMATION)}
            >
              {t('edit_basic_information')}
            </Button>
          </CollapsibleCard>
          <CollapsibleCard title={t(Step.FORM)}>
            <Stack sx={{ flexDirection: 'row', gap: 1.5 }}>
              <Button
                variant="tertiary"
                fullWidth
                size="large"
                onClick={() => onNavigateToSection(Step.FORM)}
              >
                {t('view_form')}
              </Button>
              <Button
                variant="secondary"
                fullWidth
                size="large"
                onClick={onNavigateToEditForm}
              >
                {t('edit_form')}
              </Button>
            </Stack>
          </CollapsibleCard>
          <CollapsibleCard title={t(Step.ASSIGNMENT)}>
            <AssignmentValues showValidations={showValidations} />
            <Button
              variant="secondary"
              fullWidth
              size="large"
              onClick={() => onNavigateToSection(Step.ASSIGNMENT)}
            >
              {t('edit_assignment')}
            </Button>
          </CollapsibleCard>
          <CollapsibleCard title={t(Step.COLLABORATORS)}>
            <CollaboratorsValues showValidations={showValidations} />
            <Button
              variant="secondary"
              fullWidth
              size="large"
              onClick={() => onNavigateToSection(Step.COLLABORATORS)}
            >
              {t('edit_collaborators')}
            </Button>
          </CollapsibleCard>
        </Stack>
      </ContainerLayout>
    </Stack>
  );
};

export default Revision;