import React from 'react';
import { BoxProps, BoxSpace, SilkeBox } from '../silke-box';
import { SilkeIcon, SilkeIcons } from '../silke-icon';
import { SilkeText } from '../silke-text';
import styles from './silke-tag.scss';

export type SilkeTagKind = 'primary' | 'secondary';

export type SilkeTagColor = 'yellow' | 'green' | 'red' | 'gray' | 'blue' | 'purple' | 'dark' | 'ai';

export type SilkeTagSize = 'tiny';

export type SilkeTagProps = {
  disabled?: boolean;
  label?: React.ReactNode;
  kind?: SilkeTagKind;
  size?: SilkeTagSize;
  icon?: SilkeIcons;
  innerGap?: BoxSpace;
  color?: SilkeTagColor;
  link?: string;
  /**
   * Will add a remove button to tag
   */
  onRemove?: (e: React.MouseEvent) => void;
} & Omit<BoxProps, 'size' | 'color'>;

function SilkeTagComp(
  {
    className,
    disabled,
    kind = 'primary',
    label,
    onRemove,
    size,
    icon,
    innerGap = 'xs',
    color = 'gray',
    link,
    ...rest
  }: SilkeTagProps,
  ref: any,
) {
  const cl = [
    styles.tag,
    styles[kind || 'primary'],
    disabled ? styles.disabled : styles[color || 'gray'],
  ];
  if (className) cl.push(className);
  if (size) cl.push(styles[size]);
  if (rest?.onClick) cl.push(styles.selectable);
  if (link) cl.push(styles.link);

  const iconOnly = !!icon && !label;

  const showRemoveAsIcon = !!icon && kind === 'secondary' && onRemove;
  if (showRemoveAsIcon) cl.push(styles.showRemoveAsIcon);

  const removeButton = !disabled && onRemove && (
    <SilkeBox className={styles.removeButton} tag="button" align="center" onMouseDown={onRemove}>
      <SilkeIcon icon="close" />
    </SilkeBox>
  );

  return (
    <SilkeBox
      {...(rest as any)}
      tag={link ? 'link' : 'div'}
      to={link}
      aspectRatio={iconOnly ? '1:1' : undefined}
      className={cl.join(' ')}
      hPad={iconOnly ? 'xxs' : 'xs'}
      vAlign="center"
      ref={ref}
    >
      <SilkeText overflow flex className={styles.label}>
        <SilkeBox gap={innerGap} align="center">
          {showRemoveAsIcon && removeButton}
          {icon && (
            <SilkeBox className={styles.tagIcon} align="center">
              <SilkeIcon icon={icon} />
            </SilkeBox>
          )}
          {label && <span>{label}</span>}
        </SilkeBox>
      </SilkeText>
      {!showRemoveAsIcon && removeButton}
    </SilkeBox>
  );
}

export const SilkeTag = React.forwardRef(SilkeTagComp);
SilkeBox.displayName = 'SilkeTag';

export const SilkeTagDark = ({ color, ...rest }: SilkeTagProps) => {
  return <SilkeTag {...rest} color="dark" />;
};

export const SilkeTagYellow = ({ color, ...rest }: SilkeTagProps) => {
  return <SilkeTag {...rest} color="yellow" />;
};

export const SilkeTagGreen = ({ color, ...rest }: SilkeTagProps) => {
  return <SilkeTag {...rest} color="green" />;
};

export const SilkeTagRed = ({ color, ...rest }: SilkeTagProps) => {
  return <SilkeTag {...rest} color="red" />;
};

export const SilkeTagGray = ({ color, ...rest }: SilkeTagProps) => {
  return <SilkeTag {...rest} color="gray" />;
};

export const SilkeTagBlue = ({ color, ...rest }: SilkeTagProps) => {
  return <SilkeTag {...rest} color="blue" />;
};