import titleCase from 'title-case'
import primerColors from 'primer-colors'

import colorSystemSCSS from '!!raw-loader?module!../src/support/variables/color-system.scss'
import colorVariablesSCSS from '!!raw-loader?module!../src/support/variables/colors.scss'

const variables = {}

parseSCSSVariables(colorSystemSCSS, variables)
parseSCSSVariables(colorVariablesSCSS, variables)

// XXX we don't necessarily define them in this order in primer-colors,
// so we define an array here just to be safe
const gradientHues = ['gray', 'blue', 'green', 'purple', 'yellow', 'orange', 'red', 'pink']

const colors = {
  ...primerColors,
  pink: Object.keys(variables)
    .filter(key => key.startsWith('pink-'))
    .sort()
    .map(key => variables[key])
}

const aliases = {}

const palettes = gradientHues.map(name => {
  const bgClass = `bg-${name}`
  const textClass = `text-${name}`
  return {
    name,
    title: titleCase(name),
    value: colors[name][5],
    bg: variables[bgClass] ? {className: bgClass, value: variables[bgClass]} : null,
    fg: variables[textClass] ? {className: textClass, value: variables[textClass]} : null,
    values: colors[name].map((value, index) => ({
      value,
      index,
      variable: `${name}-${index}00`,
      slug: `${name}-${index}`,
      aliases: (aliases[value] = {})
    }))
  }
})

for (const key of Object.keys(variables)) {
  const match = key.match(/^(bg|text|border)-(\w+)(-(dark|light))?$/)
  const value = variables[key]
  if (match && aliases[value]) {
    // eslint-disable-next-line no-unused-vars
    const [_, type, name, suffix] = match
    aliases[value][type] = key
  }
}

export {colors, gradientHues, palettes, getPaletteByName, variables}

function getPaletteByName(name) {
  return palettes.find(palette => palette.name === name)
}

function parseSCSSVariables(scssString, variables = {}) {
  const variablePattern = /\$([-\w]+):\s*(.+)( !default);/g
  let match
  do {
    match = variablePattern.exec(scssString)
    if (match) {
      // eslint-disable-next-line no-unused-vars
      const [_, name, value] = match
      variables[name] = value.startsWith('$') ? variables[value.substr(1)] : value
    }
  } while (match)
  return variables
}

@@ -813,323 +813,100 @@
 %7B%0A  
-const bgClass = %60bg-$%7Bname%7D%60%0A  const textClass = %60text-$%7Bname%7D%60%0A  return %7B%0A    name,%0A    title: titleCase(name),%0A    value: colors%5Bname%5D%5B5%5D,%0A    bg: variables%5BbgClass%5D ? %7BclassName: bgClass, value: variables%5BbgClass%5D%7D : null,%0A    fg: variables%5BtextClass%5D ? %7BclassName: textClass, value: variables%5BtextClass%5D%7D : null
+return %7B%0A    name,%0A    title: titleCase(name),%0A    value: variables%5Bname%5D %7C%7C colors%5Bname%5D%5B5%5D
 ,%0A  
@@ -1477,16 +1477,261 @@
 ables%7D%0A%0A
+export const borders = Object.keys(variables)%0A  .filter(key =%3E key.startsWith('border-') && !variables%5Bkey%5D.includes('$'))%0A  .sort()%0A  .map(key =%3E (%7B%0A    variable: key,%0A    value: variables%5Bkey%5D,%0A    slug: key,%0A    aliases: %7Bborder: key%7D%0A  %7D))%0A%0A
 function

add borders export in docs/color-variables