import styled, { css } from 'styled-components';
import { convertToTransientProps, getSpacing, getColorAlias, getFontSize } from '../../utils/index.js';

const FlexDiv = styled.div `
  display: flex;
  align-items: center;
  justify-content: center;
`;
const IconWrapper = styled(FlexDiv).withConfig({
    shouldForwardProp: convertToTransientProps(['isSubtle']),
}) `
  svg {
    height: ${getSpacing('s04')};
    width: ${getSpacing('s04')};
    margin-right: ${getSpacing('s01')};
    fill: ${getColorAlias('contentLight')};
  }
`;
const Tag = styled(FlexDiv).withConfig({
    shouldForwardProp: convertToTransientProps(['isSubtle']),
}) `
  border-radius: ${({ size, theme }) => size === 'large' ? theme.radius.roundedB : theme.radius.roundedA};
  width: fit-content;
  height: fit-content;
  padding: ${({ size, theme }) => size === 'large'
    ? ` 2px ${theme.spacing.s01}`
    : ` ${theme.spacing.s00} ${theme.spacing.s01}`};
  color: ${getColorAlias('contentLight')};
  text-align: center;
  font-family: ${(props) => props.theme.font.familyPrimary};
  font-weight: ${(props) => props.theme.font.weightRegular};
  letter-spacing: ${getSpacing('s00')};
  ${({ size }) => size === 'small'
    ? css `
          ${getFontSize('size12')};
        `
    : css `
          ${getFontSize('size14')};
        `}
`;
const TagSubtle = styled(Tag) `
  color: ${getColorAlias('contentDefault')};
  svg {
    fill: ${getColorAlias('contentDefault')};
  }
`;
const TagNeutral = styled(Tag)((props) => props.isSubtle
    ? css `
        background-color: ${getColorAlias('containerStrong')};
        color: ${getColorAlias('contentDefault')};
        svg {
          fill: ${getColorAlias('contentDefault')};
        }
      `
    : css `
        background-color: ${getColorAlias('containerInverse')};
        color: ${getColorAlias('contentInverse')};
        svg {
          fill: ${getColorAlias('contentInverse')};
        }
      `);
const TagPositive = styled(Tag) `
  background-color: ${({ isSubtle }) => isSubtle
    ? css `
          ${getColorAlias('supportPositive02')}
        `
    : css `
          ${getColorAlias('supportPositive')}
        `};
  ${({ theme, isSubtle }) => isSubtle &&
    theme.mode === 'light' &&
    css `
      color: ${getColorAlias('supportPositive')};
      svg {
        fill: ${getColorAlias('supportPositive')};
      }
    `};
`;
const TagError = styled(Tag) `
  background-color: ${({ isSubtle }) => isSubtle
    ? css `
          ${getColorAlias('supportError02')}
        `
    : css `
          ${getColorAlias('supportError')}
        `};
  ${({ theme, isSubtle }) => isSubtle &&
    theme.mode === 'light' &&
    css `
      color: ${getColorAlias('supportError')};
      svg {
        fill: ${getColorAlias('supportError')};
      }
    `};
`;
const TagInfo = styled(TagSubtle) `
  background-color: ${getColorAlias('supportInfo02')};
`;
const TagWarning = styled(TagSubtle) `
  background-color: ${getColorAlias('supportWarning02')};
`;
const TagBrand = styled(TagSubtle) `
  background-color: ${getColorAlias('supportBrand02')};
`;
const TagGhost = styled(TagSubtle) `
  background: none;
`;
const TagNeutralAlternative = styled(TagSubtle) `
  background-color: ${getColorAlias('containerDefault')};
`;
const TagOutline = styled(TagSubtle) `
  background: none;
  border: 1px solid ${getColorAlias('borderStrong')};
`;

export { FlexDiv, IconWrapper, Tag, TagBrand, TagError, TagGhost, TagInfo, TagNeutral, TagNeutralAlternative, TagOutline, TagPositive, TagSubtle, TagWarning };
