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) => (_: any, isExpanded: boolean) => {
    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>
        ))}
    </>
  )
}