import { rem } from './spacing'

const familyWeightMap = {
  condensed: 700,
  regular: 400,
  bold: 700,
  /**
   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
   * @alias semi
   */
  medium: 500,
  semi: 500,
  // lowest
  light: 300,
}

/**
 * @param size 300,400,500,700 & no type = font-weight, other number & no type = font-size
 * @param type condensed, regular, bold, medium, semi, light
 * @description font-weight, font-size, and font:
 */
export function font(size: number, type?: keyof typeof familyWeightMap) {
  if (type === undefined) {
    if (Object.values(familyWeightMap).includes(size)) {
      return `font-weight: ${rem(size)};`
    } else {
      return `font-size: ${rem(size)};`
    }
  }
  return `font: ${familyWeightMap[type]} ${rem(size)}  Roboto, Arial, Helvetica, sans-serif;`
}

export function fontValue(size: number, type: keyof typeof familyWeightMap) {
  return `${familyWeightMap[type]} ${rem(size)} Roboto, Arial, Helvetica, sans-serif;`
}

export const styledHelpers = {
  font,
  fontValue,
}