import styled, { css } from 'styled-components';

const BadgeWrapper = styled.span`
  position: relative;
  display: inline-flex;
  margin: 0;
  padding: 0;
`;

const StyledBadge = styled.span<{
  themeIntent: 'basic' | 'success' | 'primary' | 'warning' | 'danger' | 'error';
  themePadding: 'narrowContent' | 'wideContent';
}>`
  display: inline-block;
  text-align: center;
  box-sizing: border-box;
  min-width: ${({ theme }) => theme.sizes.badge.minWidth};
  height: ${({ theme }) => theme.sizes.badge.height};
  border: ${({ theme }) => theme.borderWidths.badge.default} solid;
  border-radius: ${({ theme }) => theme.radii.badge.default};
  font-size: ${({ theme }) => theme.fontSizes.badge.default};
  line-height: 1;
  font-weight: ${({ theme }) => theme.fontWeights.badge.default};
  margin: 0;

  ${({ themeIntent, theme }) => {
    switch (themeIntent) {
      case 'basic':
        return css`
          background-color: ${theme.colors.badge.basicBackground};
          border-color: ${theme.colors.badge.border};
          color: ${theme.colors.badge.basicText};
        `;
      case 'success':
        return css`
          background-color: ${theme.colors.badge.success};
          border-color: ${theme.colors.badge.success};
          color: ${theme.colors.badge.text};
        `;
      case 'primary':
        return css`
          background-color: ${theme.colors.badge.primary};
          border-color: ${theme.colors.badge.primary};
          color: ${theme.colors.badge.text};
        `;
      case 'warning':
        return css`
          background-color: ${theme.colors.badge.warning};
          border-color: ${theme.colors.badge.warning};
          color: ${theme.colors.badge.text};
        `;
      case 'danger':
        return css`
          background-color: ${theme.colors.badge.danger};
          border-color: ${theme.colors.badge.danger};
          color: ${theme.colors.badge.text};
        `;
      case 'error':
        return css`
          background-color: ${theme.colors.badge.error};
          border-color: ${theme.colors.badge.error};
          color: ${theme.colors.badge.text};
        `;
    }
  }};

  ${({ themePadding, theme }) => {
    switch (themePadding) {
      case 'narrowContent':
        return css`
          padding: ${theme.space.badge.narrowPadding};
        `;
      case 'wideContent':
        return css`
          padding: ${theme.space.badge.widePadding};
        `;
    }
  }};
`;

const StatusBadge = styled.span<{
  themeIntent: 'basic' | 'success' | 'primary' | 'warning' | 'danger' | 'error';
}>`
  position: absolute;
  transform: translate(45%, -30%);
  right: ${({ theme }) => theme.space.badge.right};
  border-radius: ${({ theme }) => theme.radii.badge.status};
  box-shadow: ${({ theme }) => theme.shadows.badge.default};
  padding: ${({ theme }) => theme.space.badge.narrowPadding};
  margin: 0;

  ${({ themeIntent, theme }) => {
    switch (themeIntent) {
      case 'basic':
        return css`
          background-color: ${theme.colors.badge.basicStatusText};
        `;
      case 'success':
        return css`
          background-color: ${theme.colors.badge.success};
        `;
      case 'primary':
        return css`
          background-color: ${theme.colors.badge.primary};
        `;
      case 'warning':
        return css`
          background-color: ${theme.colors.badge.warning};
        `;
      case 'danger':
        return css`
          background-color: ${theme.colors.badge.danger};
        `;
      case 'error':
        return css`
          background-color: ${theme.colors.badge.error};
        `;
    }
  }};
`;

const CountNumberBadge = styled.span<{
  themeIntent: 'success' | 'primary' | 'warning' | 'danger' | 'error';
  themePadding: 'narrowContent' | 'wideContent';
}>`
  position: absolute;
  box-sizing: border-box;
  transform: translate(50%, -25%);
  text-align: center;
  right: ${({ theme }) => theme.space.badge.right};
  height: ${({ theme }) => theme.sizes.badge.height};
  min-width: ${({ theme }) => theme.sizes.badge.minWidth};
  border: ${({ theme }) => theme.borderWidths.badge.default} solid;
  border-radius: ${({ theme }) => theme.radii.badge.default};
  font-size: ${({ theme }) => theme.fontSizes.badge.default};
  font-weight: ${({ theme }) => theme.fontWeights.badge.default};
  line-height: 1;
  color: ${({ theme }) => theme.colors.badge.text};
  box-shadow: ${({ theme }) => theme.shadows.badge.default};
  margin: 0;
  padding: 0;

  ${({ themeIntent, theme }) => {
    switch (themeIntent) {
      case 'success':
        return css`
          background-color: ${theme.colors.badge.success};
          border-color: ${theme.colors.badge.success};
        `;
      case 'primary':
        return css`
          background-color: ${theme.colors.badge.primary};
          border-color: ${theme.colors.badge.primary};
        `;
      case 'warning':
        return css`
          background-color: ${theme.colors.badge.warning};
          border-color: ${theme.colors.badge.warning};
        `;
      case 'danger':
        return css`
          background-color: ${theme.colors.badge.danger};
          border-color: ${theme.colors.badge.danger};
        `;
      case 'error':
        return css`
          background-color: ${theme.colors.badge.error};
          border-color: ${theme.colors.badge.error};
        `;
    }
  }};

  ${({ themePadding, theme }) => {
    switch (themePadding) {
      case 'narrowContent':
        return css`
          padding: ${theme.space.badge.narrowPadding};
        `;
      case 'wideContent':
        return css`
          padding: ${theme.space.badge.widePadding};
        `;
    }
  }};
`;

const CountIconBadge = styled.span`
  display: inline-flex;
  position: absolute;
  transform: translate(50%, -25%);
  right: ${({ theme }) => theme.space.badge.right};
  margin: 0;
  padding: 0;
  font-size: ${({ theme }) => theme.fontSizes.badge.default};
  line-height: 1;
`;

export {
  BadgeWrapper,
  StyledBadge,
  StatusBadge,
  CountNumberBadge,
  CountIconBadge,
};