<template>
    <hy-button
        class="hy-filter-button"
        size="md"
        :id="uniqueId"
        @click="open = !open"
        :class="{ 'hy-floating-badge': active }"
        v-bind="buttonOptions"
    >
        <slot name="button" v-if="$slots.button"></slot>

        <hy-smart-menu v-if="mode == 'smartMenu'" v-model="open" :reference="`#${uniqueId}`" v-bind="smartMenuOptions">
            <template #header="{ menuType }" v-if="$slots.header">
                <slot name="header" :menuType="menuType"></slot>
            </template>

            <template #content="{ menuType }" v-if="$slots.content">
                <slot name="content" :menuType="menuType"></slot>
            </template>

            <template #footer="{ menuType }" v-if="$slots.footer">
                <slot name="footer" :menuType="menuType"></slot>
            </template>
        </hy-smart-menu>

        <hy-popover v-if="mode == 'popover'" v-model="open" :reference="`#${uniqueId}`" v-bind="popoverOptions">
            <template v-if="$slots.header">
                <slot name="header"></slot>
            </template>

            <template v-if="$slots.content">
                <slot name="content"></slot>
            </template>

            <template v-if="$slots.footer">
                <slot name="footer"></slot>
            </template>
        </hy-popover>
    </hy-button>
</template>

<script>
import HyButton from "./Button.vue";
import HySmartMenu from "./SmartMenu.vue";
import HyPopover from "./Popover.vue";
import id from "../utils/id.js";

export default {
    name: "HyFilterButton",
    props: {
        active: {
            type: Boolean,
            default: false,
        },
        mode: {
            type: String,
            default: "popover",
            validator: (value) => ["smartMenu", "popover"].includes(value),
        },
        variantButton: {
            type: String,
            default: null,
        },
        variantPopover: {
            type: String,
            default: "match",
        },
    },
    data() {
        return {
            open: false,
            uniqueId: `hy-filter-button-${id()}`,
        };
    },
    computed: {
        // Props for Popover
        popoverOptions() {
            let allowedKeys = [
                "headline",
                "description",
                "zIndex",
                "hideOnClickOutside",
                "doConstrainHeight",
                "minWidth",
                "maxWidth",
                "maxHeight",
                "placement",
                "offsetMainAxis",
                "offsetCrossAxis",
            ];

            let inheritedProps = Object.fromEntries(Object.entries(this.$attrs).filter(([key]) => allowedKeys.includes(key)));

            return {
                ...inheritedProps,
                variant: this.variantPopover,
            };
        },

        // Props for HySmartMenu
        smartMenuOptions() {
            let allowedKeys = [
                "headline",
                "description",
                "zIndexModal",
                "background",
                "showScrollbars",
                "doBSL",
                "swipeToCloseEnabled",
                "dismissible",
                "forceFullHeightOnMobile",
                "doBlurBg",
                "zIndexPopover",
                "hideOnClickOutside",
                "doConstrainHeight",
                "minWidth",
                "maxWidth",
                "maxHeight",
                "placement",
                "offsetMainAxis",
                "offsetCrossAxis",
            ];

            let inheritedProps = Object.fromEntries(Object.entries(this.$attrs).filter(([key]) => allowedKeys.includes(key)));

            return {
                ...inheritedProps,
                variant: this.variantPopover,
            };
        },

        // Props for HyButton
        buttonOptions() {
            let allowedKeys = ["loading", "progress", "progressWidth", "disabled", "extend", "size"];

            let inheritedProps = Object.fromEntries(Object.entries(this.$attrs).filter(([key]) => allowedKeys.includes(key)));

            return {
                ...inheritedProps,
                variant: this.variantButton,
            };
        },
    },
    components: {
        HyButton,
        HySmartMenu,
        HyPopover,
    },
};
</script>

<style lang="scss">
.hy-filter-button {
    flex: 0;

    & > button {
        border-radius: 999px;
    }

    &::before {
        top: 5px !important;
        right: 5px !important;
        padding: 3px !important;
    }
}
</style>
