import React from "react"
import { useSnapshot } from "valtio"
import { getCookie, deleteCookie } from "cookies-next"
import { useRouter } from "next/router"
import { useTranslation } from "next-i18next"

import clonedeep from "lodash.clonedeep"

import api from "~utils/api"
import { accountState, initialAccountState } from "~utils/accountState"
import { appState, initialAppState } from "~utils/appState"

import Header from "~components/Header"
import Button from "~components/Button"
import HeaderMenu from "~components/HeaderMenu"

const TopHeader = () => {
  const { t } = useTranslation("common")

  // Cookies
  const accountCookie = getCookie("account")
  const userCookie = getCookie("user")

  const headers = {}
  //   accountCookies.account != null
  //     ? {
  //         Authorization: `Bearer ${accountCookies.account.access_token}`,
  //       }
  //     : {}

  const { account } = useSnapshot(accountState)
  const { party } = useSnapshot(appState)
  const router = useRouter()

  function copyToClipboard() {
    const el = document.createElement("input")
    el.value = window.location.href
    el.id = "url-input"
    document.body.appendChild(el)

    el.select()
    document.execCommand("copy")
    el.remove()
  }

  function newParty() {
    // Push the root URL
    router.push("/")

    // Clean state
    const resetState = clonedeep(initialAppState)
    Object.keys(resetState).forEach((key) => {
      appState[key] = resetState[key]
    })

    // Set party to be editable
    appState.party.editable = true
  }

  function logout() {
    deleteCookie("account")
    deleteCookie("user")

    // Clean state
    const resetState = clonedeep(initialAccountState)
    Object.keys(resetState).forEach((key) => {
      if (key !== "language") accountState[key] = resetState[key]
    })

    if (router.route != "/new") appState.party.editable = false

    router.push("/")
    return false
  }

  function toggleFavorite() {
    if (party.favorited) unsaveFavorite()
    else saveFavorite()
  }

  function saveFavorite() {
    if (party.id)
      api.saveTeam({ id: party.id, params: headers }).then((response) => {
        if (response.status == 201) appState.party.favorited = true
      })
    else console.error("Failed to save team: No party ID")
  }

  function unsaveFavorite() {
    if (party.id)
      api.unsaveTeam({ id: party.id, params: headers }).then((response) => {
        if (response.status == 200) appState.party.favorited = false
      })
    else console.error("Failed to unsave team: No party ID")
  }

  const leftNav = () => {
    return (
      <div className="dropdown">
        <Button icon="menu">{t("buttons.menu")}</Button>
        {account.user ? (
          <HeaderMenu
            authenticated={account.authorized}
            username={account.user.username}
            logout={logout}
          />
        ) : (
          <HeaderMenu authenticated={account.authorized} />
        )}
      </div>
    )
  }

  const saveButton = () => {
    if (party.favorited)
      return (
        <Button icon="save" active={true} onClick={toggleFavorite}>
          Saved
        </Button>
      )
    else
      return (
        <Button icon="save" onClick={toggleFavorite}>
          Save
        </Button>
      )
  }

  const rightNav = () => {
    return (
      <div>
        {router.route === "/p/[party]" &&
        account.user &&
        (!party.user || party.user.id !== account.user.id)
          ? saveButton()
          : ""}
        {router.route === "/p/[party]" ? (
          <Button icon="link" onClick={copyToClipboard}>
            {t("buttons.copy")}
          </Button>
        ) : (
          ""
        )}
        <Button icon="new" onClick={newParty}>
          {t("buttons.new")}
        </Button>
      </div>
    )
  }

  return <Header position="top" left={leftNav()} right={rightNav()} />
}

export default TopHeader