const svgToDataUri = require('mini-svg-data-uri')

const plugin = require('tailwindcss/plugin')

const ariaPressedPlugin = plugin(function ({ addVariant, e }) {
  addVariant('pressed', ({ modifySelectors, separator }) => {
    modifySelectors(({ className }) => {
      return `button[aria-pressed=true].${e(`pressed${separator}${className}`)}`
    })
  })
  addVariant('not-pressed', ({ modifySelectors, separator }) => {
    modifySelectors(({ className }) => {
      return `button[aria-pressed=false].${e(`not-pressed${separator}${className}`)}`
    })
  })
})

const table = plugin(function ({ addBase, theme }) {
  const rules = {
    '.table-checkbox,.table-radio': {
      appearance: 'none',
      padding: '0',
      'color-adjust': 'exact',
      display: 'inline-block',
      'vertical-align': 'middle',
      'background-origin': 'border-box',
      'user-select': 'none',
      'flex-shrink': '0',
      height: '1rem',
      width: '1rem',
      'background-color': theme('colors.white'),
      'border-color': theme('colors.roman-silver'),
      'border-width': '1px',
      '--tw-shadow': '0 0 #0000',
    },
    '.table-checkbox': {
      'border-radius': '4px',
    },
    '.table-radio': {
      'border-radius': '9999px',
    },
    '.table-checkbox:checked, .table-radio:checked': {
      'border-color': theme('colors.dodger-blue'),
      'background-size': `100% 100%`,
      'background-position': `center`,
      'background-repeat': `no-repeat`,
    },
    '.table-checkbox:checked': {
      'background-image': `url("${svgToDataUri(
        `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 5L7.00002 10L4 7" stroke="${theme(
          'colors.dodger-blue'
        )}" stroke-width="2"/></svg>`
      )}")`,
    },
    '.table-radio:checked': {
      'background-image': `url("${svgToDataUri(
        `<svg viewBox="0 0 16 16" fill="${theme(
          'colors.dodger-blue'
        )}" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="4"/></svg>`
      )}")`,
    },
    '.table-checkbox:hover,.table-radio:hover': {
      'border-color': theme('colors.space-cadet'),
    },
    '.table-checkbox:checked:hover,.table-radio:checked:hover': {
      'border-color': theme('colors.dodger-blue'),
    },
    '.table-checkbox:indeterminate': {
      'border-color': theme('colors.dodger-blue'),
      'background-size': '100% 100%',
      'background-position': 'center',
      'background-repeat': 'no-repeat',
      'background-image': `url("${svgToDataUri(
        `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 8H4" stroke="#3D9CFA" stroke-width="2"/></svg>`
      )}")`,
    },
    '.table-date': {
      background: `${theme(
        'colors.white'
      )} url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png) 98% 50% no-repeat`,
      border: '1px solid',
      'border-color': theme('colors.light-gray'),
      'border-radius': '4px',
      'background-color': theme('colors.white'),
    },
    '.table-date::-webkit-inner-spin-button': {
      display: 'none',
    },
    '.table-date::-webkit-calendar-picker-indicator': {
      opacity: '0',
    },
  }

  addBase(rules)
})

const colors = {
  white: '#FFFFFF',
  'active-space': '#F0F8FA',
  'gray-light': '#EDF0F2',
  haze: '#F7F9FA', // gray-lightest previously
  'gray-input': '#E6E9EB',
  'gray-placeholder': '#99A2AD',
  'gray-button-light': '#E1E2E6',
  'gray-button-dark': '#D2D2D6',
  gray: '#676D7A',
  'gray-dim': '#081753',
  error: '#FFAAAA',
  green: '#0ABF53',
  'B&W': '#6E747C',
  'green-haze': '#DFFFEC',
  'green-hover': '  #009900',
  // 'green-grade': '#F5FFFD', not used
  // 'green-grade--light': '#F5FFFD', not used
  filtersbutton: '#25375C',
  blue: '#1284ED',
  'blue-upload': '#F5FAFF',
  'blue-light': '#EBF5FF',
  'blue-link': '#0099E5',
  'blue-dark': '#07193D',
  'blue-darkest': '#03112E',
  'blue-content': '#1F3257',
  main: '#21283D',
  orange: '#FF9F1A',
  'orange-haze': '#FFF1E6',
  'orange-light': '#FFF7EC',
  red: '#F8203A',
  'red-haze': '#FFF5F6',
  'red-light': '#FFECEE',
  pink: '#E159B9',
  // yellow: 'FAD741', unused, incorrect
  // 'yellow-light': 'FDF9E9', unused, incorrect
  'icon-gray': '#8993A3',
  'icon-gray-dim': '#081753',
  'icon-gray-light': '#C0C8D1',
  'sidebar-active': '#3D9CFA',
  EBEEF0: '#EBEEF0',
  E5F7FB: '#E5F7FB',
  D3F4FB: '#D3F4FB',
  F7F7F8: '#F7F7F8',
  'action-green': '#0BBF53',
  // new neutral colors
  'space-cadet': '#21283D', // for primary text (headings)
  'black-coral': '#676D7A', // for body text
  'roman-silver': '#8C8F9A', // icons in default state in light mode
  'light-gray': '#D3D4D8', // hover states of secondary buttons
  gainsboro: '#E7E8EB', // lines (dividers, inputs) and secondary buttons
  cultured: '#F7F7F8', // hover states and backgrounds
  pourpleLight: '#D6D7FF',
  greenLight: '#A9F0D1',
  'dodger-blue': '#3D9CFA',
  black: '#000000',
  inherit: 'inherit',
  transparent: 'transparent',
  'cyan-blue': '#D6EBFF',
  'giants-blue': '#005EFF',
  'giants-blue-dark': '#0056EB',
  violet: '#6C34FF',
  'dark-pastel-green': '#08BA50',
  scratch: '#F6EDFD',
  apps: '#FDEEED',
  template: '#EDFDFD',
  file: '#FDEEED',
}

