import tailwind from 'tailwindcss'
import postcss, { Result } from 'postcss'
const getValue = (r: Result) => (selector: string): Promise<string> =>
  new Promise((resolve, reject) => {
    if (!r.root) {
      reject(Error('no result'))
    } else {
      r.root.walkRules(selector, rule => {
        resolve(`${rule.toString()}`)
      })
    }
  })

import { regressionPlugin } from '.'
// import defaultConfigStub from 'tailwindcss/stubs/defaultConfig.stub'
import defaultConfig from 'tailwindcss/defaultConfig'
const points = [
  [0.75, 0.65],
  [6, 4.75],
]
const toStr = (value: any, spaceLess: boolean = false) =>
  spaceLess
    ? JSON.stringify(
        typeof value === 'string' ? value.replace(/[\s]+/g, '') : value
      ).replace(/[\s]+/g, '')
    : JSON.stringify(value)

function assert(value: any, expect: any, spaceLess: boolean = true) {
  const strExpect = toStr(expect, spaceLess)
  const strValue = toStr(value, spaceLess)

  if (strExpect !== strValue) {
    throw new Error(
      `${typeof value}:${strValue} !== ${typeof expect}:${strExpect}`
    )
  }
}
postcss([
  tailwind({
    config: {
      ...defaultConfig,
      plugins: [regressionPlugin({})],
      theme: {
        regression: theme => ({
          'zero-line': {
            points,
            values: theme('fontSize'),
            prop: 'lineHeight',
            type: 'polynomial',
          },
          'expo-w': {
            points,
            type: 'exponential',
            values: theme('spacing'),
            prop: 'width',
          },
          num: {
            points,
            type: 'exponential',
            values: [69, 0.42, 13.37],
            prop: 'top',
          },
          str: {
            points,
            type: 'linear',
            values: ['22px', '13px'],
            prop: 'width',
          },
          map: {
            points,
            type: 'linear',
            values: { small: '1%', over: '90%' },
            prop: '--var-w',
          },
        }),
      },
    },
  }),
])
  .process(`@tailwind base;  @tailwind components;  @tailwind utilities;`, {
    from: `./tailwind-base.css`,
  })
  .then(getValue)
  .then(async select => {
    assert(await select('.expo-w-32'), `.expo-w-32{width:10.24rem;}`)
    assert(await select('.num-69'), `.num-69 {\n  top: 119508114780.15;\n}`)
    assert(
      await select('.zero-line-base'),
      `.zero-line-base{line-height: 0.88rem;}`
    )
  })