import { defaultTheme, flattenPalette } from '../system'
import { objectToCSSProperties } from '../utils'

const getRootStyles = (styles) => {
  const styleString = Object.keys(styles)
    .map((key) => `${key}: ${styles[key]}`)
    .join('; ')
  return `:root { ${styleString} }`
}

export const setRootStyles = (styles) => {
  const styleElement = <HTMLStyleElement>document.getElementById('uikit-style')
  const sheet = <CSSStyleSheet>styleElement.sheet
  const styleString = getRootStyles(styles)
  sheet.deleteRule(0)
  sheet.insertRule(styleString, 0)
}

export const defaultColorProperties = objectToCSSProperties(
  'colors',
  flattenPalette(defaultTheme.colors)
)

export const styleReset = `
${getRootStyles(defaultColorProperties)}

.uikit-reset {
  appearance: none;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  font-weight: 400;
  text-decoration: none;
  flex: 0 0 auto;
  min-width: 0px;
  min-height: 0px;
  padding: 0px;
  margin: 0px;
  border: 0px solid transparent;
  background-color: transparent;
  color: inherit;
}

.uikit-reset::-moz-focus-inner {
  padding: 0px;
  border: 0px;
}

.uikit-reset:focus:not(.focus-visible) {
  outline: 0px;
}
`
  // minify string
  .replace(/\n/g, '')
  .replace(/\s\s+/g, ' ')

// we use our own global style implementation in place of Emotion Global
// so we can have more control over when styles are injected since multiple
// Providers can be used on a page
if (typeof window !== 'undefined' && !document.getElementById('uikit-style')) {
  const styleElement = document.createElement('style')
  styleElement.id = 'uikit-style'
  styleElement.innerHTML = styleReset
  document.head.insertAdjacentElement('afterbegin', styleElement)
}