<script setup lang="ts">
import { ref, watch } from 'vue';
import { RouterLink, useRoute } from 'vue-router';
import { usePromoSidebar } from '../stores/promo_sidebar';
import { usePromoScene } from '../stores/promo_scene';

const sidebar = usePromoSidebar()
const sidebar_scene = usePromoScene()
const route = useRoute()

const clickable_obj = ref()

watch(clickable_obj, () => {
    sidebar.open(clickable_obj.value);
})
watch(() => sidebar.id_clickable, () => {
    if (sidebar.is_open) {
        clickable_obj.value = sidebar.id_clickable
    }
})
</script>
<template>
    <div class="sidebar" :class="[{ 'open': sidebar.is_open }]">
        <template v-if="!sidebar.is_open"></template>
        <template v-else>
            <div class="sidebar-content">
                <h2>{{ sidebar_scene.name }}</h2>
                <div class="sidebar-accordion" :class="[{ 'open': sidebar.isAccOpen('clickable') }]">
                    <div class="sidebar-accordion-title" @click="sidebar.toggleAccordion('clickable')">
                        <i-mdi-minus-circle v-if="sidebar.isAccOpen('clickable')" />
                        <i-mdi-plus-circle v-else />
                        <h3>Виртуальный тур</h3>
                    </div>

                    <div class="sidebar-accordion-content" v-if="sidebar.isAccOpen('clickable')">
                        <div class="sidebar-list-item" v-for="(item, index) in sidebar_scene.clickable">
                            <input type="radio" name="clickable" v-model="clickable_obj" :value="item.id"
                                :id="item.id.toString()"  />
                            <label :for="item.id.toString()">{{ index + 1 }} {{ item.name }}</label>
                        </div>
                    </div>
                </div>
                <div class="sidebar-accordion" :class="[{ 'open': sidebar.isAccOpen('obj') }]">
                    <div class="sidebar-accordion-title" @click="sidebar.toggleAccordion('obj')">
                        <i-mdi-minus-circle v-if="sidebar.isAccOpen('obj')" />
                        <i-mdi-plus-circle v-else />
                        <h3>Объекты</h3>
                    </div>

                    <div class="sidebar-accordion-content" v-if="sidebar.isAccOpen('obj')">
                        <div class="sidebar-list-item" v-for="item in sidebar_scene.visible">
                            <input type="checkbox" v-model=item.is_enabled :value="item.id" :id="item.id.toString()" />
                            <label :for="item.id.toString()">{{ item.name }}</label>
                        </div>
                    </div>
                </div>

                <div class="sidebar-accordion" :class="[{ 'open': sidebar.isAccOpen('desc') }]">
                    <div class="sidebar-accordion-title" @click="sidebar.toggleAccordion('desc')">
                        <i-mdi-minus-circle v-if="sidebar.isAccOpen('desc')" />
                        <i-mdi-plus-circle v-else />
                        <h3>Описание</h3>
                    </div>
                    <div class="sidebar-accordion-content" v-if="sidebar.isAccOpen('desc')">
                        <template
                            v-for="p in (sidebar.description || sidebar_scene.description || '').replace(/(\n|\r)+/g, '\n').split('\n')">
                            <p>{{ p }}</p>
                        </template>
                        <RouterLink :to="`/${route.params.item}/${sidebar.target}`" v-if="sidebar.target">
                            Перейти
                        </RouterLink>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>