import React, { FunctionComponent } from "react";
import { keysTheme, theme } from "data/dataMx";
import { AtomIcon } from "native/atoms/Icon";
import { AtomOverline } from "native/atoms/Typography/Overline";
import { TagContainer, IconContainer } from "./styles";

type TagSize = "small" | "medium" | "large";

export interface ITagProps {
  backgroundColor?: keysTheme;
  text: string;
  width?: string;
  iconLeft?: string;
  iconRight?: string;
  textColor?: keysTheme;
  size?: TagSize;
  displayIconLeft?: boolean;
  displayIconRight?: boolean;
}

const tagTypes = {
  large: {
    height: "40px",
  },
  medium: {
    height: "36px",
  },
  small: {
    height: "8px",
  },
};

const iconTypes = {
  large: {
    size: 24,
  },
  medium: {
    size: 18,
  },
  small: {
    size: 14,
  },
};

const sizeType = (type: TagSize) => {
  switch (type) {
    case "small":
      return "xsmall";
    case "medium":
      return "small";
    case "large":
      return "medium";
  }
};

export const AtomTag: FunctionComponent<ITagProps> = ({
  text,
  width,
  iconLeft,
  iconRight,
  textColor,
  backgroundColor,
  size = "small",
  displayIconLeft = false,
  displayIconRight = false,
}) => {
  return (
    <TagContainer
      backgroundColor={backgroundColor && theme[backgroundColor]}
      width={width}
      height={tagTypes[size].height}
      testID={"tag-container"}
    >
      <IconContainer>
        {iconLeft && displayIconLeft && (
          <AtomIcon
            name={iconLeft}
            size={iconTypes[size].size}
            color={textColor}
          />
        )}
      </IconContainer>
      <AtomOverline
        size={sizeType(size)}
        weight={"bold"}
        text={text}
        color={textColor}
      />
      <IconContainer>
        {iconRight && displayIconRight && (
          <AtomIcon
            name={iconRight}
            size={iconTypes[size].size}
            color={textColor}
          />
        )}
      </IconContainer>
    </TagContainer>
  );
};
