<script setup lang="ts">
import type { MapMarker, MapMarkerGroup, PlayerMarker } from '@/types/Leaflet';
import type { SearchMode } from '@/types/Search';
import { onClickOutside, useFocus, useFocusWithin, useLocalStorage, useMagicKeys, whenever } from '@vueuse/core';
import { computed, onMounted, ref, onUpdated, watch } from 'vue';
import SearchMarkersTags from './SearchMarkersTags.vue';

const props = defineProps<{
    markers: MapMarker[],
    players: PlayerMarker,
}>()

const fixedMarkers = props.markers
const customMarkersData = useLocalStorage('custom-markers', [])

const allMarkers = computed(() => {
    return [...fixedMarkers, ...customMarkersData.value]
})

// Search functions
const searchBar = ref<HTMLDivElement>()
const searchBarWrapper = ref<HTMLDivElement>()
const qInput = ref()
const { focused: isComponentFocused } = useFocusWithin(searchBarWrapper)
const { focused: isSearchFocused } = useFocus(qInput)

const currentSearchMode = ref<SearchMode>('query')

onMounted(() => {
    isSearchFocused.value = true
})

const hasQuery = computed(() => q.value.length > 0)
const shouldBeActive = computed(() =>
    (hasQuery.value && currentSearchMode.value === "query" && isComponentFocused.value)
    || currentSearchMode.value !== "query"
)

const q = ref<string>("")

const unifier = new RegExp(/[^a-zA-Z0-9\-\'']/g)

/**
 * Dropdown's markers list
 * If the search doesn't have a query set, defaults to marker grouping
 */
const filteredMarkers = computed(() => {
    if (currentSearchMode.value === "query") {
        return allMarkers.value?.filter(m => {
            const queryString = new String(q.value).replace(unifier, "").toLocaleLowerCase()
            const hitTitle = m.title.replace(unifier, "").toLocaleLowerCase().includes(queryString)
            const hitDesc = m.description?.replace(unifier, "").toLocaleLowerCase().includes(queryString)

            return hitTitle || hitDesc
        })
    }

    return allMarkers.value?.filter(m => {
        return m.group === currentSearchMode.value
    })
})

// Limit of menu list dropdown
const currentLimit = computed(() => {
    if (currentSearchMode.value === "query") return 10
    return 100
})

/**
 * ACCESSIBILITY
 */
// Registered key combos
const keys = useMagicKeys()
const shortcutKeyCombo = keys['Shift+Period']
const eraseKeyCombo = keys['Escape']

whenever(shortcutKeyCombo, () => {
    isSearchFocused.value = true
})
whenever(eraseKeyCombo, () => {
    resetAllFields('focusAfter')
})

// If query changes and has new value...
watch(q, (n, o) => {
    if (n) setSearchMode('query')
})

// Toggle menu if clicked outside
onClickOutside(searchBarWrapper, () => setSearchMode('query'))

/**
 * Player geolocation
 * Uses native JS to avoid changing leaflet library
 */
onMounted(() => {
    const playerBtnRef = document.querySelector('[data-to-players]')
    const flyToPlayers = new CustomEvent(`fly-to-players`, { bubbles: true })

    playerBtnRef?.addEventListener('click', () => {
        playerBtnRef.dispatchEvent(flyToPlayers)
    })
})

const hasPlayers = computed(() => Object.keys(props.players).length > 0)

/**
 * Marker geolocation
 * We need to use onUpdated hook because the list is not always rendered, and it often rebuilt.
*/
onUpdated(() => {
    const markerBtnRefs = document.querySelectorAll('[data-to-marker]')

    markerBtnRefs.forEach((btn) => {
        const { toMarker } = (btn as HTMLButtonElement).dataset

        if (!toMarker) return

        const flyToEvent = new CustomEvent(`fly-to-${toMarker}`, { bubbles: true })

        btn.addEventListener('click', () => btn.dispatchEvent(flyToEvent))
    })
})

/**
 * Advanced Search Mode
 * Uses filters to show specific kinds of markers in the search results
 */
const hasGroupFilter = computed(() => {
    return currentSearchMode.value !== 'query'
})

function handleCategorySwitch(g: MapMarkerGroup) {
    resetQueryValue()

    if (currentSearchMode.value !== g) {
        currentSearchMode.value = g
    } else {
        currentSearchMode.value = "query"
    }
}

