import Script from 'next/script'

import CommonHead from '@/components/server/CommonHead'

const modeScript = `
  const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')

  const updateMode = () => {
    const isSystemDarkMode = darkModeMediaQuery.matches
    const isDarkMode = window.localStorage.isDarkMode === 'true' || (!('isDarkMode' in window.localStorage) && isSystemDarkMode)

    if (isDarkMode) {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }

    if (isDarkMode === isSystemDarkMode) {
      delete window.localStorage.isDarkMode
    }
  }

  const disableTransitionsTemporarily = () => {
    document.documentElement.classList.add('[&_*]:!transition-none')
    window.setTimeout(() => {
      document.documentElement.classList.remove('[&_*]:!transition-none')
    }, 0)
  }

  const updateModeWithoutTransitions = () => {
    disableTransitionsTemporarily()
    updateMode()
  }

  updateMode()
  darkModeMediaQuery.addEventListener('change', updateModeWithoutTransitions)
  window.addEventListener('storage', updateModeWithoutTransitions)
`

export default function Head() {
  return (
    <>
      <CommonHead />
      <title>Filipe Medeiros - O meu espaço na internet</title>
      <meta
        name="description"
        content="O meu site pessoal, onde podes ler artigos que escrevo e saber mais sobre mim."
      />
      <meta name="og:image" content="https://filipesm.eu/me.jpeg" />
      <link rel="canonical" href="https://filipesm.eu" />
      <meta name="twitter:card" content="summary_large_image" />
      <meta property="og:url" content="https://filipesm.eu" />
      <meta
        property="og:title"
        content="Filipe Medeiros - O meu espaço na internet"
      />
      <meta
        property="og:description"
        content="O meu site pessoal, onde podes ler artigos que escrevo e saber mais sobre mim."
      />
      <meta property="og:type" content="site" />

      <Script
        id="mode-script"
        dangerouslySetInnerHTML={{ __html: modeScript }}
      />
      <link
        rel="alternate"
        type="application/rss+xml"
        href={`${process.env.NEXT_PUBLIC_SITE_URL}/rss/feed.xml`}
      />
      <link
        rel="alternate"
        type="application/feed+json"
        href={`${process.env.NEXT_PUBLIC_SITE_URL}/rss/feed.json`}
      />
    </>
  )
}
