<template functional>
    <div
        :class="[data.class, data.staticClass, 'sf-quantity-selector']"
        :style="[data.style, data.staticStyle]"
    >
        <component
            :is="injections.components.SfButton"
            :disabled="
                props.disabled ||
                    Boolean(props.min !== null && props.qty <= props.min)
            "
            class="sf-button--pure sf-quantity-selector__button"
            data-testid="decrease"
            @click="
                $options.handleInput(
                    Number(props.qty) - 1,
                    listeners,
                    props.min,
                    props.max,
                )
            "
        >
            &minus;
        </component>
        <component
            :is="injections.components.SfInput"
            type="number"
            :value="Number(props.qty)"
            :disabled="props.disabled"
            class="sf-quantity-selector__input"
            data-testid="sf-quantity-selector input"
            @input="
                $options.handleInput($event, listeners, props.min, props.max)
            "
            @blur="$options.handleBlur(listeners)"
        />
        <component
            :is="injections.components.SfButton"
            :disabled="
                props.disabled ||
                    Boolean(props.max !== null && props.qty >= props.max)
            "
            class="sf-button--pure sf-quantity-selector__button"
            data-testid="increase"
            @click="
                $options.handleInput(
                    Number(props.qty) + 1,
                    listeners,
                    props.min,
                    props.max,
                )
            "
        >
            +
        </component>
    </div>
</template>
<script>
    import SfInput from '../../atoms/SfInput/SfInput.vue';
    import SfButton from '../../atoms/SfButton/SfButton.vue';

    export default {
        name: 'SfQuantitySelector',
        inject: {
            components: {
                default: {
                    SfInput,
                    SfButton,
                },
            },
        },
        model: {
            prop: 'qty',
        },
        props: {
            /** Quantity */
            qty: {
                type: [Number, String],
                default: 1,
            },
            disabled: {
                type: Boolean,
                default: false,
            },
            /** Minimum allowed quantity */
            min: {
                type: Number,
                default: null,
            },
            /** Maximum allowed quantity */
            max: {
                type: Number,
                default: null,
            },
        },
        handleInput(qty, listeners, min, max) {
            // adjust qty per min/max if needed
            const minimum = min || 1;
            if (qty < minimum || isNaN(qty)) {
                qty = minimum;
            } else if (max !== null && qty > max) {
                qty = max;
            }
            return listeners.input && listeners.input(qty);
        },
        handleBlur(listeners) {
            return listeners.blur && listeners.blur();
        },
    };
</script>

<style lang="scss">
    @import '@borngroup/lightswitch-storefront-ui-shared/styles/components/atoms/SfQuantitySelector.scss';
</style>
