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

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

import { type Section, type SummaryItem } from '../../../shared/summaryTypes';

import { ItemsList } from './ItemsList';

export type { SummaryItem };

type DetailSectionSummaryProps = {
  title: string;
  items?: SummaryItem[];
  sections?: Section[];
  action?: {
    title: string;
    onClick: () => void;
  };
  children?: React.ReactNode;
  showDividers?: boolean;
};

export const DetailSectionSummary = ({
  title,
  items,
  sections,
  action,
  children,
  showDividers = false,
}: DetailSectionSummaryProps) => {
  return (
    <CardContainer
      padding={24}
      fullWidth
      footer={
        action && { action1: { onClick: action.onClick, title: action.title } }
      }
    >
      <Stack sx={{ gap: 3 }}>
        <Title
          title={title}
          variant="M"
        />
        {children}
        {items && (
          <ItemsList
            items={items}
            showDividers={showDividers}
          />
        )}
        {sections && (
          <Stack sx={{ gap: 3 }}>
            {sections.map((section, idx) => (
              <Stack
                key={idx}
                sx={{
                  gap: 3,
                  backgroundColor: theme =>
                    theme.palette.new.background.elements.grey,
                  borderRadius: theme => theme.shape.borderRadiusL,
                  p: 2,
                }}
              >
                <Title
                  title={section.title}
                  variant="M"
                />
                {section.items && (
                  <ItemsList
                    items={section.items}
                    showDividers={showDividers}
                  />
                )}
                {section.subsections && (
                  <Stack sx={{ gap: 2 }}>
                    {section.subsections.map((subsection, subIdx) => (
                      <Stack
                        key={subIdx}
                        sx={{
                          gap: 2,
                          backgroundColor: theme =>
                            theme.palette.new.background.layout.tertiary,
                          borderRadius: theme => theme.shape.borderRadiusL,
                          p: 2,
                        }}
                      >
                        <Title
                          title={subsection.title}
                          variant="M"
                        />
                        <ItemsList
                          items={subsection.items}
                          showDividers={showDividers}
                        />
                      </Stack>
                    ))}
                  </Stack>
                )}
              </Stack>
            ))}
          </Stack>
        )}
      </Stack>
    </CardContainer>
  );
};