import React, { useState } from 'react';
import { FormatAlignCenter, FormatAlignJustify, FormatAlignLeft, FormatAlignRight } from '@mui/icons-material';

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

import Playground from '../Playground/Playground';
import { Stack, ToggleButton, ToggleButtonGroup } from '@/mui/components';

const icons = [
  {
    id: 'left',
    Icon: FormatAlignLeft,
    iconName: 'FormatAlignLeft',
    text: 'Align left',
    disabled: false,
  },
  {
    id: 'center',
    Icon: FormatAlignCenter,
    iconName: 'FormatAlignCenter',
    text: 'Align center',
    disabled: false,
  },
  {
    id: 'right',
    Icon: FormatAlignRight,
    iconName: 'FormatAlignRight',
    text: 'Align right',
    disabled: false,
  },
  {
    id: 'justify',
    Icon: FormatAlignJustify,
    iconName: 'FormatAlignJustify',
    text: 'Aligning justify',
    disabled: true,
  },
];

const defaultValue = icons[0].id;

function ToggleButtonSection() {
  const [alignment, setAlignment] = useState(defaultValue);

  return (
    <Playground
      title="ToggleButton"
      initialState={[
        {
          type: 'checkbox',
          stateId: 'exclusive',
          selected: true,
        },
        {
          type: 'checkbox',
          stateId: 'fullWidth',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'equalWidth',
          selected: false,
        },
        {
          type: 'select',
          stateId: 'color',
          options: colorList,
          selected: 'primary',
        },
        {
          type: 'select',
          stateId: 'size',
          options: ['xSmall', 'small', 'medium', 'large'],
          selected: 'medium',
        },
        {
          type: 'select',
          stateId: 'buttonContent',
          options: ['icon', 'text', 'icon+text'],
          selected: 'icon+text',
        },
        {
          type: 'select',
          stateId: 'shape',
          options: shapes,
          selected: 'rounded',
        },
      ]}
      renderCallback={(state) => {
        const props = omitUndefinedProps({
          ...state,
          buttonContent: undefined,
          value: alignment,
          onChange: (event, newAlignment) => setAlignment(newAlignment),
        });

        const propsString = getPropsString({
          ...props,
          onChange: '!!!(event, newAlignment) => console.log(newAlignment)',
        });

        const importsList = getImportsString([
          [['ToggleButtonGroup', 'ToggleButton']],
          [icons.map(({ iconName }) => iconName), '@mui/icons-material'],
        ]);

        const addIcon = /icon/.test(state.buttonContent);
        const addText = /text/.test(state.buttonContent);

        const tabsList = icons
          .map((item) => {
            const icon = addIcon && `<${item.iconName} />`;
            const text = addText && item.text;
            const data =
              icon && text
                ? `<Stack spacing={1} direction="row" alignItems="center">
    ${icon}<div>${text}</div>
  </Stack>`
                : icon || text;

            return `    <ToggleButton value="${item.id}" disabled={${item.disabled}}>
      ${data}
    </ToggleButton>`;
          })
          .join('\n');

        return {
          component: (
            <ToggleButtonGroup key={getKeyByState(state)} {...props}>
              {icons.map((item) => {
                const { Icon } = item;

                let content = item.text;

                if (addIcon && addText) {
                  content = (
                    <Stack spacing={1} direction="row" alignItems="center">
                      <Stack spacing={1} direction="row" alignItems="center">
                        <Icon />
                        <div>{item.text}</div>
                      </Stack>
                    </Stack>
                  );
                } else if (addIcon) {
                  content = <Icon />;
                }

                return (
                  <ToggleButton key={item.id} value={item.id} disabled={item.disabled}>
                    {content}
                  </ToggleButton>
                );
              })}
            </ToggleButtonGroup>
          ),
          code: `${importsList}
<ToggleButtonGroup${propsString}>
${tabsList}
</ToggleButtonGroup>`,
        };
      }}
      onChange={(nextState, id, value) => {
        if (id === 'exclusive') {
          setAlignment(value ? defaultValue : icons.slice(0, 2).map((item) => item.id));
        }
      }}
    />
  );
}

export default ToggleButtonSection;
