<!-- Keyword filter component with all it's data -->
<script setup lang="ts">
import Popover from '../base/Popover.vue';
import IconWarning from '../icons/IconWarning.vue';
import IconArrowDown from '../icons/IconArrowDown.vue';
import Button from '../base/Button.vue';
import Checkboxes from '../form/Checkboxes.vue';
import { inject, ref, watchEffect } from 'vue';
import { useGettext } from 'vue3-gettext';
import { AppConfigType, OptionType } from '~src/admin/types';

// Translations
const { $gettext } = useGettext();

// Get plugin config
const config: AppConfigType = inject('pluginConfig');

// Emits
const emit = defineEmits<{
    updateSelectedKeywords: [labels: string[]];
}>();

// Get keywords from settings
const keywords = ref(config.wordpress.keywords);

// Control keywords
const selectedKeywords = ref<string[]>([]);

// Transform keywords to options
const options: OptionType[] = keywords.value.map((keyword) => {
    return {
        label: keyword,
        value: keyword,
    };
});

// Remove a specific keyword
const removeKeyword = (label: string) => {
    selectedKeywords.value = selectedKeywords.value.filter((keyword) => keyword !== label);
};

defineExpose({
    removeKeyword,
});

// Whenever selectedKeywords changes update the parent component
watchEffect(() => {
    emit('updateSelectedKeywords', selectedKeywords.value);
});

// Account type
const isAccountFree = inject<boolean>('isAccountFree');
</script>

<template>
    <div class="group">
        <Popover width="476px" :disabled="!isAccountFree && keywords.length === 0">
            <!-- Popover trigger -->
            <template #trigger>
                <div class="cursor-pointer flex items-center gap-1.5 text-primary-900 group-hover:text-primary-300">
                    <span>
                        {{ $gettext('Key words') }}
                        <span v-if="selectedKeywords.length !== 0">{{ `(${selectedKeywords.length})` }}</span>
                    </span>
                    <IconArrowDown class="transition-transform group-hover:rotate-180" />
                </div>
            </template>
            <!-- Popover trigger -->

            <!-- Popover body -->
            <template #body v-if="isAccountFree">
                <div class="flex flex-col items-center gap-5 px-10 py-10 text-center text-base-500">
                    <IconWarning />
                    <h2 class="text-lg leading-lg font-bold">{{ $gettext('Upgrade needed') }}</h2>
                    <p>
                        {{ $gettext('Key words are available only on a paid plan.') }}
                        <br />
                        {{ $gettext('Upgrade account to use this feature.') }}
                    </p>
                    <Button :text="$gettext('Upgrade to paid plan')" size="large" />
                </div>
            </template>

            <template #body v-else>
                <div class="p-4">
                    <Checkboxes
                        class="flex items-start justify-start gap-x-5 gap-y-2"
                        :options="options"
                        name="keywords"
                        size="small"
                        selection="multiple"
                        v-model="selectedKeywords"
                    />
                </div>
            </template>
            <!-- Popover body -->
        </Popover>
    </div>
</template>

<style scoped></style>
