<!--
    Describe this component...
-->
<template>
    <button
        v-if="!separator && isVisible"
        :class="bem({ clicked, disabled: isDisabled })"
        :title="hint"
        :disabled="isDisabled"
        @click="onClick"
    >
        <span
            ref="icon"
            v-if="iconSize"
            :class="[bem('icon'), iconClass]"
            :style="{ minWidth: cssEmFallback(iconSize) }"
        >
            <PxIcon :src="icon" :size="cssEmFallback(iconSize)" size-bias="width" />
        </span>
        <span :class="bem('label')">
            {{ label }}
        </span>
    </button>

    <hr v-else-if="visible" :class="bem({ separator: true })" :visible="isVisible" />
</template>

<script>
import PxIcon from './PxIcon.vue';

export default {
    name: 'px-menu-item',
    components: { PxIcon },
    // mixins: [ Mixin ],
    props: {
        separator: { type: Boolean, default: false },
        label: { type: String, default: null },
        hint: { type: String, default: null },
        items: { type: Array, default: null },
        icon: { type: String, default: null },
        iconSize: { type: [String, Number], default: 1 },
        iconClass: { type: String, default: null },
        disabled: { type: [Function, Boolean], default: false },
        visible: { type: [Function, Boolean], default: true },
        handler: { type: Function, default: null },
        data: { default: null },
    },
    data() {
        return {
            // used only to track visual state
            clicked: false,
        };
    },
    computed: {
        isVisible() {
            if (typeof this.visible == 'boolean') {
                return this.visible;
            }
            if (typeof this.visible == 'function') {
                return this.visible(this.data);
            }
            return true;
        },
        isDisabled() {
            if (typeof this.disabled == 'boolean') {
                return this.disabled;
            }
            if (typeof this.disabled == 'function') {
                return this.disabled(this.data);
            }
            return false;
        },
    },
    // watch: {},
    mounted() {
        this.clicked = false;
    },
    methods: {
        onClick() {
            this.clicked = true;

            if (typeof this.handler == 'function') {
                this.handler(this.data);
            }
            setTimeout(() => {
                this.$emit('done');
            });
        },
    },
};
</script>

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

.px-menu-item {
    @include control-reset();
    font-size: inherit;
    background-color: inherit;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 0.5em;
    min-width: 7em;
    max-width: 20em;
    white-space: wrap;
    line-height: 1.33;
    text-align: left;
    padding: 0.33em 1em;

    &__icon {
        margin-left: -0.25em;
        flex: none;
        display: flex;
        align-items: center;
    }

    &__label {
        white-space: nowrap;
    }

    &--clicked,
    &:hover {
        background-color: clr(select);
        color: contrast-color(clr(select));
    }

    &:disabled {
        background-color: transparent !important;
        color: inherit !important;
        opacity: 0.5;
    }

    &--separator {
        width: 100%;
        background-color: currentColor;
        opacity: 0.25;
        height: 1px;
        min-height: 1px;
        max-height: 1px;
        padding: 0;
    }
}
</style>
