import i18n from './i18n.js'
import React from 'react'

function fixLocale(locale) {
  locale = (locale || 'en').toLowerCase()
  const mapping = {
    zh: 'zh-HANS',
    'zh-hans': 'zh-HANS',
    'zh-hant': 'zh-HANT',
    'zh-hant-hk': 'zh-HANT-HK',
    'zh-hk': 'zh-HANT-HK',
    'zh-cn': 'zh-HANS',
    'zh-tw': 'zh-HANT'
  }
  if (mapping[locale]) locale = mapping[locale] // zh-Hans -> zh-HANS
  else locale = locale.split('-')[0] // fr-CA -> fr
  return locale
}

export function isRtl(locale) {
  return ['ar', 'fa', 'he'].includes(locale)
}

function vdsAssetUrl(path, localhost = false) {
  // For localhost dev, just run vscode liveserver
  if (localhost) return `http://localhost:5500/dist/${path}`

  return `https://cdn.jsdelivr.net/npm/vipassana-design-standards/dist/1.2.5/${path}`
}

function StylesheetLinkTag({ url }) {
  return <link rel="stylesheet" type="text/css" href={url} />
}

export function VdsFaviconTag() {
  return (
    <link
      rel="shortcut icon"
      type="image/x-icon"
      href="https://cdn.jsdelivr.net/npm/vipassana-design-standards/dist/favicon.png"
    />
  )
}

export function VdsBootstrapThemeCssTag({ locale, localhost = false }) {
  locale = fixLocale(locale)
  const url = vdsAssetUrl(`css/bootstrap5-theme${isRtl(locale) ? '.rtl' : ''}.min.css`, localhost)
  return (
    <>
      <StylesheetLinkTag url={url} />
      {[
        'ar',
        'fa',
        'gu',
        'he',
        'ja',
        'km',
        'ko',
        'or',
        'si',
        'ta',
        'te',
        'th',
        'zh-HANS',
        'zh-HANT',
        'zh-HANT-HK'
      ].includes(locale) && <StylesheetLinkTag url={vdsAssetUrl(`css/fonts-${locale}.min.css`)} />}
    </>
  )
}

export function VdsBootstrapThemeJsTag({ localhost = false }) {
  const url = vdsAssetUrl('js/bootstrap5-theme.min.js', localhost)
  return <script type="text/javascript" src={url}></script>
}

export function VdsLogo({
  locale,
  disposition = 'default',
  size = '17',
  tagline = true,
  dark = false,
  useEnglish = true
}) {
  locale = fixLocale(locale)
  let englishTrans = i18n.en
  let trans = i18n[locale] || englishTrans

  const fullText =
    trans.full || `${trans.vipassana_meditation} ${trans.as_taught} ${trans.in_the_tradition}`

  let title = ''
  // Recommendation from trademark team : display logo in english, we can add translation on mouse hover
  if (useEnglish && locale != 'en') {
    locale = 'en'
    trans = englishTrans
    title = fullText
  }

  if (disposition == 'mobile') {
    disposition = 'left-two-lines'
    tagline = false
  }

  return (
    <div
      className="vipassana-logo"
      data-lang={locale}
      data-disposition={disposition}
      data-tagline={tagline}
      data-dark-mode={dark}
      data-reverse={trans.reverse}
      title={title}
      style={{ fontSize: `${size}px` }}
    >
      <img
        className="logo-wheel"
        src="https://cdn.jsdelivr.net/npm/vipassana-design-standards/dist/dhamma-wheel.svg"
        alt={fullText}
      />
      <div className="logo-text">
        <h1 className="logo-title">
          <span data-start-with={trans.vipassana_meditation.charAt(0).toLowerCase()}>
            {trans.vipassana_meditation}
          </span>
          <span className="logo-space">&nbsp;</span>
          <span>{trans.as_taught}</span>
          <span className="vipassana-as-taught">{trans.vipassana_as_taught}</span>
        </h1>
        <div className="logo-subtitle">{trans.in_the_tradition}</div>
      </div>
    </div>
  )
}

// Some icons from bootstrap icons, so all websites use the same
export function VdsIconLocale({ size = 1.2 }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={`${size}em`}
      height={`${size}em`}
      fill="currentColor"
      viewBox="0 0 16 16"
    >
      <path d="M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286H4.545zm1.634-.736L5.5 3.956h-.049l-.679 2.022H6.18z" />
      <path d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zm7.138 9.995c.193.301.402.583.63.846-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6.066 6.066 0 0 1-.415-.492 1.988 1.988 0 0 1-.94.31z" />
    </svg>
  )
}

export function VdsIconAccount({ size = 2.2 }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={`${size}em`}
      height={`${size}em`}
      fill="currentColor"
      viewBox="0 0 16 16"
    >
      <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
      <path
        fillRule="evenodd"
        d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"
      />
    </svg>
  )
}

export function VdsIconMenu({ size = 1.8 }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={`${size}em`}
      height={`${size}em`}
      fill="currentColor"
      viewBox="0 0 16 16"
    >
      <path
        fillRule="evenodd"
        d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
      />
    </svg>
  )
}