/**
 * Custom Markers handling
 */
 onMounted(() => {
    customMarkersData.value = useLocalStorage('custom-markers', []).value

    document.addEventListener('refresh-custom-markers', () => {
        customMarkersData.value = useLocalStorage('custom-markers', []).value
    })
})

/**
 * Emit event to delete custom marker
 */
function emitDeleteCustomMarker(markerTitle: string) {
    const deleteCMarkerEvent = new CustomEvent(`delete-${markerTitle}`, { bubbles: true })

    searchBar.value?.dispatchEvent(deleteCMarkerEvent)
}

/**
 * EVENTS
 */
// Close Button event
function onCloseQuery() {
    resetAllFields("focusAfter")
}

/**
 * UTILITIES
 */
/**
 * Switches current search mode
 */
function setSearchMode(m: SearchMode) {
    currentSearchMode.value = m
}

/**
 * Resets active query in field
 */
function resetQueryValue() {
    q.value = ""
}

/**
 * Resets category and query states, default state
 */
function resetAllFields(actionAfter?: "focusAfter") {
    setSearchMode('query')

    resetQueryValue()

    if (actionAfter === "focusAfter") isSearchFocused.value = true
}
</script>

<template>
    <nav ref="searchBarWrapper" class="toolbar">
        <div ref="searchBar" class="search-w" :data-focused="shouldBeActive">
            <div class="input-w">
                <i class="search-icon ph-fill ph-magnifying-glass"></i>
                <input ref="qInput" class="" name="recherche" type="text" v-model="q" title="Rechercher le monde" placeholder="Ville, point d'intérêt…">

                <button v-if="hasGroupFilter || hasQuery" @click="onCloseQuery" class="close-btn" title="Enlever le filtre">
                    <i class="ph-light ph-x"></i>
                </button>

                <button v-if="hasPlayers" data-to-players class="player-btn" :tabindex="shouldBeActive ? 1 : 0" title="Aller à la position actuelle des joueurs">
                    <i class="pin-icon ph-fill ph-map-pin"></i>
                </button>
            </div>

            <ul class="search-results" v-if="shouldBeActive">
                <li v-for="m in filteredMarkers?.slice(0, currentLimit)" :key="m.title">
                    <button
                        class="search-item"
                        :class="`group-${m.group}`"
                        :data-to-marker="m.title"
                        tabindex="0"
                        :title="m.group === 'quests' ? 'Voir la quête' : 'Visiter ce lieu'"
                    >
                        <span class="title">{{ m.title }}</span>

                        <div class="desc" v-html="m.description"></div>

                        <div class="icon">
                            <i v-if="m.group === 'quests'" class="ph-fill ph-flag-banner"></i>
                            <i v-else-if="m.group === 'landmarks'" class="ph-fill ph-castle-turret"></i>
                        </div>
                    </button>

                    <!-- Custom marker actions -->
                    <div class="search-item-actions" v-if="m.group === 'custom'">
                        <!-- <button class="btn btn-info btn-icon btn-sm">
                            <i class="ph-light ph-pencil-simple-line"></i>
                        </button> -->

                        <button class="btn btn-danger btn-icon btn-sm" @click="emitDeleteCustomMarker(m.title)">
                            <i class="ph-light ph-trash"></i>
                        </button>
                    </div>
                </li>
            </ul>
        </div>

        <SearchMarkersTags
            :current-search-mode="currentSearchMode"
            :custom-markers="customMarkersData"
            @on-category-switch="handleCategorySwitch"
        />
    </nav>
</template>

