<script setup lang="ts">
    import { computed } from 'vue';
    import type { UISegmentOption } from '@/UI-kit/types/UI/ui-segment.type';

    const props = withDefaults(
        defineProps<{
            modelValue: string | number;
            options: readonly UISegmentOption<string | number>[];
            /** Значения вкладок, у которых разрешён перенос текста */
            wrapForValues?: readonly (string | number)[];
        }>(),
        {
            wrapForValues: () => [],
        },
    );

    const emit = defineEmits<{
        'update:modelValue': [value: string | number];
    }>();

    const wrapSet = computed(() => new Set(props.wrapForValues ?? []));

    const isWrapped = (value: string | number) => wrapSet.value.has(value);

    const select = (value: string | number) => {
        if (value === props.modelValue) {
            return;
        }
        emit('update:modelValue', value);
    };
</script>

<template>
    <div class="ui-segment" role="tablist">
        <button
            v-for="item in options"
            :key="String(item.value)"
            type="button"
            role="tab"
            class="ui-segment__btn"
            :class="{
                'ui-segment__btn--active': modelValue === item.value,
                'ui-segment__btn--wrap': isWrapped(item.value),
            }"
            :aria-selected="modelValue === item.value"
            @click="select(item.value)"
        >
            {{ item.label }}
        </button>
    </div>
</template>

<style scoped lang="scss">
    @use '@/UI-kit/assets/scss/mixins/index.mixin' as *;

    .ui-segment {
        display: flex;
        gap: 0;
        width: 100%;
        padding: 0;
        background: transparent;
        border-bottom: 1.5px solid var(--gray-300);
    }

    .ui-segment__btn {
        @include text(15px, 500, 1, var(--gray-900));

        box-sizing: border-box;
        flex: 1;
        min-height: 42px;
        padding: 0 4px 10px;
        cursor: pointer;
        background: transparent;
        border: 0;
        border-bottom: 2px solid transparent;
        margin-bottom: -1.5px;
        transition:
            color 0.16s ease,
            border-color 0.16s ease,
            font-weight 0.16s ease;

        &--wrap {
            white-space: normal;
        }

        &--active {
            @include text(15px, 600, 1, var(--blue-500));

            border-bottom-color: var(--blue-500);
        }

        &:active:not(.ui-segment__btn--active) {
            color: var(--gray-900);
        }
    }
</style>
