import { colorTokens, palette } from '../tokens/palette'
import { createGlobalStyle } from 'styled-components'

import { FontFamily, FontWeight, FontStyle } from '../tokens/typography'

// @ts-ignore
import PT_Root_UI_Light from '../assets/fonts/PT-Root-UI_Light.woff2'
// @ts-ignore
import PT_Root_UI_Medium from '../assets/fonts/PT-Root-UI_Medium.woff2'
// @ts-ignore
import PT_Root_UI_Bold from '../assets/fonts/PT-Root-UI_Bold.woff2'
// @ts-ignore
import PT_Root_UI_Regular from '../assets/fonts/PT-Root-UI_Regular.woff2'
// @ts-ignore
import Roboto_Thin from '../assets/fonts/Roboto-Thin.woff'


export type FontFace = {
  fontFamily: FontFamily,
  fontWeight?: FontWeight,
  fontStyle?: FontStyle,
  src: Array<{
    format: 'woff2' | 'woff' | 'truetype',
    url: string,
  }>,
}
export const fontFace: FontFace[] = [
  {
    fontFamily: FontFamily.Secondary,
    fontWeight: FontWeight.ExtraLight,
    src: [{ format: 'woff', url: Roboto_Thin }]
  },
  {
    fontFamily: FontFamily.Primary,
    fontWeight: FontWeight.Light,
    src: [{ format: 'woff2', url: PT_Root_UI_Light }]
  },
  {
    fontFamily: FontFamily.Primary,
    fontWeight: FontWeight.Regular,
    src: [{ format: 'woff2', url: PT_Root_UI_Regular }]
  },
  {
    fontFamily: FontFamily.Primary,
    fontWeight: FontWeight.Medium,
    src: [{ format: 'woff2', url: PT_Root_UI_Medium }]
  },
  {
    fontFamily: FontFamily.Primary,
    fontWeight: FontWeight.Bold,
    src: [{ format: 'woff2', url: PT_Root_UI_Bold }]
  },
]
type FontFaceSrc = FontFace['src'][number]

const generateFontSrc = (x: FontFaceSrc[]) => x.map(value => `url(${value.url}) format("${value.format}")`).join(',\n')

const getFontFace = ({ fontFamily, fontStyle, fontWeight, src }: FontFace) => {
  return `
    @font-face {
      font-family: ${fontFamily};
      ${fontStyle ? 'font-style: ' + fontStyle : ''};
      ${fontWeight ? 'font-weight: ' + fontWeight : ''};
      src:
        ${generateFontSrc(src)};
    }
  `
}

const globalFonts = fontFace.map(getFontFace).join('\n')

const globalColors = Object.entries(colorTokens).map(([name, value]) => `--color-${name}: ${value};`).join('\n')
const paletteColors = Object.entries(palette).map(([name, value]) => `--color-${name}: ${value};`).join('\n')

const globalRootStyleForGallery = `
.root-background-basic {
  transition: filter 0.2s ease-in-out;
}

.root-background-blurred {
  filter: blur(8px);
}
`

export const GlobalStyle = createGlobalStyle`
  :root {
    ${globalColors}
    ${paletteColors}
  }

  ${globalRootStyleForGallery}
`
const style = document.createElement('style')
style.textContent = `
  ${globalFonts}
`
document.head.appendChild(style)