<style lang="scss" scoped>
.toolbar {
    @media screen and (width >= 900px) {
        display: flex;
        gap: 1.5rem;
        align-items: start;
    }

    .search-w {
        padding: .5rem 1.2rem;
        width: calc(100% - 3rem);
        background: var(--white);
        border: 1px solid var(--slate-400);
        border-radius: 25px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
        pointer-events: all;

        @media screen and (width >= 900px) {
            width: 25%;
        }

        .input-w {
            $search-items-gap: .5rem;
            $search-icon-size: 1.2em;

            position: relative;
            padding-block: .2rem;
            display: flex;
            align-items: center;
            gap: $search-items-gap;

            input {
                display: block;
                min-width: 10rem;
                padding-inline-start: calc($search-icon-size + $search-items-gap);
                flex-grow: 1;

                &::placeholder {
                    color: var(--slate-400);
                }
            }

            .search-icon {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 0;
                font-size: $search-icon-size;
                color: var(--slate-400);
                pointer-events: none;
            }

            .player-btn, .close-btn {
                position: relative;
                isolation: isolate;
                aspect-ratio: 1 / 1;
                line-height: 1;
                border-radius: 50%;
                cursor: pointer;

                &::before {
                    display: block;
                    content: '';
                    position: absolute;
                    inset: -.4rem;
                    background-color: transparent;
                    border-radius: 50%;
                    z-index: -1;
                    outline-offset: -.2rem;
                    transition-property: background-color;
                    transition-duration: .2s;
                    transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
                }

                &:hover {
                    &::before {
                        background-color: var(--slate-300);
                    }
                }

                &:focus-visible {
                    &::before {
                        background-color: var(--slate-200);
                        outline: 1px dotted var(--slate-500);
                        outline: 4px auto var(--slate-900);
                    }
                }
            }

            .player-btn {
                margin-left: .25rem;
                font-size: 1.5em;
                color: var(--red-500);

                &:hover {
                    &::before {
                        background-color: var(--slate-300);
                    }
                }

                &:focus-visible {
                    &::before {
                        background-color: var(--slate-200);
                        outline: 1px dotted var(--slate-500);
                        outline: 4px auto var(--slate-900);
                    }
                }
            }

            .close-btn {
                font-size: 1.1em;
                color: var(--slate-500);
            }
        }

        .search-results {
            max-height: 20vh;
            overflow-y: auto;
            scrollbar-gutter: stable;

            @media screen and (width >= 900px) {
                max-height: 50vh;
            }

            &::-webkit-scrollbar,
            &::-webkit-scrollbar-thumb {
                width: 26px;
                border-radius: 13px;
                background-clip: padding-box;
                border: 10px solid transparent;
            }

            &::-webkit-scrollbar-thumb {
                background-color: var(--slate-300);
            }

            > * + * {
                margin-bottom: .33rem;
            }

            li {
                position: relative;

                &:hover:not(:has(a:hover)) {
                    background-color: var(--slate-100);

                    .title {
                        text-decoration: underline;
                    }
                }

                .search-item {
                    position: relative;
                    cursor: pointer;
                    padding: .4rem .25em;
                    padding-right: 2.75rem;
                    width: 100%;
                    outline-offset: -1px;

                    .title,
                    .desc {
                        display: block;
                        font-size: .85em;
                    }

                    .title {
                        font-weight: 500;
                        text-underline-offset: 2px;
                    }
                    .desc {
                        color: var(--slate-500);

                        :deep(a) {
                            text-underline-offset: 2px;
                            text-decoration: underline;

                            &:hover {
                                color: var(--green-500);
                            }
                        }
                    }

                    .icon {
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        right: .75rem;
                        color: var(--slate-400);
                    }

                    &:focus-visible {
                        outline: 1px dotted var(--slate-500);
                        outline: 4px auto var(--slate-900);

                        .title {
                            text-decoration: underline;
                        }
                    }

                    /**
                    * Rules for specific groups (capitals, cities, etc...)
                    */
                    &.group-capitals {
                        .title {
                            font-weight: 600;
                        }
                    }

                    &.group-quests {
                        &:hover:not(:has(a:hover)) {
                            .icon {
                                color: var(--red-500);
                            }
                        }
                    }
                }

                /**
                * Custom markers actions
                */
                .search-item-actions {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    right: .25em;
                    transition-property: visibility, opacity;
                    transition-duration: .2s;
                    transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
                }

                &:hover {
                    .search-item-actions {
                        visibility: visible;
                        opacity: 1;
                        pointer-events: all;
                    }
                }

                &:not(:hover) {
                    .search-item-actions {
                        visibility: hidden;
                        opacity: 0;
                        pointer-events: none;
                    }
                }
            }
        }

        &[data-focused="true"] {
            margin-bottom: 1em;
            .input-w {
                border-bottom: 1px solid var(--slate-200);
                margin-bottom: .5rem;
                padding-bottom: .5rem;

                input {
                    padding-block-start: .2rem;
                }
            }
        }
    }
}
</style>