import { PropsWithChildren } from "react"

import { css, Global, ThemeProvider as EmotionTheme } from "@emotion/react"
import { ThemeConsumer, ThemeProvider as StpgTheme } from "@startpage/theming"

import { useGeneralSettings } from "./GeneralSettings"
import { initialTheme } from "./initialData"

const getGlobalStyles = (font?: string, enableFonts?: boolean) => {
  const fontBaseUrl =
    "https://fonts.googleapis.com/css?family=" + font?.replace(" ", "+")

  return css`
    ${enableFonts &&
    css`
      @import url("${fontBaseUrl}");
      @import url("${fontBaseUrl}:500");
      @import url("${fontBaseUrl}:700");
    `}

    body {
      font-family: "${font}", sans-serif;
      font-weight: 500;
      min-height: 100vh;
      min-width: 600px;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }
    html,
    body,
    #root {
      height: 100%;
      width: 100%;
      margin: 0;
    }
    #root {
      overflow: hidden;
    }
    input,
    button,
    textarea,
    select {
      font: inherit;
    }
    a {
      text-decoration: none;
      color: inherit;
      :visited {
        color: inherit;
      }
    }
  `
}

export const ThemeProvider = ({ children }: PropsWithChildren<unknown>) => {
  const [{ font, enableFonts }] = useGeneralSettings()
  const globalStyles = getGlobalStyles(font, enableFonts)

  return (
    <StpgTheme initialTheme={initialTheme} persistTheme={true}>
      <ThemeConsumer>
        {({ theme }) => (
          <EmotionTheme theme={theme}>
            <Global styles={globalStyles} />
            {children}
          </EmotionTheme>
        )}
      </ThemeConsumer>
    </StpgTheme>
  )
}