<template>
    <div>
        <div class="overlay-setting" :class="{ show: isOpen }" @click="isOpen = !isOpen"></div>

        <div class="app-settings" :class="{ active: isOpen }">
            <a href="javascript:;" id="settingbutton" class="setting" @click="isOpen = !isOpen" title="Personalizar tema">
                <h5 class="mb-0">
                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="3"></circle>
                        <path
                            d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
                        ></path>
                    </svg>
                </h5>
            </a>
            <perfect-scrollbar class="sidbarchat p-3" tag="div">
                <a class="btn-close" href="javascript:;" @click="isOpen = !isOpen"></a>
                <h5 class="mb-1 text-center">Apariencia</h5>
                <p class="text-center small text-muted">Preferencias guardadas en este navegador.</p>
                <hr />

                <h6 class="mb-1">Color del tema</h6>
                <p class="small text-muted mb-3">Acento del menú, botones y encabezado.</p>
                <div class="theme-swatches mb-2">
                    <button
                        v-for="preset in layoutStore.themeColorPresets"
                        :key="preset.id"
                        type="button"
                        class="theme-swatch"
                        :class="{ 'is-active': layoutStore.theme_color === preset.id }"
                        :style="{ backgroundColor: preset.hex }"
                        :title="preset.label"
                        :aria-label="preset.label"
                        @click="layoutStore.setThemeColor(preset.id)"
                    />
                </div>
                <p class="small mb-4">
                    Actual: <strong>{{ layoutStore.currentThemePreset.label }}</strong>
                </p>

                <h6 class="mb-1">Modo</h6>
                <p class="small text-muted mb-3">Claro u oscuro.</p>
                <div class="btn-group-toggle row mb-4 mx-0">
                    <div class="text-color radio-primary col-6 ps-0 mb-3 custom-control custom-radio">
                        <input type="radio" id="light_mode" v-model="layoutStore.dark_mode" class="custom-control-input" value="light" @change="setTemplateStyle" />
                        <label class="custom-control-label" for="light_mode">Claro</label>
                    </div>
                    <div class="text-color radio-primary col-6 ps-0 mb-3 custom-control custom-radio">
                        <input type="radio" id="dark_mode" v-model="layoutStore.dark_mode" class="custom-control-input" value="dark" @change="setTemplateStyle" />
                        <label class="custom-control-label" for="dark_mode">Oscuro</label>
                    </div>
                    <div class="text-color radio-primary col-12 ps-0 custom-control custom-radio">
                        <input type="radio" id="system_mode" v-model="layoutStore.dark_mode" class="custom-control-input" value="system" @change="setTemplateStyle" />
                        <label class="custom-control-label" for="system_mode">Sistema</label>
                    </div>
                </div>

                <h6 class="mb-1">Navegación</h6>
                <p class="small text-muted mb-3">Posición del menú lateral.</p>
                <div class="btn-group-toggle row mb-4 mx-0">
                    <div class="text-color radio-primary col-6 ps-0 mb-3 custom-control custom-radio">
                        <input type="radio" id="horizontal" v-model="layoutStore.menu_style" class="custom-control-input" value="horizontal" @change="setMenuStyle" />
                        <label class="custom-control-label" for="horizontal">Horizontal</label>
                    </div>
                    <div class="text-color radio-primary col-6 ps-0 mb-3 custom-control custom-radio">
                        <input type="radio" id="vertical" v-model="layoutStore.menu_style" class="custom-control-input" value="vertical" @change="setMenuStyle" />
                        <label class="custom-control-label" for="vertical">Vertical</label>
                    </div>
                    <div class="text-color radio-primary col-12 ps-0 mb-3 custom-control custom-radio">
                        <input type="radio" id="collapsible" v-model="layoutStore.menu_style" class="custom-control-input" value="collapsible-vertical" @change="setMenuStyle" />
                        <label class="custom-control-label" for="collapsible">Vertical colapsable</label>
                    </div>
                </div>

                <h6 class="mb-1">Ancho de layout</h6>
                <div class="btn-group-toggle row mx-0">
                    <div class="text-color radio-primary col-3 ps-0 mb-3 custom-control custom-radio">
                        <input type="radio" id="boxed" v-model="layoutStore.layout_style" class="custom-control-input" value="boxed-layout" @change="setLayoutStyle" />
                        <label class="custom-control-label" for="boxed">Caja</label>
                    </div>
                    <div class="text-color radio-primary col-5 ps-0 mb-3 custom-control custom-radio">
                        <input type="radio" id="largeboxed" v-model="layoutStore.layout_style" class="custom-control-input" value="large-boxed-layout" @change="setLayoutStyle" />
                        <label class="custom-control-label" for="largeboxed">Caja grande</label>
                    </div>
                    <div class="text-color radio-primary col-4 ps-0 mb-3 custom-control custom-radio">
                        <input type="radio" id="full" v-model="layoutStore.layout_style" class="custom-control-input" value="full" @change="setLayoutStyle" />
                        <label class="custom-control-label" for="full">Completo</label>
                    </div>
                </div>
            </perfect-scrollbar>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useLayoutStore } from '@/store/layoutStore';

const layoutStore = useLayoutStore();
const isOpen = ref(false);

onMounted(() => {
    setTemplateStyle();
    setMenuStyle();
    setLayoutStyle();
});

const setTemplateStyle = () => {
    layoutStore.toggleDarkMode(layoutStore.dark_mode);
};

const setMenuStyle = () => {
    layoutStore.toggleMenuStyle(layoutStore.menu_style);
};

const setLayoutStyle = () => {
    layoutStore.toggleLayoutStyle(layoutStore.layout_style);
};
</script>
