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

import { CUSTOM_TAGS_COLORS } from '@/modules/editorial/TagEditor/constants';

import { getImportsString, getKeyByState, getPropsString, shapes } from '../helpers';
import { omitUndefinedProps } from '@/mui/helpers';

import Playground from '../Playground/Playground';
import { Box, Chip } from '@/mui/components';
import { CustomLabelTagCircular } from '@/mui/components/CustomIcon';

const mockFn = () => null;
const label = 'Graph Chip';
const longLabel = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit';

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

  return (
    <>
      <Playground
        title="ChipAlt"
        initialState={[
          {
            type: 'select',
            stateId: 'variant',
            options: ['filled', 'outlined', 'text'],
            selected: 'outlined',
          },
          {
            type: 'select',
            stateId: 'color',
            options: CUSTOM_TAGS_COLORS.map((v, i) => i),
            selected: 0,
          },
          {
            type: 'select',
            stateId: 'size',
            options: ['xSmall', 'small', 'medium', 'large'],
            selected: 'medium',
          },
          {
            type: 'select',
            stateId: 'shape',
            options: shapes,
            selected: 'circular',
          },
          {
            type: 'checkbox',
            stateId: 'onClick',
            selected: false,
          },
          {
            type: 'checkbox',
            stateId: 'withIcon',
            selected: false,
          },
          {
            type: 'checkbox',
            stateId: 'overlapEdit',
            selected: false,
          },
          {
            type: 'checkbox',
            stateId: 'selected',
            selected: false,
          },
          {
            type: 'checkbox',
            stateId: 'noEnoughSpace',
            selected: false,
          },
          {
            type: 'select',
            stateId: 'onDelete',
            options: ['none', 'default', 'custom'],
            selected: 'none',
          },
          {
            type: 'input-text',
            stateId: 'label',
            selected: 'Chip Component',
          },
          {
            type: 'checkbox',
            stateId: 'disabled',
            selected: false,
          },
        ]}
        renderCallback={(state) => {
          const props = omitUndefinedProps({
            ...state,
            withIcon: undefined,
            noEnoughSpace: undefined,
            overlapEdit: undefined,
            color: CUSTOM_TAGS_COLORS[state.color],
            icon: state.withIcon ? <CustomLabelTagCircular /> : undefined,
            deleteIcon: state.onDelete === 'custom' ? <AddCircle /> : undefined,
            onClick: state.onClick ? mockFn : undefined,
            onDelete: state.onDelete !== 'none' ? mockFn : undefined,
            onApply: state.overlapEdit ? mockFn : undefined,
            onCancel: state.overlapEdit ? mockFn : undefined,
          });
          const propsString = getPropsString({
            ...props,
            color: `!!!CUSTOM_TAGS_COLORS[${state.color}]`,
            icon: state.withIcon ? '!!!<CustomLabelTagCircular />' : undefined,
            deleteIcon: state.onDelete === 'custom' ? '!!!<AddCircle />' : undefined,
          });

          const importsList = getImportsString([
            [['Chip']],
            [['CUSTOM_TAGS_COLORS'], '@/modules/editorial/TagEditor/constants'],
          ]);

          return {
            component: (
              <Box sx={{ maxWidth: state.noEnoughSpace ? 300 : 800 }} key={getKeyByState(state)}>
                <Chip {...props} />
              </Box>
            ),
            code: `${importsList}\n<Chip${propsString} />`,
          };
        }}
      />
      <Playground
        title="Graph Chip"
        initialState={[
          {
            type: 'select',
            stateId: 'variant',
            options: ['text', 'filled', 'outlined'],
            selected: 'filled',
          },
          {
            type: 'select',
            stateId: 'color',
            options: theme.palette['-graph'].map((v, i) => i),
            selected: 0,
          },
          {
            type: 'select',
            stateId: 'size',
            options: ['xSmall', 'small', 'medium', 'large'],
            selected: 'medium',
          },
          {
            type: 'select',
            stateId: 'shape',
            options: shapes,
            selected: 'circular',
          },
          {
            type: 'checkbox',
            stateId: 'onClick',
            selected: false,
          },
          {
            type: 'checkbox',
            stateId: 'withIcon',
            selected: true,
          },
          {
            type: 'checkbox',
            stateId: 'overlapEdit',
            selected: false,
          },
          {
            type: 'checkbox',
            stateId: 'selected',
            selected: false,
          },
          {
            type: 'checkbox',
            stateId: 'noEnoughSpace',
            selected: false,
          },
          {
            type: 'select',
            stateId: 'onDelete',
            options: ['none', 'default', 'custom'],
            selected: 'none',
          },
          {
            type: 'input-text',
            stateId: 'label',
            selected: label,
          },
          {
            type: 'checkbox',
            stateId: 'disabled',
            selected: false,
          },
        ]}
        renderCallback={(state) => {
          const props = omitUndefinedProps({
            ...state,
            withIcon: undefined,
            noEnoughSpace: undefined,
            overlapEdit: undefined,
            icon: state.withIcon ? <TripOriginOutlined /> : undefined,
            deleteIcon: state.onDelete === 'custom' ? <AddCircle /> : undefined,
            onClick: state.onClick ? mockFn : undefined,
            onDelete: state.onDelete !== 'none' ? mockFn : undefined,
            onApply: state.overlapEdit ? mockFn : undefined,
            onCancel: state.overlapEdit ? mockFn : undefined,
            color: theme.palette['-graph'][state.color],
          });
          const propsString = getPropsString({
            ...props,
            color: `!!!theme.palette['-graph'][${state.color}]`,
            icon: state.withIcon ? '!!!<TripOriginOutlined />' : undefined,
            deleteIcon: state.onDelete === 'custom' ? '!!!<AddCircle />' : undefined,
          });
          const importsList = getImportsString([
            [['useTheme'], '@mui/material/styles'],
            [['TripOriginOutlined'], '@mui/icons-material'],
            [['Chip']],
          ]);

          return {
            component: (
              <Box sx={{ maxWidth: state.noEnoughSpace ? 300 : 800 }} key={getKeyByState(state)}>
                <Chip {...props} />
              </Box>
            ),
            code: `${importsList}

const theme = useTheme();

<Chip${propsString} />`,
          };
        }}
        onChange={(nextState, id, value$, setState) => {
          if (id === 'noEnoughSpace') {
            setState({
              ...nextState,
              label: value$ ? longLabel : label,
            });
          }
        }}
      />
    </>
  );
}

export default ChipAltSection;
