import styled, { css } from 'styled-components'
import type { CSSProp } from 'styled-components'
import isRebrand from './is-rebrand'
import type { Theme } from './theme'

const neutralStyles = css`
  background: ${({ theme }) => theme.neutral200};
`

const positiveStyles = css`
  background: ${({ theme }) => theme.seaturtleGreen100};
`

const informationStyles = css`
  background: ${({ theme }) => theme.lightBlue200};
`

const improvementStyles = css`
  background: ${({ theme }) => theme.flounderYellow100};
`

const negativeStyles = css`
  background: ${({ theme }) => theme.sebastianRed100};
`

const variantStylesMap = {
  neutral: neutralStyles,
  positive: positiveStyles,
  information: informationStyles,
  improvement: improvementStyles,
  negative: negativeStyles,
} as const

const rebrandNeutralStyles = css`
  background: ${({ theme }) => theme.navNeutral100};
`

const rebrandPositiveStyles = css`
  background: ${({ theme }) => theme.navStatusPositive200};
`

const rebrandInformationStyles = css`
  background: ${({ theme }) => theme.navStatusPositive200};
`

const rebrandImprovementStyles = css`
  background: ${({ theme }) => theme.navSecondary300};
`

const rebrandNegativeStyles = css`
  background: ${({ theme }) => theme.navStatusNegative200};
`

const rebrandVariantStylesMap = {
  neutral: rebrandNeutralStyles,
  positive: rebrandPositiveStyles,
  information: rebrandInformationStyles,
  improvement: rebrandImprovementStyles,
  negative: rebrandNegativeStyles,
} as const

// ensure consistent map typing
variantStylesMap as Record<string, CSSProp>
rebrandVariantStylesMap as Record<string, CSSProp>

type Variant = keyof typeof variantStylesMap

const variantStyles = ({ variant, theme }: { variant?: Variant; theme: Theme }) => {
  if (!variant) {
    return ''
  }

  return isRebrand(theme) ? rebrandVariantStylesMap[variant] : variantStylesMap[variant]
}

export const Pill = styled.span<{ variant?: Variant }>`
  font-family: ${({ theme }) => theme.fontPrimary};
  color: ${({ theme }) => theme.scuttleGray600};
  font-size: 0.75em;
  font-weight: bold;
  padding: 0.7em 1em;
  text-align: center;
  border-radius: 50vh;
  ${variantStyles}
`

export default Pill