import { defineStore } from 'pinia';
import { computed, reactive, ref } from 'vue';
import { module, storage } from '/@/cool';
import { useBase } from '/$/base';
import { useDark } from '@vueuse/core';
import { mix } from '../utils';
import { assign } from 'lodash-es';
import { config } from '/@/config';

export const useTheme = defineStore('theme', () => {
	const { app } = useBase();
	const isDark = useDark();
	const { options } = module.get('theme');

	// 当前主题
	const theme = reactive<Theme>(
		storage.get('theme') ||
			assign(
				{
					isGroup: config.app.menu.isGroup,
					transition: config.app.router.transition
				},
				options
			)
	);

	// 主题列表
	const themes = ref(options.list);

	// 主题色
	const color = computed(() => theme.color);

	// 设置主题
	function setTheme({ color, name, isGroup, transition, dark }: Theme) {
		// 设置暗黑模式
		if (dark !== undefined) {
			isDark.value = dark;
		}

		// 主题配置
		const theme = storage.get('theme') || {};

		// 变量前缀
		const pre = '--el-color-primary';

		// 白色混合色
		const mixWhite = '#ffffff';

		// 黑色混合色
		const mixBlack = '#131313';

		// 元素
		const el = document.documentElement;

		// 主题
		if (name) {
			const item = options.list.find(e => e.name == name);

			if (item) {
				if (!color) {
					color = item.color;
				}
				document.body?.setAttribute('class', `theme-${name}`);
			}

			theme.name = name;
		}

		// 设置主色
		if (color) {
			el.style.setProperty(pre, color);

			// 设置辅色
			for (let i = 1; i < 10; i += 1) {
				if (isDark.value) {
					el.style.setProperty(`${pre}-light-${i}`, mix(color, mixBlack, i * 0.1));
					el.style.setProperty(`${pre}-dark-${i}`, mix(color, mixWhite, i * 0.1));
				} else {
					el.style.setProperty(`${pre}-light-${i}`, mix(color, mixWhite, i * 0.1));
					el.style.setProperty(`${pre}-dark-${i}`, mix(color, mixBlack, i * 0.1));
				}
			}

			theme.color = color;
		}

		// 菜单分组显示
		if (isGroup !== undefined) {
			theme.isGroup = isGroup;
			app.set({
				menu: {
					isGroup
				}
			});
		}

		// 转场动画
		if (transition !== undefined) {
			theme.transition = transition;
			app.set({
				router: {
					transition
				}
			});
		}

		storage.set('theme', theme);
	}

	// 切换暗黑模式
	function changeDark(el: Element, isDark: boolean, cb: () => void) {
		// @ts-ignore
		const transition = document.startViewTransition(() => {
			cb();
		});

		transition.ready.then(() => {
			const rect = el.getBoundingClientRect();
			const x = rect.left + rect.width / 2;
			const y = rect.top + rect.height / 2;
			const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
			const clipPath = [
				`circle(0 at ${x}px ${y}px)`,
				`circle(${endRadius}px at ${x}px ${y}px)`
			];
			document.documentElement.animate(
				{
					clipPath: isDark ? clipPath.reverse() : clipPath
				},
				{
					duration: 400,
					pseudoElement: isDark
						? '::view-transition-old(root)'
						: '::view-transition-new(root)'
				}
			);
		});
	}

	// 初始化
	setTheme(theme);

	return {
		isDark,
		color,
		theme,
		themes,
		setTheme,
		changeDark
	};
});