<script lang="ts">
  import { Store } from "../../Logic/UIEventSource"
  import ActiveFilters from "./ActiveFilters.svelte"
  import Constants from "../../Models/Constants"
  import type { ActiveFilter } from "../../Logic/State/LayerState"
  import ThemeResults from "./ThemeResults.svelte"
  import GeocodeResults from "./GeocodeResults.svelte"
  import FilterResults from "./FilterResults.svelte"
  import Tr from "../Base/Tr.svelte"
  import Translations from "../i18n/Translations"
  import type { FilterSearchResult } from "../../Logic/Search/FilterSearch"
  import { WithSearchState } from "../../Models/ThemeViewState/WithSearchState"
  import { TrashIcon } from "@babeard/svelte-heroicons/mini"
  import { CogIcon } from "@rgossiaux/svelte-heroicons/solid"
  import SidebarUnit from "../Base/SidebarUnit.svelte"
  import DotMenu from "../Base/DotMenu.svelte"
  import type { GeocodeResult } from "../../Logic/Search/GeocodingProvider"
  import { default as GeocodeResultSvelte } from "./GeocodeResult.svelte"

  export let state: WithSearchState
  let activeFilters: Store<(ActiveFilter & FilterSearchResult)[]> =
    state.layerState.activeFilters.map((fs) =>
      fs
        .filter((f) => f.filter.options[0].fields.length === 0 && !Constants.isPriviliged(f.layer))
        .map((af) => {
          const index = <number>af.control.data
          const r: FilterSearchResult & ActiveFilter = {
            ...af,
            index,
            option: af.filter.options[index],
          }
          return r
        })
    )

  let searchTerm = state.searchState.searchTerm
  let recentlySeen: Store<GeocodeResult[]> = state.userRelatedState.recentlyVisitedSearch.value

  let allowOtherThemes = state.featureSwitches.featureSwitchBackToThemeOverview
  let allowFilters = state.featureSwitches.featureSwitchFilter
</script>

<div class="low-interaction flex flex-col gap-y-2 p-4">
  {#if $allowFilters}
    <ActiveFilters {state} activeFilters={$activeFilters} />
  {/if}
  {#if $searchTerm.length === 0 && $activeFilters.length === 0}
    <div class="items-center p-8 text-center">
      <b>
        <Tr t={Translations.t.general.search.instructions} />
      </b>
    </div>
  {/if}

  {#if $allowFilters}
    <FilterResults {state} />
  {/if}
  <GeocodeResults
    {state}
    on:select={(select) => {
      state.searchState.applyGeocodeResult(select.detail)
    }}
  >
    <svelte:fragment slot="if-no-results">
      {#if $recentlySeen?.length > 0}
        <SidebarUnit>
          <div class="flex justify-between">
            <h3 class="m-2">
              <Tr t={Translations.t.general.search.recents} />
            </h3>
            <DotMenu>
              <button
                on:click={() => {
                  state.userRelatedState.recentlyVisitedSearch.clear()
                }}
              >
                <TrashIcon />
                <Tr t={Translations.t.general.search.deleteSearchHistory} />
              </button>
              <button on:click={() => state.guistate.openUsersettings("sync-visited-locations")}>
                <CogIcon />
                <Tr t={Translations.t.general.search.editSearchSyncSettings} />
              </button>
            </DotMenu>
          </div>
          {#each $recentlySeen as entry (entry)}
            <GeocodeResultSvelte
              {entry}
              {state}
              on:select={(select) => state.searchState.applyGeocodeResult(select.detail)}
            />
          {/each}
        </SidebarUnit>
      {/if}
    </svelte:fragment>
  </GeocodeResults>

  {#if $allowOtherThemes}
    <ThemeResults {state} />
  {/if}
</div>
