import React from 'react';
import { Lock, Visibility } from '@mui/icons-material';

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

import Playground from '../Playground/Playground';
import { IconButton, InputAdornment, TextField } from '@/mui/components';

function TextFieldSection() {
  const [value, setValue] = React.useState('');

  return (
    <Playground
      title="TextField"
      initialState={[
        {
          type: 'input-number',
          stateId: 'minRows',
          selected: 1,
          dependOn: 'multiline',
        },
        {
          type: 'input-number',
          stateId: 'maxRows',
          selected: 3,
          dependOn: 'multiline',
        },
        {
          type: 'select',
          stateId: 'variant',
          options: ['outlined', 'filled'],
          selected: 'outlined',
        },
        {
          type: 'select',
          stateId: 'size',
          options: ['xSmall', 'small', 'medium', 'large'],
          selected: 'medium',
        },
        {
          type: 'select',
          stateId: 'textAlign',
          options: ['left', 'center', 'right'],
          selected: 'left',
        },
        {
          type: 'select',
          stateId: 'margin',
          options: ['auto', 'none'],
          selected: 'auto',
        },
        {
          type: 'select',
          stateId: 'shape',
          options: shapes,
          selected: 'rounded',
        },
        {
          type: 'checkbox',
          stateId: 'withLabel',
          selected: true,
        },
        {
          type: 'input-text',
          stateId: 'label',
          selected: 'Label',
        },
        {
          type: 'checkbox',
          stateId: 'withHelperText',
          selected: true,
        },
        {
          type: 'input-text',
          stateId: 'helperText',
          selected: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
        },
        {
          type: 'checkbox',
          stateId: 'multiline',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'required',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'error',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'startAdornment',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'endAdornment',
          selected: true,
        },
        {
          type: 'checkbox',
          stateId: 'disabled',
          selected: false,
        },
      ]}
      renderCallback={(state) => {
        const props = {
          ...state,
          value,
          placeholder: 'Placeholder',
          margin: state.margin === 'auto' ? undefined : state.margin,
          withLabel: undefined,
          withHelperText: undefined,
          startAdornment: undefined,
          endAdornment: undefined,
          label: state.withLabel ? state.label : undefined,
          helperText: state.withHelperText ? state.helperText : undefined,
          onChange: (event) => setValue(event.target.value),
        };

        let InputProps;
        const importsList$ = ['TextField'];
        const importsListIcons$ = [];
        const InputStringProps = [];

        if (state.startAdornment) {
          InputProps = InputProps || {};

          InputProps.startAdornment = (
            <InputAdornment position="start">
              <Lock />
            </InputAdornment>
          );

          importsListIcons$.push('Lock');
          importsList$.push('InputAdornment');

          InputStringProps.push(
            `startAdornment: (
    <InputAdornment position="start">
        <Lock />
    </InputAdornment>
)`,
          );
        }

        if (state.endAdornment) {
          InputProps = InputProps || {};

          InputProps.endAdornment = (
            <InputAdornment position="end">
              <IconButton onClick={() => null}>
                <Visibility />
              </IconButton>
            </InputAdornment>
          );

          importsList$.push('InputAdornment', 'IconButton');
          importsListIcons$.push('Visibility');
          InputStringProps.push(`    endAdornment: (
      <InputAdornment position="end">
        <IconButton onClick={() => null}>
            <Visibility />
        </IconButton>
      </InputAdornment>
    )\n`);
        }

        const propsString = getPropsString({
          ...props,
          InputProps: InputStringProps.length ? `!!!{\n${InputStringProps.join(',\n')}}\n` : undefined,
        });

        const importsList = getImportsString([[importsList$], [importsListIcons$, '@mui/icons-material']]);

        return {
          component: <TextField {...props} InputProps={InputProps} />,
          code: `${importsList}\n<TextField${propsString}/>`,
        };
      }}
      onChange={(nextState, id, value$, setState) => {
        if (['minRows', 'maxRows'].includes(id)) {
          setState((prevState) => {
            const nextStateObj = {
              ...prevState,
              [id]: +value$ || 0,
            };

            if (nextStateObj.minRows > nextState.maxRows) {
              nextStateObj.minRows = nextState.maxRows;
            }

            return nextStateObj;
          });
        } else if (id === 'textAlign' && value$ === 'center') {
          setState((prevState) => ({
            ...prevState,
            startAdornment: false,
            endAdornment: false,
          }));
        } else if (id === 'margin' && value$ === 'none') {
          setState((prevState) => ({
            ...prevState,
            label: '',
            startAdornment: false,
            endAdornment: false,
          }));
        }
      }}
    />
  );
}

export default TextFieldSection;
