<template>
	<el-form ref="form" label-width="120px" label-position="left" style="padding:0 20px;">
		<el-divider>{{ t('user.thememode') }}</el-divider>
		<el-row class="pi-theme" :gutter="20">
			<el-col :span="8"><img src="/images/light.png" class="pi-pic" :class="{'active': dark === 'light'}"
								   @click="themeClick('light')"/>
				<el-text type="info" class="pi-text">{{t('system.lightColor')}}</el-text>
			</el-col>
			<el-col :span="8"><img src="/images/dark.png" class="pi-pic" :class="{'active': dark === 'dark'}"
								   @click="themeClick('dark')"/>
				<el-text type="info" class="pi-text">{{t('system.darkColor')}}</el-text>
			</el-col>
			<el-col :span="8"><img src="/images/follow.png" class="pi-pic" :class="{'active': dark === 'follow'}"
								   @click="themeClick('follow')"/>
				<el-text type="info" class="pi-text">{{t('system.followSystem')}}</el-text>
			</el-col>
		</el-row>
		<el-divider></el-divider>
		<el-form-item :label="t('user.language')">
			<el-select v-model="lang">
				<el-option label="简体中文" value="zh-cn"></el-option>
				<el-option label="English" value="en"></el-option>
				<el-option label="日本語" value="ja"></el-option>
				<el-option label="Tiếng Việt" value="vi"></el-option>
			</el-select>
		</el-form-item>
		<el-divider></el-divider>
		<el-form-item :label="t('system.primaryColor')">
			<el-color-picker v-model="colorPrimary" :predefine="colorList"></el-color-picker>
		</el-form-item>
		<el-form-item :label="t('system.weakMode')">
			<el-switch v-model="weakMode"></el-switch>
		</el-form-item>
		<el-divider></el-divider>
		<el-form-item :label="t('system.layout')">
			<el-select v-model="layout" :placeholder="t('system.pleaseSelect')">
				<el-option :label="t('system.multiColumn')" value="column"></el-option>
				<el-option :label="t('system.fullWidth')" value="header"></el-option>
				<el-option :label="t('system.classic')" value="menu"></el-option>
				<el-option :label="t('system.dock')" value="dock"></el-option>
				<el-option :label="t('system.float')" value="float"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item :label="t('system.collapseMenu')">
			<el-switch v-model="menuIsCollapse"></el-switch>
		</el-form-item>
		<el-form-item :label="t('system.showLabels')">
			<el-switch v-model="layoutTags"></el-switch>
		</el-form-item>
	</el-form>
</template>

<script setup>
import {ref, watch} from "vue"
import colorTool from '@/utils/color'
import tools from "@/utils/tools"
import config from "@/config"
import globalStore from "@/store/global.js"
import {useI18n} from "vue-i18n"
import {setupI18n} from "@/locales/setup.js"

const global = globalStore()
const {t} = useI18n()

let layout = ref(tools.data.get('APP_LAYOUT') || global.layout);
let menuIsCollapse = ref(global.menuIsCollapse);
let layoutTags = ref(global.layoutTags);
let lang = ref(tools.data.get('APP_LANG') || config.LANG);
let dark = ref(localStorage.getItem('APP_DARK') || config.DARK,);
let colorList = ref(['#409EFF', '#009688', '#536dfe', '#ff5c93', '#c62f2f', '#fd726d']);
let colorPrimary = ref(tools.data.get('APP_COLOR') || '#409EFF');
let weakMode = ref(localStorage.getItem('APP_WEAK') || false)

watch(layout, (val) => {
	tools.data.set("APP_LAYOUT", val);
	global.SET_layout(val)
})

watch(menuIsCollapse, () => {
	global.TOGGLE_menuIsCollapse()
})

watch(layoutTags, () => {
	global.TOGGLE_layoutTags()
})

watch(weakMode, (val) => {
	if (val) {
		document.documentElement.classList.add("weak")
		localStorage.setItem("APP_WEAK", val)
	} else {
		document.documentElement.classList.remove("weak")
		localStorage.removeItem("APP_WEAK")
	}
})

watch(lang, (val) => {
	setupI18n(val)
	tools.data.set("APP_LANG", val)
})

watch(colorPrimary, (val) => {
	if (!val) {
		val = '#409EFF'
		colorPrimary = '#409EFF'
	}
	document.documentElement.style.setProperty('--el-color-primary', val);
	for (let i = 1; i <= 9; i++) {
		document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(val, i / 10));
	}
	for (let i = 1; i <= 9; i++) {
		document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorTool.darken(val, i / 10));
	}
	tools.data.set("APP_COLOR", val);
})

function themeClick(val) {
	if (val === 'dark') {
		document.documentElement.classList.add("dark")
		localStorage.setItem("APP_DARK", val)
	} else if (val === 'light') {
		document.documentElement.classList.remove("dark")
		localStorage.setItem("APP_DARK", val)
	} else {
		const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
		if (systemTheme.matches) {
			document.documentElement.classList.add("dark")
		} else {
			document.documentElement.classList.remove("dark")
		}
		localStorage.setItem("APP_DARK", val)
	}
	dark.value = val
}
</script>

<style lang="scss" scoped>
.pi-theme {
	text-align: center;
}

.pi-theme .pi-pic {
	cursor: pointer;
	margin-bottom: 6px;
	border-radius: 8px;
	box-shadow: 0 2px 8px #0003;
	width: 100px;
}

.pi-theme .pi-pic.active {
	border: 2px solid var(--el-color-primary);
	cursor: pointer;
}

.pi-theme .pi-text {
	margin-top: 6px;
	cursor: pointer;
}
</style>
