import React from 'react';
import { Favorite, Star } from '@mui/icons-material';

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

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

function ButtonSection() {
  return (
    <Playground
      title="Button"
      initialState={[
        {
          type: 'select',
          stateId: 'variant',
          options: ['outlined', 'contained', 'text'],
          selected: 'contained',
        },
        {
          type: 'select',
          stateId: 'size',
          options: ['xSmall', 'small', 'medium', 'large'],
          selected: 'medium',
        },
        {
          type: 'select',
          stateId: 'color',
          options: colorList,
          selected: 'primary',
        },
        {
          type: 'select',
          stateId: 'widthBehavior',
          options: ['default', 'square', 'fullWidth'],
          selected: 'default',
        },
        {
          type: 'select',
          stateId: 'shape',
          options: shapes,
          selected: 'rounded',
        },
        {
          type: 'checkbox',
          stateId: 'startIcon',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'endIcon',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'text',
          selected: true,
        },
        {
          type: 'checkbox',
          stateId: 'disableElevation',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'disabled',
          selected: false,
        },
        {
          type: 'input-text',
          stateId: 'label',
          selected: 'Click Me',
        },
      ]}
      renderCallback={(state) => {
        const square = state.widthBehavior === 'square';

        const props = omitUndefinedProps({
          ...state,
          widthBehavior: undefined,
          text: undefined,
          label: undefined,
          fullWidth: state.widthBehavior === 'fullWidth',
          square: square || undefined,
          startIcon: state.startIcon ? <Favorite /> : undefined,
          endIcon: state.endIcon ? <Star /> : undefined,
        });

        let content = state.text ? state.label : '';

        if (square) {
          content = content.slice(0, 3);
        }

        const propsString = getPropsString({
          ...props,
          startIcon: state.startIcon && '!!!<Favorite />',
          endIcon: state.endIcon && '!!!<Star />',
        });

        const importsList = getImportsString([[['Button']]]);

        return {
          component: (
            <div>
              <Button {...props}>{content}</Button>
            </div>
          ),
          code: `${importsList}
<Button${propsString}>
    ${content}
</Button>`,
        };
      }}
      onChange={(nextState, id, value, setState) => {
        if (nextState.widthBehavior === 'square') {
          if (id === 'text') {
            setState({
              ...nextState,
              label: nextState.label.slice(0, 3),
              endIcon: false,
              startIcon: false,
            });
          } else if (nextState.startIcon || nextState.endIcon) {
            setState({
              ...nextState,
              endIcon: false,
              startIcon: true,
              text: false,
            });
          } else if (id === 'label') {
            setState({
              ...nextState,
              label: value.slice(0, 3),
            });
          }
        } else if (!nextState.text) {
          setState({
            ...nextState,
            text: true,
          });
        }
      }}
    />
  );
}

export default ButtonSection;
