/**
 * @requires https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints
 *
 * @see https://www.styled-components.com/docs/advanced#media-templates
 *
 * @todo make font take 1 arg (string = weight/name, number = size)
 */
import { VIEWPORT_BASE_WIDTH_ITEM, VIEWPORT_BASE_WIDTH_TABLET_ITEM } from './_themed'
// the width your designs are based off of
const VIEWPORT_BASE_WIDTH = VIEWPORT_BASE_WIDTH_ITEM
const ROOT_FONT_SIZE = 16

// Approximation of bootstrap scss responsive breakpoint utility functions
//   converted to postcss
const BREAKPOINTS = Object.freeze({
  // better names
  phone: '0px',
  tablet: '768px',
  desktop: '1024px',

  supersize: '1200px',
  big: '1200',
  extrabig: '1400px',
})

const alternativeFonts = ',Arial,Helvetica,sans-serif'
const fontString = '"Roboto"'
const fontCondensedString = '"Roboto Condensed"'
const familys = {
  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,
}

const BREAKPOINT_NAMES = Object.keys(BREAKPOINTS)

// --- values ---
function breakpointNext(name) {
  const index = BREAKPOINT_NAMES.indexOf(name)
  if (index < 0 || index + 1 >= BREAKPOINT_NAMES.length) {
    return null
  }
  return BREAKPOINT_NAMES[index + 1]
}
function breakpointMin(name) {
  const min = BREAKPOINTS[name]
  if (min === '0px') {
    return null
  }
  return min
}
// ---

function breakpointMax(name) {
  const next = breakpointNext(name)
  const max = BREAKPOINTS[next]
  const arr = max.split(/(px|vw|rem|em|vh)/)
  return Number(arr[0]) - 1 + arr[1]
}

function breakpointUp(size) {
  const min = breakpointMin(size)
  if (min) {
    return `@media (min-width: ${min})`
    // rule.first.append(mixin.nodes)
    // mixin.replaceWith(rule)
  } else {
    // @NOTE 0 returns null
    return `@media (min-width: 0px)`
    // throw new ReferenceError(`${min} was not found in breakpoints`)
  }
}

function breakpointDown(size) {
  const max = breakpointMax(size)
  if (max) {
    return `@media (max-width: ${max})`
  } else {
    throw new ReferenceError(`${max} was not found in breakpoints`)
  }
}

// @TODO @DEUS Possibly removing this
// function breakpointBetween(mixin, lower, upper) {
//   const min = breakpointMin(lower)
//   const max = breakpointMax(upper)

//   return (
//     `@media (min-width: ${BREAKPOINTS[min]}) and max-width: ${BREAKPOINTS[
//       max
//     ]}`
//   )
// }

function phoneOrSmaller() {
  const retVal = breakpointDown('phone')
  return retVal
}
function tabletOrSmaller() {
  return breakpointDown('tablet')
}
function desktopOrSmaller() {
  return breakpointDown('desktop')
}
function phoneOrLarger() {
  return breakpointUp('phone')
}
function tabletOrLarger() {
  return breakpointUp('tablet')
}
function desktopOrLarger() {
  return breakpointUp('desktop')
}
function supersizeOrLarger() {
  return breakpointUp('supersize')
}

function extralargeOrLarger() {
  return breakpointUp('extralarge')
}
function extralargeOrSmaller() {
  return breakpointDown('extralarge')
}

// convert px to vw
function vw(match, px) {
  return `${px / VIEWPORT_BASE_WIDTH}vw`
  // console.log('css log', { match, numberStr })
  // return 'fix me deus'
}
// convert px to rem
function rem(match, px) {
  return `${px / ROOT_FONT_SIZE}rem`
  // console.log('css log', { match, numberStr })
  // return 'fix me deus'
}
function qa(match, attributeName) {
  return `content: "${attributeName}";`
}


/**
 * @param {number | undefined} [match=undefined]
 * @param {number} size
 * @param {bold | italic | semi | normal | string} type
 * @return {string}
 *
 * @example font(undefined, 10, 'semi') => rem(10) Roboto-Semi,Ariel,Helvetica;
 */
function font(match, size, type) {
  // if match is undefined we probably are the variable version
  // @TODO @DEUS replace all with @font(size, type)
  let finalFont = match ? 'font: ' : ''
  let finalFontString = fontString

  if (type) {
    if (type === 'condensed') {
      finalFontString = fontCondensedString
    }
    finalFont += (familys[type] || '') + ' '
  }
  if (size) {
    finalFont += rem(undefined, size) + ' '
  }

  finalFont += finalFontString

  finalFont = finalFont + alternativeFonts

  // console.log('My final font is', finalFont)
  return finalFont
}
function container() {
  return `
  max-width: ${rem(null, VIEWPORT_BASE_WIDTH)};
  margin: 0 auto;
  `
}
function row() {
  return ''
}

// @TODO @JAMES not sure how the element would come in...
function dynamicHeight(element = { height: 300 }) {
  return rem(undefined, element.height)
}

export {
  VIEWPORT_BASE_WIDTH_TABLET_ITEM as VIEWPORT_BASE_WIDTH_TABLET,
  VIEWPORT_BASE_WIDTH,
  qa,
  extralargeOrLarger,
  extralargeOrSmaller,
  desktopOrLarger,
  tabletOrLarger,
  phoneOrLarger,
  desktopOrSmaller,
  tabletOrSmaller,
  phoneOrSmaller,
  supersizeOrLarger,
  vw,
  rem,
  container,
  row,
  dynamicHeight,
  font,
}