"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.qa = qa;
exports.extralargeOrLarger = extralargeOrLarger;
exports.extralargeOrSmaller = extralargeOrSmaller;
exports.desktopOrLarger = desktopOrLarger;
exports.tabletOrLarger = tabletOrLarger;
exports.phoneOrLarger = phoneOrLarger;
exports.desktopOrSmaller = desktopOrSmaller;
exports.tabletOrSmaller = tabletOrSmaller;
exports.phoneOrSmaller = phoneOrSmaller;
exports.supersizeOrLarger = supersizeOrLarger;
exports.vw = vw;
exports.rem = rem;
exports.container = container;
exports.row = row;
exports.dynamicHeight = dynamicHeight;
exports.font = font;
exports.VIEWPORT_BASE_WIDTH = exports.VIEWPORT_BASE_WIDTH_TABLET = exports.VIEWPORT_BASE_WIDTH_TABLET_ITEM = void 0;

/**
 * @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)
 */
const VIEWPORT_BASE_WIDTH_ITEM = 1200;
const VIEWPORT_BASE_WIDTH_TABLET_ITEM = 1024; // the width your designs are based off of

exports.VIEWPORT_BASE_WIDTH_TABLET = exports.VIEWPORT_BASE_WIDTH_TABLET_ITEM = VIEWPORT_BASE_WIDTH_TABLET_ITEM;
const VIEWPORT_BASE_WIDTH = VIEWPORT_BASE_WIDTH_ITEM;
exports.VIEWPORT_BASE_WIDTH = VIEWPORT_BASE_WIDTH;
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`);
  }
}

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');
}

function vw(match, px) {
  return `${px / VIEWPORT_BASE_WIDTH}vw`;
}

function rem(match, px) {
  return `${px / ROOT_FONT_SIZE}rem`;
}

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);
}