<script setup lang="ts">
import { ref } from 'vue';
import { RouterLink } from 'vue-router';
import { onClickOutside } from '@vueuse/core'
import { usePromoSidebar } from '../../stores/promo_sidebar';
import { usePromoScene } from '../../stores/promo_scene';

const sidebar = usePromoSidebar()
const sidebar_scene = usePromoScene()
const sidebar_obj = ref()
// onClickOutside(sidebar_obj, () => sidebar.close())

</script>
<template>
    <div class="sidebar" :class="[{ 'open': sidebar.is_open }]" ref="sidebar_obj">
        <a href="#" @click.prevent="sidebar.close" class="sidebar-close">
            <i-mdi-close />
        </a>
        <div class="sidebar-content">
            <template v-if="!sidebar.is_open"></template>
            <template v-else-if="(sidebar.description && sidebar.title)">
                <h2>{{ sidebar.title }}</h2>
                <template v-for="p in sidebar.description.split('\n')">
                    <p>{{ p }}</p>
                </template>
                <RouterLink class="btn" :to="`/promo/main/${sidebar.target}`" v-if="sidebar.target">
                    {{ sidebar.target_name }}
                </RouterLink>
            </template>
            <template v-else>
                <span class="sidebar-list-item" v-for="item in sidebar_scene.list">
                    <input type="checkbox" v-model="item.is_enabled" :id="item.name" />
                    <label :for="item.name">
                        <h3>{{ item.name }}</h3>
                        <template v-for="p in item.description.split('\n')">
                            <p>{{ p }}</p>
                        </template>
                    </label>
                </span>
            </template>
        </div>
    </div>
</template>
<style scoped lang="scss">

.sidebar {
    width: 23vw;
    background-color: #fff;
    position: fixed;
    top: 0;
    right: -27vw;
    bottom: 0;
    transition: all 300ms linear;
    line-height: 1.25;

    padding: 3rem 2rem 2rem;

    &.open {
        right: 0
    }

    &-close {
        position: absolute;
        left: 1.5rem;
        top: 0.5rem;
        font-size: 2rem;
        color: black;
    }

    &-content {
        max-height: 100%;
        overflow: auto;
    }

    &-list-item {
        display: flex;
        label {
            flex-grow: 1;
            margin-left: 0.25rem
        }
    }

    h2 {
        text-align: center;
        font-size: 2rem;
        margin: 1rem
    }

    p,
    h3 {
        margin: 0.5rem 0;
    }

    p {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1.5rem;
        font-weight: bold
    }

    .btn {
        display: block;
        margin: 0 auto;

        background: #4FD1C5;
        background: linear-gradient(90deg, rgba(129, 230, 217, 1) 0%, rgba(79, 209, 197, 1) 100%);
        color: #313133;
        transition: .2s linear;

        padding: 1rem 1.5rem;
        font-size: 1.25rem;
        font-weight: 700;

        text-align: center;
        text-decoration: none;

        align-items: center;
        justify-content: center;
        text-transform: uppercase;
        letter-spacing: 1.3px;

        border-radius: 1000px;

        box-shadow: 12px 12px 24px rgba(79, 209, 197, .64);
    }

    .btn:hover {
        box-shadow: 0 0 0 2px white, inset 0 0 0 4px #3C82F8;
    }
}
</style>