import { FC, PropsWithChildren } from 'react';

import ExpandMoreOutlinedIcon from '@material-hu/icons/material/ExpandMoreOutlined';
import Accordion, { AccordionProps } from '@material-hu/mui/Accordion';
import AccordionDetails from '@material-hu/mui/AccordionDetails';
import AccordionSummary from '@material-hu/mui/AccordionSummary';
import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';

export type GeneralFilterAccordionProps = {
  label: JSX.Element;
  accordionProps?: Partial<AccordionProps>;
  withDivider?: boolean;
};

const AdvancedFilterAccordion: FC<
  PropsWithChildren<GeneralFilterAccordionProps>
> = props => {
  const { accordionProps = {}, children, label, withDivider = true } = props;
  const { sx = {}, ...restOfProps } = accordionProps;

  return (
    <>
      <Accordion
        elevation={0}
        disableGutters
        defaultExpanded
        sx={{
          '.MuiCollapse-root': {
            maxHeight: 'unset',
            overflowY: 'hidden',
            '&:not(.MuiCollapse-hidden)': {
              mt: 1,
            },
          },
          ...sx,
        }}
        {...restOfProps}
      >
        <AccordionSummary
          expandIcon={<ExpandMoreOutlinedIcon />}
          sx={{
            minHeight: 0,
            m: 0,
            p: 0,
            '.MuiAccordionSummary-content': {
              m: 0,
            },
          }}
        >
          {label}
        </AccordionSummary>
        <AccordionDetails
          sx={{
            p: 0,
            pl: '4px',
          }}
        >
          <Stack>{children}</Stack>
        </AccordionDetails>
      </Accordion>
      {withDivider && <Divider sx={{ my: 2 }} />}
    </>
  );
};

export default AdvancedFilterAccordion;
