import { type TablerIcon } from '@material-hu/icons/tabler';
import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

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

type StepSummaryProps = {
  title: string;
  items: {
    name: string;
    // answer could be a tabler icon component or a string
    answer?: string | TablerIcon | null;
  }[];
  action: {
    title: string;
    onClick: () => void;
  };
  boldItemNames?: boolean;
};

export const StepSummary = ({
  title,
  items,
  action,
  boldItemNames = true,
}: StepSummaryProps) => {
  return (
    <Accordion
      defaultExpanded={true}
      title={title}
      elevation={0}
      sx={{
        p: 1,
        borderRadius: theme => theme.shape.borderRadiusL,
        '&:first-of-type': { borderRadius: theme => theme.shape.borderRadiusL },
        '& .MuiAccordionSummary-content .MuiTypography-root': {
          fontSize: 18,
        },
      }}
      customDetail={
        <Stack>
          {items.map((item, index) => (
            <Stack key={item.name}>
              <Stack
                sx={{
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  pb: 3,
                  pt: 2,
                }}
              >
                <Typography
                  variant="globalS"
                  fontWeight={
                    boldItemNames ? 'fontWeightSemiBold' : 'fontWeightRegular'
                  }
                  sx={{
                    maxWidth: boldItemNames ? 304 : 432,
                  }}
                >
                  {item.name}
                </Typography>
                {item.answer && typeof item.answer === 'string' && (
                  <Typography
                    variant="globalS"
                    sx={{
                      maxWidth: boldItemNames ? 432 : 304,
                      textAlign: 'right',
                    }}
                  >
                    {item.answer}
                  </Typography>
                )}
                {item.answer &&
                  typeof item.answer === 'object' &&
                  (() => {
                    const Icon = item.answer as TablerIcon;
                    return <Icon />;
                  })()}
              </Stack>
              {index !== items.length - 1 && <Divider />}
            </Stack>
          ))}
          <Button
            onClick={action.onClick}
            variant="secondary"
            sx={{
              alignSelf: 'flex-end',
            }}
          >
            {action.title}
          </Button>
        </Stack>
      }
    />
  );
};