import React from 'react';

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

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

function SwitchSection() {
  return (
    <Playground
      title="Switch"
      initialState={[
        {
          type: 'select',
          stateId: 'color',
          options: colorList,
          selected: 'primary',
        },
        {
          type: 'select',
          stateId: 'size',
          options: ['xSmall', 'small', 'medium', 'large'],
          selected: 'medium',
        },
        {
          type: 'select',
          stateId: 'edge',
          options: ['end', 'start', 'false'],
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'defaultChecked',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'disableRipple',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'disabled',
          selected: false,
        },
      ]}
      renderCallback={(state) => {
        const props = {
          ...state,
          edge: state.edge === 'false' ? undefined : state.edge,
          onChange: () => null,
        };

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

        return {
          component: (
            <>
              Switch <Switch key={getKeyByState(state)} {...props} /> Me
            </>
          ),
          code: `${importsList}
Switch <Switch${getPropsString(props)}/> Me`,
        };
      }}
    />
  );
}

export default SwitchSection;
