<template>
    <core-search-mode>
        <template #default="{ clickEvents, query, modelValue }">
            <span class="icon"
                :class="$attrs.class"
                v-if="query">
                <a class="is-naked has-text-dark"
                    v-on="clickEvents">
                    <fal :key="query">
                        <template v-if="modelValue === 'startsWith'">
                            <falt :value="query[0]"
                                :transform="`shrink-2 ${query[1] ? 'left-10' : '' }`"/>
                            <falt :value="query[1]"
                                transform="shrink-2"
                                v-if="query[1]"/>
                            <fa :icon="faAsterisk" transform="shrink-6 right-10"/>
                        </template>
                        <template v-else-if="modelValue === 'full'">
                            <fa :icon="faAsterisk" transform="shrink-6 left-10"/>
                            <falt :value="query[0]" transform="shrink-2"/>
                            <fa :icon="faAsterisk" transform="shrink-6 right-10"/>
                        </template>
                        <template v-else-if="modelValue === 'endsWith'">
                            <fa :icon="faAsterisk"
                                :transform="`shrink-6 ${query[1] ? 'left-10' : '' }`"/>
                            <falt :value="query[0]"
                                :transform="`shrink-2 ${query[1] ? '' : 'right-10' }`"/>
                            <falt :value="query[1]"
                                transform="shrink-2 right-10"
                                v-if="query[1]"/>
                        </template>
                        <template v-else-if="modelValue === 'exactMatch'">
                            <falt :value="query[0]"
                                :transform="`shrink-2 ${query[2]
                                    ? 'left-10'
                                    : (!query[1] ? 'right-10' : '')}`"/>
                            <falt :value="query[1]"
                                :transform="`shrink-2 ${query[2]
                                    ? ''
                                    : 'right-10' }`"
                                v-if="query[1]"/>
                            <falt :value="query[2]"
                                transform="shrink-2 right-10"
                                v-if="query[2]"/>
                        </template>
                        <template v-else-if="modelValue === 'doesntContain'">
                            <falt class="is-strikethrough" :value="query[0]"
                                :transform="`shrink-2 ${query[2]
                                    ? 'left-10'
                                    : (!query[1] ? 'right-10' : '')}`"/>
                            <falt class="is-strikethrough" :value="query[1]"
                                :transform="`shrink-2 ${query[2]
                                    ? ''
                                    : 'right-10' }`"
                                v-if="query[1]"/>
                            <falt class="is-strikethrough" :value="query[2]"
                                transform="shrink-2 right-10"
                                v-if="query[2]"/>
                        </template>
                        <template v-else-if="modelValue === 'searchProvider'">
                            <fa :icon="faAlgolia"/>
                        </template>
                    </fal>
                </a>
            </span>
        </template>
    </core-search-mode>
</template>

<script>
import {
    FontAwesomeIcon as Fa, FontAwesomeLayersText as Falt, FontAwesomeLayers as Fal,
} from '@fortawesome/vue-fontawesome';
import { faAsterisk } from '@fortawesome/free-solid-svg-icons';
import { faAlgolia } from '@fortawesome/free-brands-svg-icons';
import CoreSearchMode from '../renderless/CoreSearchMode.vue';

export default {
    name: 'SearchMode',

    components: {
        CoreSearchMode, Fa, Fal, Falt,
    },

    data: () => ({
        faAlgolia,
        faAsterisk,
    }),
};
</script>

<style lang="scss">
    .is-strikethrough {
        text-decoration: line-through;
    }
</style>
