import React from 'react';

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

import Playground from '../Playground/Playground';
import { Autocomplete, Button, InputAdornment, TextField } from '@/mui/components';
import { CustomPeople } from '@/mui/components/CustomIcon';

const options = getOptions(20);

const groupedOptions = options
  .map((option) => {
    const firstLetter = option.label[0].toUpperCase();

    return {
      firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter,
      ...option,
    };
  })
  .sort((a, b) => a.firstLetter.localeCompare(b.firstLetter));

function AutocompleteSection() {
  return (
    <Playground
      title="Autocomplete"
      initialState={[
        {
          type: 'select',
          stateId: 'shape',
          options: shapes,
          selected: 'rounded',
        },
        {
          type: 'checkbox',
          stateId: 'disabled',
          selected: false,
        },
        {
          type: 'select',
          stateId: 'size',
          options: ['xSmall', 'small', 'medium', 'large'],
          selected: 'medium',
        },
        {
          type: 'select',
          stateId: 'variant',
          options: ['outlined', 'filled'],
          selected: 'outlined',
        },
        {
          type: 'checkbox',
          stateId: 'freeSolo',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'multiple',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'checkboxes',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'groupBy',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'autoSuggest',
          selected: true,
        },
        {
          type: 'checkbox',
          stateId: 'disableClearable',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'filterSelectedOptions',
          selected: true,
        },
        {
          type: 'checkbox',
          stateId: 'disableCloseOnSelect',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'error',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'startAdornment',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'endAdornment',
          selected: false,
        },
      ]}
      renderCallback={(state) => {
        const props = {
          ...state,
          error: undefined,
          startAdornment: undefined,
          endAdornment: undefined,
          optionLabelKey: 'label',
          optionValueKey: 'value',
          groupBy: state.groupBy ? (option) => option.firstLetter : undefined,
          options: state.groupBy ? groupedOptions : options,
          renderInput: (params) => {
            const InputProps = {
              ...params.InputProps,
            };

            if (state.startAdornment) {
              InputProps.startAdornment = (
                <InputAdornment position="start">
                  <CustomPeople />
                </InputAdornment>
              );
            }

            if (state.endAdornment) {
              InputProps.endAdornment = (
                <InputAdornment position="end">
                  <Button color="primary" size={state.size}>
                    red
                  </Button>
                </InputAdornment>
              );
            }

            return (
              <TextField
                {...params}
                shape={state.shape}
                label="label"
                placeholder="Favorites"
                size={state.size}
                variant={state.variant}
                error={state.error}
                InputProps={InputProps}
              />
            );
          },
        };
        const importsList = ['Autocomplete', 'TextField'];

        const propsString = getPropsString({
          ...props,
          options: state.groupBy
            ? `!!!options.map((option) => {
    const firstLetter = option.label[0].toUpperCase();

    return {
      firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter,
      ...option,
    };
  })
  .sort((a, b) => a.firstLetter.localeCompare(b.firstLetter))`
            : '!!!options',
          groupBy: state.groupBy ? '!!!(option) => option.firstLetter' : undefined,
          renderInput: `!!!(params$) => <TextField {...params$} size="${state.size}" variant="${state.variant}" />`,
        });

        const importsListString = getImportsString([[importsList]]);

        return {
          component: <Autocomplete key={getKeyByState(state)} {...props} />,
          code: `${importsListString}
const options = ${JSON.stringify(options.slice(0, 2), null, 2)};

<Autocomplete${propsString}/>`,
        };
      }}
      onChange={(nextState, id, value, setState) => {
        if (id === 'checkboxes' && value) {
          setState({
            ...nextState,
            multiple: true,
            freeSolo: false,
            filterSelectedOptions: false,
          });
        } else if (id === 'freeSolo' && nextState.checkboxes) {
          setState({
            ...nextState,
            freeSolo: false,
          });
        } else if (id === 'filterSelectedOptions' && nextState.checkboxes) {
          setState({
            ...nextState,
            filterSelectedOptions: false,
          });
        }
      }}
    />
  );
}

export default AutocompleteSection;
