import React from 'react';

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

import Playground from '../Playground/Playground';
import { Box, Slider } from '@/mui/components';

const customMarksOptions = [
  {
    value: 0,
    label: '0°C',
  },
  {
    value: 20,
    label: '20°C',
  },
  {
    value: 50,
    label: '50°C',
  },
  {
    value: 100,
    label: '100°C',
  },
];

function SliderSection() {
  return (
    <Playground
      title="Slider"
      initialState={[
        {
          type: 'select',
          stateId: 'color',
          options: colorList,
          selected: 'neutral',
        },
        {
          type: 'select',
          stateId: 'shape',
          options: shapes,
          selected: 'circular',
        },
        {
          type: 'input-number',
          stateId: 'defaultValue',
          selected: 30,
        },
        {
          type: 'checkbox',
          stateId: 'disabled',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'readOnly',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'marks',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'customMarks',
          selected: false,
          dependOn: 'marks',
        },
        {
          type: 'input-number',
          stateId: 'min',
          selected: 0,
        },
        {
          type: 'input-number',
          stateId: 'max',
          selected: 100,
        },
        {
          type: 'select',
          stateId: 'orientation',
          options: ['horizontal', 'vertical'],
          selected: 'horizontal',
        },
        {
          type: 'checkbox',
          stateId: 'scale',
          selected: false,
        },
        {
          type: 'select',
          stateId: 'size',
          options: ['xSmall', 'small', 'medium', 'large'],
          selected: 'medium',
        },
        {
          type: 'input-number',
          stateId: 'step',
          selected: 10,
        },
        {
          type: 'select',
          stateId: 'valueLabelDisplay',
          options: ['auto', 'off', 'on'],
          selected: 'auto',
        },
        {
          type: 'checkbox',
          stateId: 'customRange',
          selected: false,
        },
        {
          type: 'select',
          stateId: 'track',
          options: ['inverted', 'normal'],
          selected: 'normal',
        },
        {
          type: 'checkbox',
          stateId: 'disableSwap',
          selected: false,
          dependOn: 'customRange',
        },
      ]}
      renderCallback={(state) => {
        const props = {
          ...state,
          customMarks: undefined,
          customRange: undefined,
          disableSwap: state.customRange ? state.disableSwap : undefined,
          marks: state.marks && state.customMarks ? customMarksOptions : state.marks,
          scale: (value) => (state.scale ? value * value : value),
          valueLabelFormat: (value) => value,
        };

        const propsString = getPropsString({
          ...props,
          scale: `!!!(value) => ${state.scale ? 'value * value' : 'value'}`,
          valueLabelFormat: '!!!(value) => value',
        });

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

        return {
          component: (
            <Box
              sx={state.orientation === 'horizontal' ? { width: '100%', maxWidth: '600px' } : { height: '200px' }}
              key={getKeyByState(state)}
            >
              <Slider {...props} />
            </Box>
          ),
          code: `${importsList}
<Slider${propsString}/>`,
        };
      }}
      onChange={(nextState, id, value, setState) => {
        if (id === 'customRange' && value) {
          setState({
            ...nextState,
            min: 0,
            max: 100,
            step: 10,
            defaultValue: [20, 60],
            scale: false,
          });
        } else if (id === 'scale' && value) {
          setState({
            ...nextState,
            min: 0,
            max: 30,
            step: 1,
            defaultValue: 3,
            customRange: false,
          });
        } else if ((id === 'customRange' && !value) || (id === 'scale' && !value)) {
          setState({
            ...nextState,
            min: 0,
            max: 100,
            step: 10,
            defaultValue: 30,
          });
        }
      }}
    />
  );
}

export default SliderSection;
