import React from 'react';
import { MonetizationOn } from '@mui/icons-material';

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

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

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

  return (
    <Playground
      title="NumberField"
      initialState={[
        {
          type: 'input-text',
          stateId: 'min',
          selected: 1,
        },
        {
          type: 'input-text',
          stateId: 'step',
          selected: 1,
        },
        {
          type: 'input-text',
          stateId: 'max',
          selected: 9999,
        },
        {
          type: 'select',
          stateId: 'maxDecimals',
          options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
          selected: 10,
        },
        {
          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: 'endAdornment',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'required',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'error',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'startAdornment',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'disabled',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'allowFloat',
          selected: true,
        },
      ]}
      renderCallback={(state) => {
        let min = parseFloat(state.min);
        let max = parseFloat(state.max);

        if (Number.isNaN(min)) {
          min = undefined;
        }

        if (Number.isNaN(max)) {
          max = undefined;
        }

        let step = parseFloat(state.step);

        if (!step || step <= 0) {
          step = 1;
        }

        const props = omitUndefinedProps({
          ...state,
          value,
          placeholder: 'Placeholder',
          margin: state.margin === 'auto' ? undefined : state.margin,
          withLabel: undefined,
          withHelperText: undefined,
          startAdornment: undefined,
          endAdornment: undefined,
          maxDecimals: parseInt(state.maxDecimals, 10) || undefined,
          min,
          max,
          step,
          label: state.withLabel ? state.label : undefined,
          helperText: state.withHelperText ? state.helperText : undefined,
          onChange: (event) => setValue(event.target.value),
        });

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

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

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

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

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

          if (state.endAdornment) {
            InputProps.endAdornment = (
              <InputAdornment position="end">
                <MonetizationOn />
              </InputAdornment>
            );

            InputStringProps.push(
              `endAdornment: (
    <InputAdornment position="end">
        <MonetizationOn />
    </InputAdornment>
)`,
            );
          }
        }

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

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

        return {
          component: <NumberField {...props} InputProps={InputProps} />,
          code: `${importsList}\n<NumberField${propsString}/>`,
        };
      }}
      onChange={(nextState, id, value$, setState) => {
        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 NumberFieldSection;
