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

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

import Playground from '../Playground/Playground';
import { Box, Chip, UserAvatar } from '@/mui/components';
import {
  CustomBrandSafetyCircular,
  CustomBrandsCircular,
  CustomCcCircular,
  CustomIABCircular,
  CustomKeywordsCircular,
  CustomPeopleCircular,
  CustomTextCircular,
} from '@/mui/components/CustomIcon';

const mockFn = () => null;

const dataCollection = {
  TEXT: {
    Icon: CustomTextCircular,
    iconName: 'CustomTextCircular',
    color: '-tagText',
  },
  BRAND_SAFETY: {
    Icon: CustomBrandSafetyCircular,
    iconName: 'CustomBrandSafetyCircular',
    color: '-tagBrandSafety',
  },
  BRANDS: {
    Icon: CustomBrandsCircular,
    iconName: 'CustomBrandsCircular',
    color: '-tagBrands',
  },
  IAB: {
    Icon: CustomIABCircular,
    iconName: 'CustomIABCircular',
    color: '-tagIAB',
  },
  PEOPLE: {
    Icon: CustomPeopleCircular,
    iconName: 'CustomPeopleCircular',
    color: '-tagPeople',
  },
  KEYWORDS: {
    Icon: CustomKeywordsCircular,
    iconName: 'CustomKeywordsCircular',
    color: '-tagKeywords',
  },
  CC: {
    Icon: CustomCcCircular,
    iconName: 'CustomCcCircular',
    color: '-tagCC',
  },
};

function ChipSection() {
  return (
    <>
      <Playground
        title="Chip"
        initialState={[
          {
            type: 'select',
            stateId: 'variant',
            options: ['text', 'filled', 'outlined'],
            selected: 'filled',
          },
          {
            type: 'select',
            stateId: 'color',
            options: colorList,
            selected: 'neutral',
          },
          {
            type: 'select',
            stateId: 'size',
            options: ['xSmall', 'small', 'medium', 'large'],
            selected: 'medium',
          },
          {
            type: 'select',
            stateId: 'shape',
            options: shapes,
            selected: 'circular',
          },
          {
            type: 'checkbox',
            stateId: 'onClick',
            selected: false,
          },
          {
            type: 'checkbox',
            stateId: 'overlapEdit',
            selected: false,
          },
          {
            type: 'select',
            stateId: 'icon',
            options: ['default', 'icon', 'letter-avatar', 'avatar'],
            selected: 'default',
          },
          {
            type: 'select',
            stateId: 'onDelete',
            options: ['none', 'default', 'custom'],
            selected: 'none',
          },
          {
            type: 'input-text',
            stateId: 'label',
            selected: 'Chip Component',
          },
          {
            type: 'checkbox',
            stateId: 'disabled',
            selected: false,
          },
        ]}
        renderCallback={(state) => {
          let avatar;
          let avatarString;

          if (state.icon === 'avatar' || state.icon === 'letter-avatar') {
            const avatarProps = {
              src: state.icon === 'avatar' ? imageAvatarUrl : undefined,
              id: 1,
              firstName: 'Tomas',
              lastName: 'Smith',
            };

            avatar = <UserAvatar {...avatarProps} />;
            avatarString = `!!!<UserAvatar${getPropsString(avatarProps)}/>`;
          }

          const props = omitUndefinedProps({
            ...state,
            overlapEdit: undefined,
            noEnoughSpace: undefined,
            deleteIcon: state.onDelete === 'custom' ? <AddCircle /> : undefined,
            onClick: state.onClick ? mockFn : undefined,
            onDelete: state.onDelete !== 'none' ? mockFn : undefined,
            icon: state.icon === 'icon' ? <AddCircle /> : undefined,
            onApply: state.overlapEdit ? mockFn : undefined,
            onCancel: state.overlapEdit ? mockFn : undefined,
            avatar,
          });

          const propsString = getPropsString({
            ...props,
            icon: state.icon === 'icon' ? '!!!<AddCircle />' : undefined,
            deleteIcon: state.onDelete === 'custom' ? '!!!<AddCircle />' : undefined,
            avatar: avatarString,
          });
          const importsList = getImportsString([
            [['Chip']],
            (state.onDelete === 'custom' || state.icon === 'icon') && [['AddCircle'], '@mui/icons-material'],
            avatar && [['UserAvatar']],
          ]);

          return {
            component: <Chip {...props} />,
            code: `${importsList}\n<Chip${propsString} />`,
          };
        }}
      />
      <Playground
        title="Chip system tag"
        initialState={[
          {
            type: 'select',
            stateId: 'variant',
            options: ['filled', 'outlined', 'text'],
            selected: 'filled',
          },
          {
            type: 'select',
            stateId: 'type',
            options: ['KEYWORDS', 'PEOPLE', 'BRANDS', 'IAB', 'BRAND_SAFETY', 'TEXT', 'CC'],
            selected: 'BRANDS',
          },
          {
            type: 'select',
            stateId: 'size',
            options: ['xSmall', 'small', 'medium', 'large'],
            selected: 'medium',
          },
          {
            type: 'select',
            stateId: 'shape',
            options: shapes,
            selected: 'circular',
          },
          {
            type: 'checkbox',
            stateId: 'withIcon',
            selected: false,
          },
          {
            type: 'checkbox',
            stateId: 'onClick',
            selected: false,
          },
          {
            type: 'checkbox',
            stateId: 'overlapEdit',
            selected: false,
          },
          {
            type: 'checkbox',
            stateId: 'selected',
            selected: false,
          },
          {
            type: 'checkbox',
            stateId: 'noEnoughSpace',
            selected: false,
          },
          {
            type: 'select',
            stateId: 'onDelete',
            options: ['none', 'default', 'custom'],
            selected: 'none',
          },
          {
            type: 'input-text',
            stateId: 'label',
            selected: 'Chip Component',
          },
          {
            type: 'checkbox',
            stateId: 'disabled',
            selected: false,
          },
        ]}
        renderCallback={(state) => {
          const { color, Icon, iconName } = dataCollection[state.type];

          const props = omitUndefinedProps({
            ...state,
            color,
            type: undefined,
            withIcon: undefined,
            overlapEdit: undefined,
            noEnoughSpace: undefined,
            icon: state.withIcon ? <Icon /> : undefined,
            deleteIcon: state.onDelete === 'custom' ? <AddCircle /> : undefined,
            onClick: state.onClick ? mockFn : undefined,
            onDelete: state.onDelete !== 'none' ? mockFn : undefined,
            onApply: state.overlapEdit ? mockFn : undefined,
            onCancel: state.overlapEdit ? mockFn : undefined,
          });

          const propsString = getPropsString({
            ...props,
            icon: state.withIcon ? `!!!<${iconName} />` : undefined,
            deleteIcon: state.onDelete === 'custom' ? '!!!<AddCircle />' : undefined,
          });
          const importsList = getImportsString([
            [['Chip']],
            [['useTheme'], '@mui/material/styles'],
            state.withIcon && [[iconName], '@/mui/components/CustomIcon'],
            (state.onDelete === 'custom' || state.icon === 'icon') && [['AddCircle'], '@mui/icons-material'],
          ]);

          return {
            component: (
              <Box sx={{ maxWidth: state.noEnoughSpace ? 300 : 800 }} key={getKeyByState(state)}>
                <Chip {...props} />
              </Box>
            ),
            code: `${importsList}
const theme = useTheme();

<Chip${propsString} />`,
          };
        }}
      />
    </>
  );
}

export default ChipSection;
