import React from 'react';

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

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

function CheckboxSection() {
  return (
    <Playground
      title="Checkbox"
      initialState={[
        {
          type: 'select',
          stateId: 'color',
          options: colorList,
          selected: 'primary',
        },
        {
          type: 'select',
          stateId: 'size',
          options: ['xSmall', 'small', 'medium', 'large'],
          selected: 'medium',
        },
        {
          type: 'checkbox',
          stateId: 'disabled',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'controlled',
          selected: false,
        },
        {
          type: 'select',
          stateId: 'value',
          options: ['unchecked', 'indeterminate', 'checked'],
          selected: 'unchecked',
          dependOn: 'controlled',
        },
      ]}
      renderCallback={(state) => {
        const props = {
          ...state,
          controlled: undefined,
          checked: state.controlled ? state.value === 'checked' : undefined,
          indeterminate: state.controlled ? state.value === 'indeterminate' : undefined,
          defaultChecked: !state.controlled ? true : undefined,
        };

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

        return {
          component: <Checkbox key={`${state.controlled}`} {...props} />,
          code: `${importsList}\n<Checkbox${getPropsString(props)} />`,
        };
      }}
    />
  );
}

export default CheckboxSection;
