import React from 'react';
import { Drafts, Inbox, KeyboardArrowDown, KeyboardArrowUp, Send, StarBorder } from '@mui/icons-material';

import typography from '@/mui/constants/typography';

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

import Playground from '../Playground/Playground';
import { Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText, ListSubheader } from '@/mui/components';

function ListSection() {
  const [open, setOpen] = React.useState(true);

  const handleClick = () => {
    setOpen(!open);
  };

  return (
    <>
      <Playground
        title="Regular UL/Ol List"
        initialState={[
          {
            type: 'select',
            stateId: 'variant',
            options: Object.entries(typography)
              .filter(([, value]) => typeof value === 'object')
              .map(([key]) => key),
            selected: 'body2',
          },
          {
            type: 'select',
            stateId: 'listStyleParent',
            options: ['initial', 'decimal', 'square'],
            selected: 'initial',
          },
          {
            type: 'select',
            stateId: 'listStyleChild',
            options: ['initial', 'decimal', 'square'],
            selected: 'square',
          },
          {
            type: 'checkbox',
            stateId: 'dense',
            selected: true,
          },
        ]}
        renderCallback={(state) => {
          const importsList = getImportsString([[['List', 'ListItem', 'ListItemText']]]);

          return {
            component: (
              <List key={getKeyByState(state)} dense={state.dense} listStyle={state.listStyleParent}>
                <ListItem dense={state.dense}>
                  <ListItemText
                    primary="item 1"
                    slotProps={{
                      primary: {
                        variant: state.variant,
                      },
                    }}
                  />
                  <List disablePadding listStyle={state.listStyleChild}>
                    <ListItem dense={state.dense}>
                      <ListItemText
                        primary="sub item 1"
                        slotProps={{
                          primary: {
                            variant: state.variant,
                          },
                        }}
                      />
                    </ListItem>
                  </List>
                </ListItem>
                <ListItem dense={state.dense}>
                  <ListItemText
                    primary="item 2"
                    slotProps={{
                      primary: {
                        variant: state.variant,
                      },
                    }}
                  />
                </ListItem>
                <ListItem dense={state.dense}>
                  <ListItemText
                    primary="item 3"
                    slotProps={{
                      primary: {
                        variant: state.variant,
                      },
                    }}
                  />
                </ListItem>
              </List>
            ),
            code: `${importsList}
<List dense="${state.dense}" listStyle="${state.listStyleParent}">
  <ListItem dense="${state.dense}">
    <ListItemText
      primary="item 1"
       slotProps={{
         primary: {
           variant: '${state.variant}',
         },
       }}
    />
    <List disablePadding listStyle="${state.listStyleChild}">
      <ListItem dense="${state.dense}">
        <ListItemText
          primary="sub item 1"
          slotProps={{
            primary: {
             variant: '${state.variant}',
            },
          }}
        />
      </ListItem>
    </List>
  </ListItem>
  <ListItem dense="${state.dense}">
    <ListItemText
      primary="item 2"
       slotProps={{
         primary: {
           variant: '${state.variant}',
         },
       }}
    />
  </ListItem>
  <ListItem dense="${state.dense}">
    <ListItemText
      primary="item 3"
      slotProps={{
        primary: {
          variant: '${state.variant}',
        },
      }}
    />
  </ListItem>
</List>`,
          };
        }}
      />
      <Playground
        title="List"
        initialState={[]}
        renderCallback={() => {
          const importsList = getImportsString([
            [['List', 'ListSubheader', 'ListItemButton', 'ListItemIcon', 'ListItemText', 'Collapse']],
            [['Send', 'Drafts', 'Inbox', 'StarBorder'], '@mui/icons-material'],
          ]);

          return {
            component: (
              <List
                sx={{
                  width: '100%',
                  maxWidth: 360,
                  listStyle: 'decimal',
                  bgcolor: 'background.paper',
                }}
                component="nav"
                aria-labelledby="nested-list-subheader"
                subheader={
                  <ListSubheader component="div" id="nested-list-subheader">
                    Nested List Items
                  </ListSubheader>
                }
              >
                <ListItemButton>
                  <ListItemIcon>
                    <Send />
                  </ListItemIcon>
                  <ListItemText primary="Sent mail" />
                </ListItemButton>
                <ListItemButton>
                  <ListItemIcon>
                    <Drafts />
                  </ListItemIcon>
                  <ListItemText primary="Drafts" />
                </ListItemButton>
                <ListItemButton onClick={handleClick}>
                  <ListItemIcon>
                    <Inbox />
                  </ListItemIcon>
                  <ListItemText primary="Inbox" />
                  {open ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
                </ListItemButton>
                <Collapse in={open} timeout="auto" unmountOnExit>
                  <List component="div" disablePadding>
                    <ListItemButton sx={{ pl: 4 }}>
                      <ListItemIcon>
                        <StarBorder />
                      </ListItemIcon>
                      <ListItemText primary="Starred" />
                    </ListItemButton>
                  </List>
                </Collapse>
              </List>
            ),
            code: `${importsList}
<List
  sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}
  component="nav"
  subheader={(
    <ListSubheader component="div" id="nested-list-subheader">
      Nested List Items
    </ListSubheader>
      )}
>
  <ListItemButton>
    <ListItemIcon>
      <Send />
    </ListItemIcon>
    <ListItemText primary="Sent mail" />
  </ListItemButton>
  <ListItemButton>
    <ListItemIcon>
      <Drafts />
    </ListItemIcon>
    <ListItemText primary="Drafts" />
  </ListItemButton>
  <ListItemButton onClick={handleClick}>
    <ListItemIcon>
      <Inbox />
    </ListItemIcon>
    <ListItemText primary="Inbox" />
    {open ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
  </ListItemButton>
  <Collapse in={open} timeout="auto" unmountOnExit>
    <List component="div" disablePadding>
      <ListItemButton sx={{ pl: 4 }}>
        <ListItemIcon>
          <StarBorder />
        </ListItemIcon>
        <ListItemText primary="Starred" />
      </ListItemButton>
    </List>
  </Collapse>
</List>`,
          };
        }}
      />
    </>
  );
}

export default ListSection;
