import React from 'react';
import { useTheme } from '@mui/material/styles';
import { Circle, CloseRounded } from '@mui/icons-material';

import { EXCLUDE_ITEM, INCLUDE_ITEM } from '@/modules/@common/TagSelector/constants';
import { SIZE_MEDIUM, SIZE_SMALL } from '@/mui/constants';

import { TagType } from '../../types';

import { Chip, Stack } from '@/mui/components';

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

const chipMapSize = {
  medium: 'small',
  small: 'xSmall',
  xSmall: 'xSmall',
};

type ChipSizeType = typeof SIZE_SMALL | typeof SIZE_MEDIUM;

type Props = {
  size: ChipSizeType;
  tags: TagType[];
  disabled: boolean;
  getTagLabel?: (tag: TagType) => void;
  onDelete: (event: React.SyntheticEvent, tag: TagType) => void;
};

function TagList({ size, tags, disabled, getTagLabel, onDelete }: Props) {
  const theme = useTheme();
  const chipSize = (chipMapSize[size] ?? chipMapSize.medium) as ChipSizeType;

  return (
    <Stack spacing={theme.spacing(1, 2)} fullWidth direction="row" flexWrap="wrap" className={styles.List}>
      {tags.map((tag) => {
        const { Icon, color } = tag.include ? INCLUDE_ITEM : EXCLUDE_ITEM;

        let icon = <Icon fontSize="small" color="inherit" htmlColor={color} />;

        if (tag.color) {
          icon = (
            <>
              {icon}
              <Circle className={styles.ColorIcon} htmlColor={tag.color} fontSize={chipSize} />
            </>
          );
        }

        return (
          <Chip
            key={`${tag.label}-${tag.value}-${tag.color}`}
            variant="text"
            size={chipSize}
            label={getTagLabel?.(tag) ?? tag.label}
            color="neutral"
            icon={icon}
            deleteIcon={<CloseRounded />}
            disabled={disabled}
            onDelete={(event: React.SyntheticEvent) => onDelete(event, tag)}
          />
        );
      })}
    </Stack>
  );
}

export default TagList;
