import React from 'react';
import { useTheme } from '@mui/material/styles';
import { MonitorHeart } from '@mui/icons-material';

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

import Playground from '../Playground/Playground';
import { Box, Stack, Typography } from '@/mui/components';
import * as customIcons from '@/mui/components/CustomIcon';

const customIconsEntries = Object.entries(customIcons);

function IconSection() {
  const theme = useTheme();

  const colors = Object.entries({
    text: theme.palette.text,
    primary: theme.palette.primary,
    secondary: theme.palette.secondary,
    info: theme.palette.info,
    success: theme.palette.success,
    warning: theme.palette.warning,
    error: theme.palette.error,
  }).reduce((acc, [key, value]) => {
    const res = Object.keys(value)
      .map((key$) => (key$ === 'contrastText' ? null : `${key}.${key$}`))
      .filter(Boolean);

    return acc.concat(...res);
  }, []);

  return (
    <Stack spacing={4}>
      <Playground
        title="Icons"
        initialState={[
          {
            type: 'select',
            stateId: 'iconKey',
            options: customIconsEntries.map(([key]) => key),
            selected: customIconsEntries[0][0],
          },
          {
            type: 'select',
            stateId: 'fontSize',
            options: [
              'inherit',
              'x5Small',
              'x4Small',
              'x3Small',
              'x2Small',
              'xSmall',
              'small',
              'medium',
              'large',
              'xLarge',
              'x2Large',
              'x3Large',
              'x4Large',
              'x5Large',
              'x6Large',
              'x7Large',
              'x8Large',
              'x9Large',
            ],
            selected: 'medium',
          },
          {
            type: 'select',
            stateId: 'htmlColor',
            options: colors,
            selected: colors[0],
          },
        ]}
        renderCallback={(state) => {
          const props = {
            ...state,
            iconKey: undefined,
          };

          const propsString = getPropsString({
            ...props,
            component: undefined,
          });

          const Icon = customIconsEntries.find((icon) => icon[0] === state.iconKey)[1];

          const importsList = getImportsString([
            [['MonitorHeart'], '@mui/icons-material'],
            [[state.iconKey], '@/mui/components/CustomIcon'],
          ]);

          return {
            component: (
              <Stack spacing={1}>
                <Box
                  sx={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    border: '1px solid var(--theme-palette-divider)',
                    p: 2,
                  }}
                >
                  <Icon {...props} />
                </Box>
                <br />
                <Box
                  sx={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    border: '1px solid var(--theme-palette-divider)',
                    p: 2,
                  }}
                >
                  <MonitorHeart {...props} />
                </Box>
              </Stack>
            ),
            code: `${importsList}
<${state.iconKey}${propsString} />
<MonitorHeart${propsString} />`,
          };
        }}
      />
      <Typography variant="h6">Custom Icons List</Typography>
      <Stack spacing={2} direction="row" alignItems="center" flexWrap="wrap">
        {customIconsEntries.map(([key, Icon]) => (
          <Box
            key={key}
            sx={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              border: '1px solid var(--theme-palette-divider)',
              p: 2,
            }}
          >
            <Icon fontSize="xLarge" htmlColor="text.primary" />
          </Box>
        ))}
      </Stack>
    </Stack>
  );
}

export default IconSection;
