<!--
    #VUE3 Done

    Default variant style keys:

        - controls:dropdown:button - style for the default button (that gets clicked to open the popup)
        - controls:dropdown:popup - style for the outer container for the popup
        - controls:dropdown:item - style for the individual clickable items in the popup

-->

<template>
    <PxPopupButton
        :class="bem(variantsMap)"
        :popupClass="[bem('popup', variantsMap), popupClass]"
        :tag="'button'"
        :label="buttonLabel"
        :trigger="'click'"
        v-model:popupVisible="dropdownExpanded"
        v-bind="floatProps"
        ref="popup"
    >
        <template #default>
            <slot name="selected" :item="selectedItem" :label="selectedLabel">
                <span v-if="selectedLabel">{{ selectedLabel }}</span>
                <span v-else :class="[bem('placeholder'), placeholderClass]">
                    {{ placeholder }}
                </span>
            </slot>

            <slot name="icon">
                <px-icon v-if="icon" :class="bem('icon')" :src="icon" v-bind="iconProps" />
            </slot>
        </template>

        <template #popup>
            <button
                v-for="item in items"
                :key="getItemKey(item)"
                :class="[
                    bem('item', {
                        selected: isItemSelected(item),
                        ...variantsMap,
                    }),
                    itemClass,
                ]"
                :variant="variant"
                @click="itemClick(item)"
            >
                <slot name="item" :item="item" :checked="isItemSelected(item)">
                    {{ getItemLabel(item) }}
                </slot>
            </button>
        </template>
    </PxPopupButton>
</template>

<script>
import PxBase from '../bases/PxBase.vue';
import PxBaseItemsSelect from '../bases/PxBaseItemsSelect.vue';
import PxBaseIcon from '../bases/PxBaseIcon.vue';
import PxIcon from './PxIcon.vue';
import { svgArrow } from '../utils/svgIcons';
import PxPopupButton from './PxPopupButton.vue';

export default {
    name: 'px-dropdown',
    mixins: [PxBaseItemsSelect, PxBase, PxBaseIcon],
    components: { PxPopupButton, PxIcon },
    props: {
        /**
         *  Text that will be displayed by default in the selected slot when no item has been selected.
         */
        placeholder: { type: String, default: null },

        /**
         *  Class applied to the placeholder element.
         */
        placeholderClass: { type: String, default: null },

        /**
         *  Class set on each of the generated menu items.
         */
        itemClass: { type: String, default: null },

        /**
         *  Class set on the popup.
         */
        popupClass: { type: String, default: null },

        /**
         * The icon used for the dropdown arrow.
         */
        icon: {
            type: String,
            default: svgArrow({
                angle: 'down',
                chevron: true,
                strokeWidth: 4,
            }),
        },

        /**
         * The icon used for the dropdown arrow.
         */
        iconProps: {
            type: Object,
            default: () => {
                return {
                    size: '0.33em',
                };
            },
        },

        /**
         *  Properties that get set on the popup object (see PxPopup for details).
         */
        floatProps: {
            type: Object,
            default: () => {
                return {
                    placement: 'bottom-start',
                };
            },
        },

        buttonLabel: { type: String, default: null },

        autoSelectFirst: { type: Boolean, default: true },
    },
    data() {
        return {
            dropdownExpanded: false,
        };
    },
    computed: {
        selectedLabel() {
            return this.getItemLabel(this.selectedItem);
        },
    },
    methods: {
        itemClick(item) {
            this.selectItemOnly(item);
            //this.$refs.float.hide();
            this.dropdownExpanded = false;
        },
    },
};
</script>

<style lang="scss">
@use '../styles/px.scss' as *;
@use '@thinkpixellab-public/px-styles/src/modules/controls' as *;

.px-dropdown {
    justify-content: space-between;

    &__icon {
        margin-inline-start: 0.75em;
        transform: scale(2);
    }

    // popup

    $dropdown-popup: popup(
        (
            display: flex,
            flex-direction: column,
        )
    );

    &__popup {
        @include css-map($dropdown-popup);
    }

    // "default" variant

    &--default {
        $dropdown-button: flat-merge(
            get('controls.dropdown.button', ()),
            (
                justify-content: space-between,
            )
        );

        @include button($dropdown-button);

        // placeholder
        @include bem(placeholder) {
            $placeholder: get('controls.dropdown.placeholder', ());
            $placeholder: control-placeholder-style($placeholder);
            @include css-map($placeholder);
        }
    }

    &__item {
        @include button-base();

        $dropdown-item: get('controls.dropdown.item', ());
        $dropdown-item: flat-merge(
            $dropdown-item,
            (
                text-align: left,
                justify-content: stretch,
                border-radius: 0,
                box-shadow: none,
                background-color: transparent,
                color: inherit,
                cursor: pointer,
                transition: transition(background-color color, $dur: 100ms),
                hover: (
                    background-color: accent(),
                    color: contrast-color(accent()),
                ),
            )
        );

        @include css-map($dropdown-item);
        @include first-last-radius();
    }
}
</style>
