<template>
    <div class="pointer toggle-theme flex justify-center padding-lr-xs">
        <el-switch v-if="type == 'switch'" v-model="sideTheme" inline-prompt :active-icon="MoonNight"
            :inactive-icon="Sunny" active-value="theme-dark" inactive-value="theme-light"
            style="--el-switch-on-color: var(--el-fill-color);--el-switch-border-color: var(--el-fill-color);color:var(--el-text-color-primary)" />
        <!-- <el-icon v-else-if="type == 'icon'" color="#5a5e66" @click="handleTheme($store.state.settings.sideTheme==`theme-light`?`theme-dark`:`theme-light`)">
            <Sunny v-if="$store.state.settings.sideTheme==`theme-light`" />
            <MoonNight v-else />
        </el-icon> -->
        <!-- <svg-icon v-else-if="type == 'icon'"
            :icon-class="$store.state.settings.sideTheme == `theme-light` ? `sun` : `moon`"
            style="color:#5a5e66;font-size:26px"
            @click="handleTheme($store.state.settings.sideTheme == `theme-light` ? `theme-dark` : `theme-light`)" /> -->
        <div v-else-if="type == 'icon'" class="flex align-center" style="position:relative;width:26px;">
            <transition name="el-zoom-in-center">
                <svg-icon v-show="$store.state.settings.sideTheme == `theme-light`" :icon-class="`sun`"
                    style="color:#5a5e66;font-size:26px;position:absolute" @click="handleTheme(`theme-dark`)" />
            </transition>
            <transition name="el-zoom-in-center">
                <svg-icon v-show="$store.state.settings.sideTheme != `theme-light`" :icon-class="`moon`"
                    style="color:#5a5e66;font-size:26px;position:absolute" @click="handleTheme(`theme-light`)" />
            </transition>


        </div>
    </div>
</template>

<script setup>
import {
    toggleTheme,
} from "@/utils/index";
import { Sunny, MoonNight } from '@element-plus/icons-vue'
const store = useStore()

const props = defineProps({
    type: {
        type: String,
        default: 'icon',
    },
});

const sideTheme = ref(store.state.settings.sideTheme)

watch(sideTheme, (newValue) => {
    handleTheme(newValue)
})


function handleTheme(value) {
    store.dispatch("settings/changeSetting", {
        key: "sideTheme",
        value: value,
    });
    let addClassString = value.split("-")[1];
    toggleTheme(addClassString);
}
</script>

<style lang='scss'>
.toggle-theme:hover {
    background-color: rgba($color: #000000, $alpha: 0.03);
}
</style>