import React from 'react';
import {
  AccordionDetails,
  AccordionSummary,
  Accordion as MuiAccordion,
  Typography
} from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { AccordionBaseProps } from '../interfaces';
import { styled } from '@mui/material/styles';

const AccordionStyled = styled(MuiAccordion)({});

export const Accordion = ({ data = [], defaultExpanded = false, ...props }: AccordionBaseProps) => {
  const [expanded, setExpanded] = React.useState<boolean | string>(defaultExpanded);

  const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
    console.log('Event ==> ', event);
    setExpanded(isExpanded ? panel : false);
  };

  return (
    <>
      {data &&
        data.map((item, key) => (
          <AccordionStyled expanded={expanded === item.id} onChange={handleChange(item.id)} key={key} {...props}>
            <AccordionSummary
              expandIcon={<ExpandMoreIcon />}
              aria-controls={`panel-${key}-content`}
              id={`panel-${key}-header`}
            >
              <Typography sx={{ width: '66%', flexShrink: 0 }}>{item.label}</Typography>
            </AccordionSummary>
            <AccordionDetails>{item.children}</AccordionDetails>
          </AccordionStyled>
        ))}
    </>
  );
};