import React, { useState } from 'react';

import typography from '@/mui/constants/typography';

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

import Playground from '@/modules/designSystem/modules/Playground/Playground';
import { InlineEditAutocomplete, Stack } from '@/mui/components';

const options = getOptions(20);

function InlineAutocompleteSection() {
  const [value, setValue] = useState(options[0]);

  return (
    <Stack spacing={3}>
      <Playground
        title="Inline Autocomplete"
        initialState={[
          {
            type: 'select',
            stateId: 'variant',
            options: Object.entries(typography)
              .filter(([, value$]) => typeof value$ === 'object')
              .map(([key]) => key),
            selected: 'body2',
          },
          {
            type: 'select',
            stateId: 'size',
            options: ['xSmall', 'small', 'medium', 'large'],
            selected: 'medium',
          },
          {
            type: 'checkbox',
            stateId: 'disabled',
            selected: false,
          },
          {
            type: 'checkbox',
            stateId: 'readOnly',
            selected: false,
          },
          {
            type: 'checkbox',
            stateId: 'editableFromStart',
            selected: false,
          },
          {
            type: 'input-text',
            stateId: 'placeholder',
            selected: 'Enter description here',
          },
        ]}
        renderCallback={(state) => {
          const props = {
            ...state,
            value,
            options,
            optionLabelKey: 'label',
            optionValueKey: 'value',
            editableFromStart: undefined,
            editable: state.editableFromStart,
            onChange: (event, newValue) => {
              setValue(newValue);
            },
          };

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

          return {
            component: <InlineEditAutocomplete {...props} />,
            code: `${importsList}
<InlineEditAutocomplete${getPropsString(props)} />`,
          };
        }}
      />
    </Stack>
  );
}

export default InlineAutocompleteSection;
