import React from 'react';

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

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

function ButtonGroupSection() {
  return (
    <Playground
      title="ButtonGroup"
      initialState={[
        {
          type: 'select',
          stateId: 'variant',
          options: ['outlined', 'contained', 'text'],
          selected: 'contained',
        },
        {
          type: 'select',
          stateId: 'color',
          options: colorList,
          selected: 'primary',
        },
        {
          type: 'select',
          stateId: 'size',
          options: ['xSmall', 'small', 'medium', 'large'],
          selected: 'medium',
        },
        {
          type: 'select',
          stateId: 'shape',
          options: shapes,
          selected: 'rounded',
        },
        {
          type: 'checkbox',
          stateId: 'fullWidth',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'disabled',
          selected: false,
        },
      ]}
      renderCallback={(state) => {
        const props = {
          ...state,
        };

        const buttonProps = getPropsString({
          onClick: () => null,
        });

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

        return {
          component: (
            <ButtonGroup key={getKeyByState(state)} {...props}>
              <Button onClick={() => null}>10</Button>
              <Button onClick={() => null}>20</Button>
              <Button onClick={() => null}>30</Button>
            </ButtonGroup>
          ),
          code: `${importsList}
<ButtonGroup${getPropsString(props)}>
  <Button${buttonProps}>10</Button>
  <Button${buttonProps}>20</Button>
  <Button${buttonProps}>30</Button>
</ButtonGroup>`,
        };
      }}
    />
  );
}

export default ButtonGroupSection;
