import React from 'react';

import { getImportsString, getPropsString } from '@/modules/designSystem/modules/helpers';

import Playground from '@/modules/designSystem/modules/Playground/Playground';
import { Checkbox, FormControlLabel, GridList } from '@/mui/components';

const getList = (count) => new Array(Math.max(1, count)).fill('').map((_, i) => i + 1);

function GridListSection() {
  const [list, setList] = React.useState(getList(10));

  return (
    <div>
      <Playground
        title="Chip"
        initialState={[
          {
            type: 'select',
            stateId: 'rowCount',
            options: [1, 2, 3, 4],
            selected: 2,
          },
          {
            type: 'input-number',
            stateId: 'listOfItems',
            selected: 10,
          },
          {
            type: 'select',
            stateId: 'direction',
            options: ['column', 'row'],
            selected: 'row',
          },
          {
            type: 'select',
            stateId: 'gap',
            options: ['default', 1, 2, 3, 4],
            selected: 'default',
          },
          {
            type: 'checkbox',
            stateId: 'fullWidth',
            selected: false,
          },
        ]}
        renderCallback={(state) => {
          const props = {
            ...state,
            gap: state.gap === 'default' ? undefined : state.gap,
          };

          const propsString = getPropsString({
            ...props,
          });
          const importsList = getImportsString([[['GridList']]]);

          return {
            component: (
              <GridList {...props}>
                {list.map((id) => (
                  <FormControlLabel
                    key={id}
                    control={<Checkbox color="primary" size="medium" defaultChecked={id % 3 === 0} name="terms" />}
                    label={`${id} Checkbox in list`}
                  />
                ))}
              </GridList>
            ),
            code: `${importsList}\n<GridList${propsString} />`,
          };
        }}
        onChange={(nextState, id, value) => {
          if (id === 'listOfItems') {
            setList(getList(Math.max(1, value)));
          }
        }}
      />
    </div>
  );
}

export default GridListSection;
