import React, { useState } from 'react';

import { getImportsString, getKeyByState, getPropsString } from '../helpers';

import Playground from '../Playground/Playground';
import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
  Box,
  FormControlLabel,
  Stack,
  Switch,
  Typography,
} from '@/mui/components';

import styles from './AccordionSection.module.scss';

function AccordionSection() {
  const [expandedId, setExpandedId] = useState('');

  const isExpanded = (isControlled, accordionId) => (isControlled ? expandedId === accordionId : undefined);
  const handleExpand = (isControlled, accordionId) => {
    if (isControlled) {
      setExpandedId((prevState) => (prevState === accordionId ? '' : accordionId));
    }
  };

  return (
    <Playground
      title="Accordion"
      initialState={[
        {
          type: 'checkbox',
          stateId: 'defaultExpanded',
          selected: true,
        },
        {
          type: 'checkbox',
          stateId: 'disabled',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'controlled',
          selected: false,
        },
      ]}
      renderCallback={(state) => {
        const props = {
          ...state,
          controlled: undefined,
          expanded: isExpanded(state.controlled, 'accordion1'),
          onChange: () => handleExpand(state.controlled, 'accordion1'),
        };

        const propsString = getPropsString({
          ...props,
          expanded: state.controlled ? '!!!isExpandedId' : undefined,
          onChange: state.controlled ? '!!!() => setExpandedId(...)' : undefined,
        });

        const importsList = getImportsString([[['Accordion', 'AccordionDetails', 'AccordionSummary', 'Typography']]]);

        return {
          component: (
            <Box
              key={getKeyByState(state)}
              sx={{
                width: '100%',
                alignSelf: 'flex-start',
              }}
            >
              <Accordion {...props}>
                <AccordionSummary>
                  <Typography>Accordion 1</Typography>
                </AccordionSummary>
                <AccordionDetails className={styles.AccordionDetails}>
                  <Stack spacing={2}>
                    <FormControlLabel control={<Switch defaultChecked onChange={() => null} />} label="Slides" />
                    <FormControlLabel control={<Switch defaultChecked onChange={() => null} />} label="Transcript" />
                    <FormControlLabel control={<Switch defaultChecked onChange={() => null} />} label="Highlights" />
                  </Stack>
                </AccordionDetails>
              </Accordion>
            </Box>
          ),
          code: `${importsList}
<Accordion${propsString}>
  <AccordionSummary>
    <Typography>Accordion 1</Typography>
  </AccordionSummary>
  <AccordionDetails>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
    malesuada lacus ex, sit amet blandit leo lobortis eget.
  </AccordionDetails>
</Accordion>`,
        };
      }}
      onChange={(nextState, id, value, setState) => {
        if (id === 'controlled' && value) {
          setState({
            ...nextState,
            defaultExpanded: false,
          });
        } else if (id === 'defaultExpanded' && value) {
          setState({
            ...nextState,
            controlled: false,
          });
        }
      }}
    />
  );
}

export default AccordionSection;
