import { type FC } from 'react';

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

import HuAccordion from '@material-hu/components/design-system/Accordion';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import StateCard from '@material-hu/components/design-system/StateCard';
import HuTitle from '@material-hu/components/design-system/Title';

import { useAuth } from 'src/contexts/JWTContext';
import {
  type FormSection,
  InputType,
  type Section,
} from 'src/pages/dashboard/serviceManagement/types';
import { getFormAnswer } from 'src/pages/dashboard/serviceManagement/utils';
import { useLokaliseTranslation } from 'src/utils/i18n';

type Props = {
  formData: FormSection;
};

const RegularFormAnswer: FC<Props> = ({ formData }) => {
  const { user } = useAuth();
  const { t } = useLokaliseTranslation('service_management');

  const isSectionEmpty = (section: Section) => {
    const filteredComponents = section.content.components.filter(
      component => component.type !== InputType.INFO,
    );

    return (
      !filteredComponents.length ||
      (!filteredComponents.some(c => c.type === InputType.AUTOCOMPLETE) &&
        filteredComponents.every(
          c => c.answer === null || c.answer === undefined,
        ))
    );
  };

  const allSections = formData?.sections.filter(
    section => !isSectionEmpty(section),
  );

  if (!allSections?.length) {
    return (
      <StateCard
        variant="primary"
        title={t('empty_form_title')}
        description={t('empty_form_description')}
        slotProps={{
          card: {
            sx: {
              border: 'none',
              backgroundColor: ({ palette }) =>
                palette.new.background.elements.grey,
            },
          },
        }}
      />
    );
  }

  return allSections.map(section => (
    <HuAccordion
      key={section.content.nameId}
      title={section.content.title}
      elevation={0}
      defaultExpanded={true}
      sx={{
        backgroundColor: theme => theme.palette.new.background.layout.default,
        borderRadius: 1,
        py: 1,
      }}
      customDetail={
        <Stack>
          {section.content.components
            .filter(
              component =>
                (component.answer !== null &&
                  component.answer !== undefined &&
                  component.type !== InputType.INFO) ||
                component.type === InputType.AUTOCOMPLETE,
            )
            .map(component => (
              <HuCardContainer
                fullWidth
                key={component.nameId}
                sx={{
                  mb: 1,
                }}
              >
                <HuTitle
                  variant="S"
                  copetin={component.content.title}
                  title={getFormAnswer(component, user!)}
                  sx={{
                    wordBreak: 'break-word',
                  }}
                />
              </HuCardContainer>
            ))}
        </Stack>
      }
    />
  ));
};

export default RegularFormAnswer;
