import React, { useState } from 'react';

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

import Playground from '../Playground/Playground';
import { ButtonColorPicker, Paper, Stack, StaticColorPicker, TextFieldColorPicker, Typography } from '@/mui/components';

import styles from './ColorPickerSection.module.scss';

const presetColors = [
  '#FF0000',
  '#00FF00',
  '#0000FF',
  '#FFFF00',
  '#FF00FF',
  '#00FFFF',
  '#800000',
  '#808000',
  '#008000',
  '#800080',
  '#008080',
  '#000080',
  '#FFA500',
  '#A52A2A',
  '#C0C0C0',
  '#000000',
];

function ColorPickerSection() {
  const [color, setColor] = useState('#ff0000');

  const onPickerChange = ({ rgb }) => {
    setColor(`rgba(${[rgb.r, rgb.g, rgb.b, rgb.a].join(',')})`);
  };

  return (
    <Playground
      title="ColorPicker"
      initialState={[
        {
          type: 'checkbox',
          stateId: 'presetColors',
          selected: true,
        },
        {
          type: 'checkbox',
          stateId: 'disabled',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'disableAlpha',
          selected: false,
        },
      ]}
      renderCallback={(state) => {
        const inputs = [
          {
            Component: TextFieldColorPicker,
            valueKey: 'value',
            onChangeKey: 'onPickerChange',
          },
          {
            Component: ButtonColorPicker,
            valueKey: 'color',
            onChangeKey: 'onPickerChange',
          },
          {
            Component: StaticColorPicker,
            valueKey: 'color',
            onChangeKey: 'onChange',
          },
        ];

        const props = {
          ...state,
          presetColors: state.presetColors ? presetColors : undefined,
        };

        const importsList = getImportsString([[inputs.map(({ Component }) => Component.displayName)]]);

        const code = inputs
          .map(({ Component, valueKey, onChangeKey }) => {
            const propsSting = getPropsString({
              ...props,
              [valueKey]: color,
              [onChangeKey]: '!!!({ rgb, hex }) => console.log(rgb, hex)',
            });

            return `<${Component.displayName}${propsSting}/>`;
          })
          .join('\n');

        return {
          component: (
            <Stack key={getKeyByState(state)} spacing={8}>
              {inputs.map(({ Component, valueKey, onChangeKey }) => {
                const props$ = {
                  ...props,
                  [valueKey]: color,
                  [onChangeKey]: onPickerChange,
                };

                return (
                  <Paper key={Component.displayName} elevation={1} className={styles.ComponentWrapper}>
                    <Stack spacing={2}>
                      <Typography variant="subtitle1">{Component.displayName}</Typography>
                      <div>
                        <Component {...props$} />
                      </div>
                    </Stack>
                  </Paper>
                );
              })}
            </Stack>
          ),
          code: `${importsList}\n${code}`,
        };
      }}
    />
  );
}

export default ColorPickerSection;
