import React from 'react';

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

import Playground from '../Playground/Playground';
import { FormControl, InputLabel, MenuItem, Select } from '@/mui/components';

const options = getOptions(10);

function SelectSection() {
  const [age, setAge] = React.useState(options[0].value);
  const [multipleAge, setMultipleAge] = React.useState([]);

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  const handleChangeMultiple = (event, isNative) => {
    if (isNative) {
      const {
        target: { options: options$ },
      } = event;
      const result = [];
      for (let i = 0; i < options$.length; i += 1) {
        if (options$[i].selected) {
          result.push(options$[i].value);
        }
      }
      setMultipleAge(result);
    } else {
      setMultipleAge(event.target.value);
    }
  };

  return (
    <Playground
      title="Select"
      initialState={[
        {
          type: 'select',
          stateId: 'shape',
          options: shapes,
          selected: 'rounded',
        },
        {
          type: 'checkbox',
          stateId: 'autoWidth',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'defaultOpen',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'disabled',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'error',
          selected: false,
        },
        {
          type: 'input-text',
          stateId: 'label',
          selected: 'Users',
        },
        {
          type: 'checkbox',
          stateId: 'multiple',
          selected: false,
        },
        {
          type: 'select',
          stateId: 'size',
          options: ['xSmall', 'small', 'medium', 'large'],
          selected: 'medium',
        },
        {
          type: 'select',
          stateId: 'variant',
          options: ['filled', 'outlined'],
          selected: 'outlined',
        },
      ]}
      renderCallback={(state) => {
        const props = {
          ...state,
          value: state.multiple ? multipleAge : age,
          onChange: state.multiple ? (event) => handleChangeMultiple(event, false) : handleChange,
        };

        const importsList = getImportsString([[['FormControl', 'InputLabel', 'Select', 'MenuItem']]]);

        return {
          component: (
            <React.Fragment key={getKeyByState(state)}>
              <FormControl fullWidth>
                <InputLabel size={state.size}>{state.label}</InputLabel>
                <Select {...props}>
                  {options.map(({ label, value }) => (
                    <MenuItem key={value} value={value}>
                      {label}
                    </MenuItem>
                  ))}
                </Select>
              </FormControl>
            </React.Fragment>
          ),
          code: `${importsList}
<FormControl fullWidth>
  <InputLabel size="${state.size}">${state.label}</InputLabel>
  <Select${getPropsString(props)}>
    ${options.map(({ label, value }) => `<MenuItem key={${value}} value={${value}}>${label}</MenuItem>`).join('\n    ')}
  </Select>
</FormControl>`,
        };
      }}
    />
  );
}

export default SelectSection;
