<script lang="ts">
  import Translations from "../i18n/Translations"
  import Page from "../Base/Page.svelte"
  import Tr from "../Base/Tr.svelte"
  import If from "../Base/If.svelte"
  import CommunityIndexView from "./CommunityIndexView.svelte"
  import Community from "../../assets/svg/Community.svelte"
  import { Utils } from "../../Utils"
  import DocumentMagnifyingGlass from "@babeard/svelte-heroicons/outline/DocumentMagnifyingGlass"
  import OpenIdEditor from "./OpenIdEditor.svelte"
  import OpenJosm from "../Base/OpenJosm.svelte"
  import MapillaryLink from "./MapillaryLink.svelte"
  import UserRelatedState from "../../Logic/State/UserRelatedState"
  import ArrowDownTray from "@babeard/svelte-heroicons/mini/ArrowDownTray"
  import DownloadPanel from "../DownloadFlow/DownloadPanel.svelte"
  import Share from "@babeard/svelte-heroicons/solid/Share"
  import ShareScreen from "./ShareScreen.svelte"
  import FilterPage from "./FilterPage.svelte"
  import RasterLayerOverview from "../Map/RasterLayerOverview.svelte"
  import ThemeIntroPanel from "./ThemeIntroPanel.svelte"
  import Marker from "../Map/Marker.svelte"
  import { ShareIcon } from "@babeard/svelte-heroicons/mini"
  import SidebarUnit from "../Base/SidebarUnit.svelte"
  import PanoramaxLink from "./PanoramaxLink.svelte"
  import { UIEventSource } from "../../Logic/UIEventSource"
  import ChartBar from "@babeard/svelte-heroicons/solid/ChartBar"
  import QueueList from "@babeard/svelte-heroicons/solid/QueueList"
  import { MenuState } from "../../Models/MenuState"
  import { OsmConnection } from "../../Logic/Osm/OsmConnection"
  import FeatureSwitchState from "../../Logic/State/FeatureSwitchState"
  import ThemeConfig from "../../Models/ThemeConfig/ThemeConfig"
  import type { MapProperties } from "../../Models/MapProperties"
  import FavouritesFeatureSource from "../../Logic/FeatureSource/Sources/FavouritesFeatureSource"
  import Hotkeys from "../Base/Hotkeys"
  import MenuDrawerIndex from "./MenuDrawerIndex.svelte"
  import ThemeViewState from "../../Models/ThemeViewState"

  export let onlyLink: boolean
  export let state: ThemeViewState
  let hotkeys = Hotkeys._docs
  let userdetails = state.osmConnection.userDetails

  let theme = state.theme
  let featureSwitches = state.featureSwitches
  let pg = state.guistate.pageStates
  let location = state.mapProperties?.location
  const t = Translations.t.general.menu
  let shown = new UIEventSource(state.guistate.pageStates.menu.data || !onlyLink)
  state.guistate.pageStates.menu.addCallback((isShown) => {
    if (!onlyLink) {
      return true
    }
    if (isShown) {
      shown.setData(true)
    } else {
      Utils.waitFor(250).then(() => {
        shown.setData(state.guistate.pageStates.menu.data)
      })
    }
  })
</script>

<MenuDrawerIndex {state} {onlyLink}>
  <!-- Theme related: documentation links, download, ... -->
  <svelte:fragment slot="theme-tools">
    {#if state.theme}
      <SidebarUnit>
        <h3>
          <Tr t={t.aboutCurrentThemeTitle} />
        </h3>

        <Page {onlyLink} shown={pg.about_theme}>
          <svelte:fragment slot="link">
            <Marker size="h-7 w-7" icons={theme.icon} />
            <Tr t={t.showIntroduction} />
          </svelte:fragment>
          <svelte:fragment slot="header">
            <Marker size="h-8 w-8 mr-3" icons={theme.icon} />
            <Tr t={theme.title} />
          </svelte:fragment>
          <ThemeIntroPanel {state} />
        </Page>

        <FilterPage {onlyLink} {state} />

        <RasterLayerOverview {onlyLink} {state} />

        <Page {onlyLink} shown={pg.share}>
          <svelte:fragment slot="header">
            <Share />
            <Tr t={Translations.t.general.sharescreen.title} />
          </svelte:fragment>
          <ShareScreen {state} />
        </Page>

        {#if state.featureSwitches?.featureSwitchEnableExport}
          <Page {onlyLink} shown={pg.download}>
            <svelte:fragment slot="header">
              <ArrowDownTray />
              <Tr t={Translations.t.general.download.title} />
            </svelte:fragment>
            <DownloadPanel {state} />
          </Page>
        {/if}

        {#if theme.official}
          <a
            class="flex"
            href={"https://source.mapcomplete.org/MapComplete/MapComplete/src/branch/develop/Docs/Themes/" +
              theme.id +
              ".md"}
            target="_blank"
          >
            <DocumentMagnifyingGlass class="h-6 w-6" />
            <Tr
              t={Translations.t.general.attribution.openThemeDocumentation.Subs({
                name: theme.title,
              })}
            />
          </a>

          <a class="flex" href={Utils.OsmChaLinkFor(31, theme.id)} target="_blank">
            <QueueList class="h-6 w-6" />
            <Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: theme.title })} />
          </a>
          <a
            class="flex"
            href={`./statistics.html?filter-mapcomplete-changes-theme-search={"search"%3A"${theme.id}"}`}
            target="_blank"
          >
            <ChartBar class="h-6 w-6" />
            <Tr
              t={Translations.t.general.attribution.openStatistics.Subs({ theme: theme.title })}
            />
          </a>
        {/if}
      </SidebarUnit>
    {/if}
  </svelte:fragment>

  <!-- Other links and tools for the given location: open iD/JOSM; community index, ... -->
  <svelte:fragment slot="location-tools">
    {#if state.mapProperties?.location}
      <SidebarUnit>
        <h3>
          <Tr t={t.moreUtilsTitle} />
        </h3>

        <Page {onlyLink} shown={pg.community_index}>
          <svelte:fragment slot="header">
            <Community />
            <Tr t={Translations.t.communityIndex.title} />
          </svelte:fragment>
          <CommunityIndexView location={state.mapProperties.location} />
        </Page>

        <If condition={featureSwitches?.featureSwitchEnableLogin}>
          <OpenIdEditor mapProperties={state.mapProperties} />
          <OpenJosm {state} />
          <PanoramaxLink large={false} mapProperties={state.mapProperties} />
          <MapillaryLink large={false} mapProperties={state.mapProperties} />
        </If>

        <a class="sidebar-button flex" href="geo:{$location.lat},{$location.lon}">
          <ShareIcon />
          <Tr t={t.openHereDifferentApp} />
        </a>
      </SidebarUnit>
    {/if}
  </svelte:fragment>
</MenuDrawerIndex>
