package workbook.htmlElements.headerElements

import com.raquo.laminar.api.L
import com.raquo.laminar.api.L.*
import datastructures.core.language.{AppLanguage, HumanLanguage}
import workbook.model.abstractions.HtmlWorkbookElement
import workbook.model.info.{FullInfo, HomepageInfo}

case class LanguageSelectionLine(fullInfo: FullInfo) extends HtmlWorkbookElement {


  private def forLanguages(availableLanguages: List[HumanLanguage]): List[Element] = {
    println("LanguageSelectionLine: " + availableLanguages)
    availableLanguages.map(curLang => {
      val childElement: Element = LanguageSelectionLine.flagImgMap(30)(curLang)
      div(
        onClick --> { _ => fullInfo.control.changeLanguage(curLang) },
        child <-- Var(childElement).signal
      )
    })
  }

  private val domElement = div(
    cls := "select-language-line",
    children <-- fullInfo.signals.availableLanguages.map(forLanguages)
  )

  override def getDomElement(): L.Element = domElement

}

object LanguageSelectionLine {

  private def flagImgMap(width: Double): Map[HumanLanguage, Element] = Map(
    AppLanguage.German -> deFlag(width),
    AppLanguage.English -> enFlag(width),
    AppLanguage.Spanish -> esFlag(width),
    AppLanguage.Danish -> dkFlag(width),
    AppLanguage.Russian -> ruFlag(width),
    AppLanguage.Ukrainian -> ukFlag(width),
    AppLanguage.Turkish -> trFlag(width),
    AppLanguage.French -> frFlag(width)
  )

  private def esFlag(width: Double): Element = {
    img(
      src := "../resources/img/flags/esFlag.svg",
      styleAttr := "width:" + width + "px; height:" + (width / 3 * 2) + "px;",
    )
  }


  private def dkFlag(width: Double): Element =
    svg.svg(
      svg.xmlns := "http://www.w3.org/2000/svg",
      svg.width := width + "",
      svg.height := width / 37 * 28 + "",
      svg.viewBox := "0 0 37 28",

      svg.path(
        svg.fill := "#c8102e",
        svg.d := "M0,0H37V28H0Z"
      ),

      svg.path(
        svg.stroke := "#fff",
        svg.strokeWidth := "4",
        svg.d := "M0,14h37M14,0v28"
      )
    )

  private def ukFlag(width: Double): Element = {
    svg.svg(
      svg.xmlns := "http://www.w3.org/2000/svg",
      svg.width := width + "",
      svg.height := width / 3 * 2 + "",
      svg.viewBox := "0 0 1200 800",
      svg.rect(
        svg.width := "1200",
        svg.height := "800",
        svg.fill := "#0057B7"
      ),

      svg.rect(
        svg.width := "1200",
        svg.height := "400",
        svg.y := "400",
        svg.fill := "#FFD700"
      )
    )
  }

  private def trFlag(width: Double): Element =
    svg.svg(
      svg.xmlns := "http://www.w3.org/2000/svg",
      svg.width := width + "",
      svg.height := width / 3 * 4 + "",
      svg.viewBox := "0 -30000 90000 60000",

      svg.path(
        svg.fill := "#e30a17",
        svg.d := "m0-30000h90000v60000H0z"
      ),

      svg.path(
        svg.fill := "#fff",
        svg.d := "m41750 0 13568-4408-8386 11541V-7133l8386 11541zm925 8021a15000 15000 0 1 1 0-16042 12000 12000 0 1 0 0 16042z"
      )
    )

  private def ruFlag(width: Double): Element =
    svg.svg(
      svg.xmlns := "http://www.w3.org/2000/svg",
      svg.viewBox := "0 0 9 6",
      svg.width := width + "",
      svg.height := width / 3 * 2 + "",

      svg.rect(
        svg.fill := "#fff",
        svg.width := "9",
        svg.height := "3"
      ),

      svg.rect(
        svg.fill := "#d52b1e",
        svg.y := "3",
        svg.width := "9",
        svg.height := "3"
      ),

      svg.rect(
        svg.fill := "#0039a6",
        svg.y := "2",
        svg.width := "9",
        svg.height := "2"
      )
    )

  private def frFlag(width: Double): Element =
    svg.svg(
      svg.xmlns := "http://www.w3.org/2000/svg",
      svg.viewBox := "0 0 900 600",
      svg.width := width + "",
      svg.height := width / 3 * 2 + "",
      svg.path(
        svg.fill := "#CE1126",
        svg.d := "M0 0h900v600H0"
      ),
      svg.path(
        svg.fill := "#fff",
        svg.d := "M0 0h600v600H0"
      ),
      svg.path(
        svg.fill := "#002654",
        svg.d := "M0 0h300v600H0"
      )
    )

  private def enFlag(width: Double): Element =
    svg.svg(
      svg.xmlns := "http://www.w3.org/2000/svg",
      svg.viewBox := "0 0 50 30",
      svg.width := width + "",
      svg.height := width / 10 * 6 + "",

      svg.clipPathTag(
        svg.idAttr := "t",
        svg.path(
          svg.d := "M25,15h25v15zv15h-25zh-25v-15zv-15h25z"
        )
      ),

      svg.path(
        svg.d := "M0,0v30h50v-30z",
        svg.fill := "#012169"
      ),

      svg.path(
        svg.d := "M0,0 50,30M50,0 0,30",
        svg.stroke := "#fff",
        svg.strokeWidth := "6"
      ),

      svg.path(
        svg.d := "M0,0 50,30M50,0 0,30",
        svg.clipPathAttr := "url(#t)",
        svg.stroke := "#C8102E",
        svg.strokeWidth := "4"
      ),

      svg.path(
        svg.d := "M-1 11h22v-12h8v12h22v8h-22v12h-8v-12h-22z",
        svg.fill := "#C8102E",
        svg.stroke := "#FFF",
        svg.strokeWidth := "2"
      )
    )

  private def deFlag(width: Double): Element = svg.svg(
    svg.cls := "language-flag",
    svg.viewBox := "0 0 5 3",
    svg.width := width + "",
    svg.height := width / 10 * 6 + "",
    svg.rect(
      svg.x := "0",
      svg.y := "0",
      svg.width := "5",
      svg.height := "3",
      svg.fill := "#000"
    ),
    svg.rect(
      svg.x := "0",
      svg.y := "1",
      svg.width := "5",
      svg.height := "1",
      svg.fill := "#D00"
    ),
    svg.rect(
      svg.x := "0",
      svg.y := "2",
      svg.width := "5",
      svg.height := "1",
      svg.fill := "#FFCE00"
    )
  )


}