<!--

    #VUE3 Done

    <px-toggle-button-list
        :items="fruits"
        items-value-property="id"
        items-label-property="name"
        items-key-property="id"
    >
        <template v-slot:item="{ item, checked }" :style="{color: checked ? 'green' : null}">{{ item.name }}</template>
    </px-toggle-button-list>


    Supported variants:

    - connected - draws buttons in a single connected group (no gaps between buttons)
    - connected outline - same as connected but uses an outline button style
    - wrap - allows the button container to wrap

-->
<template>
    <div
        :class="bem({ readonly: readonly, ...variantsMap })"
        :role="multiSelect ? null : 'radiogroup'"
    >
        <component
            v-for="item in items"
            :key="getItemKey(item)"
            :is="isVariant('radio') ? 'px-radio-button' : 'px-toggle-button'"
            :class="[
                bem('button'),
                buttonClass,
                isItemSelected(item) ? buttonClass + '--checked' : null,
            ]"
            :icon="icon"
            :iconSize="iconSize"
            :variant="isVariant('radio') ? 'default' : variant"
            :checked="isItemSelected(item)"
            :disabled="readonly"
            @checked="itemCheck(item)"
            @unchecked="itemUncheck(item)"
            :role="multiSelect ? 'switch' : 'radio'"
        >
            <slot name="item" :item="item" :checked="isItemSelected(item)">
                {{ getItemLabel(item) }}
            </slot>
        </component>
    </div>
</template>

<script>
import PxBaseItemsSelect from '../bases/PxBaseItemsSelect.vue';
import PxBaseVariants from '../bases/PxBaseVariants.vue';
import PxRadioButton from './PxRadioButton.vue';
import PxToggleButton from './PxToggleButton.vue';

export default {
    name: 'px-toggle-button-list',

    mixins: [PxBaseItemsSelect, PxBaseVariants],
    components: { PxToggleButton, PxRadioButton },
    props: {
        /**
         * The icon that gets displayed when a button is checked
         */
        icon: { type: String, default: null },

        /**
         * The size of the icon (this must be a number and will override the size attribute of the icon).
         */
        iconSize: { type: Number, default: 1 },

        /**
         * Class that gets set on the individual buttons
         */
        buttonClass: { type: String, default: null },

        /**
         * Places
         */
        readonly: { type: Boolean, default: false },

        //
        multiSelect: { type: Boolean, default: false },

        /**
         * When true, ensures that one item is always selected (radio button behavior)
         */
        requireSelection: { type: Boolean, default: true },
    },
    computed: {
        calculatedInputGroup() {
            return this.inputGroup || this.getGeneratedId('group-');
        },
        updateMode() {
            if (this.multiSelect) {
                return 'multi';
            }
            return 'single';
        },
    },
    methods: {
        itemCheck(item) {
            this.selectItems(item);
        },
        itemUncheck(item) {
            // Prevent unchecking if requireSelection is true and this is the last selected item
            if (
                this.requireSelection &&
                !this.multiSelect &&
                this.selectedItems.length === 1 &&
                this.isItemSelected(item)
            ) {
                return;
            }
            this.unselectItems(item);
        },
    },
};
</script>

<style lang="scss">
@use '../styles/px.scss' as *;
.px-toggle-button-list {
    $block: get-block-name(&);

    // other variants that were in code

    // gap: isVariant('connected') ? 0 : null,
    // flexWrap: isVariant('wrap') ? 'wrap' : null
    // :vertical="isVariant('vertical')"

    // variant: connected

    gap: 0.6em;
    display: flex;

    &--connected {
        gap: 0;
    }

    &--connected & {
        &__button:not(:first-child) {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
        &__button:not(:last-child) {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        &__button {
            &:not(:hover) {
                box-shadow: none;
            }
            &:hover {
                z-index: 1;
            }
        }
    }
    &--connected.#{$block}--outline & {
        &__button {
            &:not(:last-child) {
                border-right: none;
            }
        }
    }
}
</style>
