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

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

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

function DurationFieldSection() {
  const [value, setValue] = React.useState(0);

  return (
    <Playground
      title="DurationField"
      initialState={[
        {
          type: 'checkbox',
          stateId: 'hh',
          selected: true,
        },
        {
          type: 'checkbox',
          stateId: 'ms',
          selected: true,
        },
        {
          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: 'Duration Label',
        },
        {
          type: 'checkbox',
          stateId: 'withHelperText',
          selected: true,
        },
        {
          type: 'input-text',
          stateId: 'helperText',
          selected: 'Duration field helper text',
        },
        {
          type: 'checkbox',
          stateId: 'required',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'error',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'startAdornment',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'endAdornment',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'disabled',
          selected: false,
        },
      ]}
      renderCallback={(state) => {
        const props = omitUndefinedProps({
          ...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: (parsedValue) => setValue(parsedValue),
        });

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

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

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

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

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

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

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

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

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

        return {
          component: <DurationField {...props} InputProps={InputProps} />,
          code: `${importsList}\n<DurationField${propsString}/>`,
        };
      }}
      onChange={(nextState, id, value$, setState) => {
        if (id === 'hh' || id === 'ms') {
          setValue(0);
        } 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 DurationFieldSection;
