<template>
    <div class="combo-box-comp" :class="{ 'combo-box-comp--opened': opened }" v-click-outside="closeList">
        <div class="combo-box-comp__input" @click="toggleOpened()">
            <div class="combo-box-comp__input-text">
                {{ displayedItem?.title }}
            </div>
            <FontAwesomeIcon class="combo-box-comp__input-toggle" icon="chevron-down" />
        </div>
        <Transition name="combo-box-comp__list--transition">
            <div class="combo-box-comp__list" v-if="opened">
                <div class="combo-box-comp__item" v-for="item in props.list" :key="item" @click="selectItem(item.id)">
                    {{ item.title }}
                </div>
            </div>
        </Transition>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { ComboBoxItem } from "@/types/index";
import vClickOutside from "@/directives/ClickOutside";

const props = defineProps<{ list: ComboBoxItem[]; modelValue: ComboBoxItem | undefined }>();

const emit = defineEmits(["update:modelValue"]);

const displayedItem = computed(() => props.modelValue);

const opened = ref(false);

function toggleOpened() {
    opened.value ? closeList() : openList();
}

function openList() {
    opened.value = true;
}

function closeList() {
    opened.value = false;
}

function selectItem(id: number) {
    emit(
        "update:modelValue",
        props.list.find((x) => x.id === id)
    );
    closeList();
}
</script>

<style lang="scss">
.combo-box-comp {
    $p: &;

    position: relative;
    display: inline-block;
    height: r(50);
    min-width: r(200);
    font-size: r(10);

    &__input {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 100%;
        padding: 0 r(15);
        background: color("ui-background");
        border-radius: r(10);
        border: r(2) solid color("border");
        cursor: pointer;
        transition: border-color 0.18s ease;

        &:hover {
            border: r(2) solid color("border-hover");
        }
    }

    &__input-toggle {
        transition: transform 0.18s ease;
    }

    &__list {
        position: relative;
        margin: 0 r(8);
        background: color("ui-background");
        border: r(2) solid color("border-active");
        border-top-width: 0;
        z-index: 10;

        &--transition {
            &-enter-active,
            &-leave-active {
                transition: opacity 0.18s ease;
            }
            &-enter-from,
            &-leave-to {
                opacity: 0;
            }
        }
    }

    &__item {
        cursor: pointer;
        padding: r(7);

        transition: background-color 0.18s ease;

        &:hover {
            background: color("ui-background-hover");
        }
    }

    &--opened {
        #{$p}__input {
            border: r(2) solid color("border-active");
        }
        #{$p}__input-toggle {
            transform: rotate(180deg);
        }
    }
}
</style>
