import {
	defineComponent,
	nextTick,
	onMounted,
	reactive,
	ref,
	h,
	render,
	toRaw,
	type PropType
} from "vue";
import { isString } from "lodash-es";
import { addClass, contains, removeClass } from "../../utils";
import { useRefs } from "../../hooks";
import { ElIcon } from "element-plus";
import { ArrowRight } from "@element-plus/icons-vue";

const ClContextMenu = defineComponent({
	name: "cl-context-menu",

	props: {
		show: Boolean,
		options: {
			type: Object as PropType<ClContextMenu.Options>,
			default: () => ({})
		},
		event: {
			type: Object,
			default: () => ({})
		}
	},

	setup(props, { expose, slots }) {
		const { refs, setRefs } = useRefs();

		// 是否可见
		const visible = ref(props.show || false);

		// 按钮列表
		const list = ref<ClContextMenu.Item[]>([]);

		// 样式
		const style = reactive({
			left: "0px",
			top: "0px"
		});

		// 选中值
		const ids = ref("");

		// 阻止默认事件
		function stopDefault(e: any) {
			if (e.preventDefault) {
				e.preventDefault();
			}

			if (e.stopPropagation) {
				e.stopPropagation();
			}
		}

		// 解析列表
		function parseList(list: ClContextMenu.Item[]) {
			function deep(list: ClContextMenu.Item[]) {
				list.forEach((e) => {
					e.showChildren = false;

					if (e.children) {
						deep(e.children);
					}
				});
			}

			deep(list);

			return list;
		}

		// 目标元素
		let targetEl: any;

		// 关闭
		function close() {
			visible.value = false;
			ids.value = "";

			if (targetEl) {
				removeClass(targetEl, "cl-context-menu__target");
			}
		}

		// 打开
		function open(event: any, options: ClContextMenu.Options = {}) {
			// 阻止默认事件
			stopDefault(event);

			// 显示
			visible.value = true;

			// 元素
			const el = refs["context-menu"].querySelector(".cl-context-menu__box") as HTMLElement;

			// 点击样式
			if (options?.hover) {
				const d = options.hover === true ? {} : options.hover;
				targetEl = event.target;

				if (targetEl && isString(targetEl.className)) {
					if (d.target) {
						while (!targetEl.className.includes(d.target)) {
							targetEl = targetEl.parentNode;
						}
					}

					addClass(targetEl, d.className || "cl-context-menu__target");
				}
			}

			// 自定义样式
			if (options?.class) {
				addClass(el, options.class);
			}

			// 菜单列表
			if (options?.list) {
				list.value = parseList(options.list);
			}

			nextTick(() => {
				// 计算位置
				let left = event.pageX;
				let top = event.pageY;

				// 组件方式用 offset 计算
				if (!props.show) {
					left = event.offsetX;
					top = event.offsetY;
				}

				const { clientHeight: h1, clientWidth: w1 } = event.target?.ownerDocument.body;
				const { clientHeight: h2, clientWidth: w2 } = el;

				if (top + h2 > h1) {
					top = h1 - h2 - 5;
				}

				if (left + w2 > w1) {
					left = w1 - w2 - 5;
				}

				style.left = left + "px";
				style.top = top + "px";
			})

			return {
				close
			};
		}

		// 行点击
		function rowClick(item: ClContextMenu.Item, id: string) {
			ids.value = id;

			if (item.disabled) {
				return false;
			}

			if (item.callback) {
				return item.callback(close);
			}

			if (item.children) {
				item.showChildren = !item.showChildren;
			} else {
				close();
			}
		}

		expose({
			open,
			close
		});

		onMounted(function () {
			if (visible.value) {
				const { body, documentElement } = props.event.target.ownerDocument;

				// 添加到 body 下
				body.appendChild(refs["context-menu"]);
				// 关闭事件
				(documentElement || body).addEventListener("mousedown", (e: any) => {
					const el = refs["context-menu"];
					if (!contains(el, e.target) && el != e.target) {
						close();
					}
				});

				// 默认打开
				open(props.event, props?.options);
			}
		});

		return () => {
			function deep(list: ClContextMenu.Item[], pId: string, level: number) {
				return (
					<div class={["cl-context-menu__box", level > 1 && "is-append"]}>
						{list
							.filter((e) => !e.hidden)
							.map((e, i) => {
								const id = `${pId}-${i}`;

								if (!e.suffixIcon) {
									// 默认图标
									if (e.children) {
										e.suffixIcon = ArrowRight;
									}
								}

								return (
									<div
										class={{
											"is-active": ids.value.includes(id),
											"is-ellipsis": e.ellipsis ?? true,
											"is-disabled": e.disabled
										}}
										onClick={(ev: MouseEvent) => {
											rowClick(e, id);
											ev.stopPropagation();
										}}
									>
										{/* 前缀图标 */}
										{e.prefixIcon && <ElIcon>{h(toRaw(e.prefixIcon))}</ElIcon>}

										{/* 标题 */}
										<span>
											{e.label}
										</span>

										{/* 后缀图标 */}
										{e.suffixIcon && <ElIcon>{h(toRaw(e.suffixIcon))}</ElIcon>}

										{/* 子集 */}
										{e.children &&
											e.showChildren &&
											deep(e.children, id, level + 1)}
									</div>
								);
							})}
					</div>
				);
			}

			return (
				visible.value && (
					<div
						class="cl-context-menu"
						ref={setRefs("context-menu")}
						style={style}
						onContextmenu={stopDefault}>
						{slots.default ? slots.default() : deep(list.value, "0", 1)}
					</div>
				)
			);
		};
	}
});

export const ContextMenu = {
	open(event: any, options: ClContextMenu.Options) {
		const vm = h(ClContextMenu, {
			show: true,
			event,
			options
		});

		render(vm, event.target.ownerDocument.createElement("div"));

		return vm.component?.exposed as ClContextMenu.Exposed;
	}
};

export default ClContextMenu;