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

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

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

import Playground from '../Playground/Playground';
import { Typography } from '@/mui/components';

function TypographySection() {
  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);
  }, []);

  const fontWeightOptions = new Array(7).fill(0).map((t, i) => (i + 1) * 100);

  return (
    <Playground
      title="Typography"
      initialState={[
        {
          type: 'select',
          stateId: 'variant',
          options: Object.entries(typography)
            .filter(([, value]) => typeof value === 'object')
            .map(([key]) => key),
          selected: 'h1',
        },
        {
          type: 'select',
          stateId: 'color',
          options: colors,
          selected: colors[0],
        },
        {
          type: 'select',
          stateId: 'fontWeight',
          options: fontWeightOptions,
          selected: theme.typography.h1.fontWeight,
        },
      ]}
      renderCallback={(state) => {
        const props = {
          ...state,
        };

        const value = `${state.variant}. Text example`;

        return {
          component: <Typography {...props}>{value}</Typography>,
          code: `${getImportsString([[['Typography']]])}
<Typography${getPropsString(props)}>
    ${value}
</Typography>`,
        };
      }}
      onChange={(nextState, id, value, setState) => {
        if (id === 'variant') {
          setState((prevState) => ({
            ...prevState,
            fontWeight: theme.typography[value].fontWeight,
          }));
        }
      }}
    />
  );
}

export default TypographySection;