const makeSizes = (divisor, x) => x.reduce((acc, x) => ({ ...acc, [x]: x / divisor + 'rem' }), {})

// 1 rem = 16px

module.exports = {
  theme: {
    lineHeight: {
      none: '1',
      ...makeSizes(16, [0, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 40, 56]),
    },
    extend: {
      inset: makeSizes(4, [4.5, 46, 64, 72, 80, 82, 84, 86, 88, 90]),
      spacing: makeSizes(4, [4.5, 30, 50, 58, 60, 74, 77, 120, 124, 126, 128, 140, 160]),
      minHeight: {
        4: '1rem',
        80: '20rem',
        100: '25rem',
        120: '30rem',
      },
      maxHeight: {
        34: '34rem',
        70: '70rem',
        '48/100': '48%',
        '88/100': '88%',
        '90/100': '90%',
        '92/100': '92%',
      },
      margin: {
        82: 82 / 4 + 'rem',
        84: 84 / 4 + 'rem',
        86: 86 / 4 + 'rem',
        88: 88 / 4 + 'rem',
        90: 90 / 4 + 'rem',
      },
      height: {
        '48/100': '48%',
        '92/100': '92%',
        100: '25rem',
        110: '27.5rem',
        115: '28.75rem',
        120: '30rem',
      },
      width: {
        100: '25rem',
        '92/100': '92%',
      },
      minWidth: {
        0: '0',
        28: '7rem',
        39: '9.75rem',
        72: '18rem',
        100: '25rem',
        120: '30rem',
      },
      maxWidth: {
        '1/2': '50%',
        48: '12rem',
        56: '14rem',
        100: '100rem',
      },
      borderOpacity: {
        '40': '0.4',
      },
      zIndex: {
        '5': '5',
      },
      borderRadius: makeSizes(16, [2, 4, 6, 8, 12, 16, 24]),
    },
    boxShadow: {
      DEFAULT: '0px 4px 16px rgba(0, 0, 0, 0.16)',
      pinnedResults: '0px -4px 8px rgba(0, 0, 0, 0.08)',
      templates: '0px 8px 24px rgba(0, 0, 0, 0.16)',
      context: '6px 4px 16px rgba(0, 0, 0, 0.16)',
    },
    colors,
    fontSize: {
      0: '0',
      8: 8 / 16 + 'rem',
      10: 10 / 16 + 'rem',
      12: 12 / 16 + 'rem',
      xs: 12 / 16 + 'rem',
      14: 14 / 16 + 'rem',
      sm: 14 / 16 + 'rem',
      16: 16 / 16 + 'rem',
      base: 16 / 16 + 'rem',
      18: 18 / 16 + 'rem',
      lg: 18 / 16 + 'rem',
      20: 20 / 16 + 'rem',
      xl: 20 / 16 + 'rem',
      24: 24 / 16 + 'rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      32: 32 / 16 + 'rem',
      40: 40 / 16 + 'rem',
      48: 48 / 16 + 'rem',
      64: 64 / 16 + 'rem',
      '4xl': '2.5rem',
      // '5xl': '3rem',
      // '6xl': '4rem',
    },
    fontFamily: {
      sans: [
        'Nunito Sans',
        '-apple-system',
        'BlinkMacSystemFont',
        'Helvetica Neue',
        'Arial',
        'sans-serif',
      ],
      serif: [
        'Georgia',
        '-apple-system',
        'BlinkMacSystemFont',
        'Helvetica Neue',
        'Arial',
        'sans-serif',
      ],
      mono: [
        'Menlo',
        'Monaco',
        'Consolas',
        'Roboto Mono',
        'SFMono-Regular',
        'Segoe UI',
        'Courier',
        'monospace',
      ],
    },
    fontWeight: {
      light: 300,
      normal: 400,
      semibold: 600,
      bold: 700,
    },
    fill: (theme) => colors,
    stroke: (theme) => colors,
    strokeWidth: (theme) => ({ '2': '2', '4': '4' }),
  },
  plugins: [
    require('@tailwindcss/forms')({
      strategy: 'class',
    }),
    require('@tailwindcss/typography'),
    ariaPressedPlugin,
    table,
  ],
  content: [
    './components/**/*.res',
    './pages/**/*.res',
    './layouts/**/*.res',
    './common/**/*.res',
    './showcase/**/*.res',
  ],
}
