import { computed, defineComponent, onMounted, onUnmounted, reactive, watch } from "vue";
import styles from "./index.module.less";
import { notationInstruments } from "../../create/component/the-create";

export default defineComponent({
	name: "Keys",
	emits: ["click"],
	props: {
		show: {
			type: Boolean,
			default: false,
		},
		instrumentCode: {
			type: String,
			default: "",
		},
	},
	setup(props, { emit }) {
		const data = reactive({
			keys: [
				{ key: "C", singname: "do", type: "white" },
				{ key: "D", singname: "re", type: "white" },
				{ key: "E", singname: "mi", type: "white" },
				{ key: "F", singname: "fa", type: "white" },
				{ key: "G", singname: "so", type: "white" },
				{ key: "A", singname: "la", type: "white" },
				{ key: "B", singname: "si", type: "white" },
			],
			keyDown: "",
			list: [] as any[],
			range: {
				min: 0,
				max: 83,
			},
		});
		/** 赤橙黄露青蓝紫 */
		const colors = ["#F07C83", "#FF966C", "#FBB957", "#A7DCBF", "#CCCCD6", "#A5D2FF", "#B0A4F4"];
		const productKey = (total = 0) => {
			return new Array(Math.abs(total)).fill(total > 0 ? "'" : ",").join("");
		};

		const keyDown = (e: KeyboardEvent) => {
			data.keyDown = e.key.toLocaleUpperCase();
		};
		const keyUp = (e: KeyboardEvent) => {
			data.keyDown = "";
		};
		const initKeys = () => {
			let noteIndex = 0;
			const list: any[] = [];
			for (let i = 0; i < 7; i++) {
				const items: any = [];
				for (let j = 0; j < data.keys.length; j++) {
					const item = data.keys[j];
					let key = i > 3 ? item.key.toLocaleLowerCase() : item.key;
					const total = i > 3 ? ([3, 4].includes(i) ? 0 : i - 4) : i - 3;
					items.push({
						noteIndex,
						index: i,
						singname: item.singname,
						key: item.key,
						name: item.key + (i + 1),
						type: "white",
						value: key + productKey(total),
					});
					noteIndex++;
					if (item.key !== "E" && item.key !== "B") {
						items.push({
							noteIndex,
							bekey: "bkey" + j,
							index: i,
							key: item.key,
							singname: item.singname,
							name: "#" + item.key + (i + 1),
							type: "black",
							value: key + productKey(total) + "-" + "^",
						});
						noteIndex++;
					}
				}
				list.push(items);
			}
			data.list = list;
			// console.log(data.list);
			// console.log(props.instrumentCode);
			const range = notationInstruments.find((item) => item.key === props.instrumentCode)?.range;
			if (range) {
				data.range = range;
			}
		};
		watch(
			() => props.instrumentCode,
			() => {
				const range = notationInstruments.find((item) => item.key === props.instrumentCode)?.range;
				data.range = range
					? range
					: {
							min: 0,
							max: 83,
					  };
			}
		);
		const noteList = computed(() => {
			const list = data.list
				.map((items) => {
					return items.filter(
						(item: any) => item.noteIndex >= data.range.min && item.noteIndex <= data.range.max
					);
				})
				.filter((item) => item.length > 0);
			return list;
		});
		onMounted(() => {
			initKeys();
			document.addEventListener("keydown", keyDown);
			document.addEventListener("keyup", keyUp);
		});
		onUnmounted(() => {
			document.removeEventListener("keydown", keyDown);
			document.removeEventListener("keyup", keyUp);
		});
		return () => (
			<div class={[styles.piano, props.show && styles.show]}>
				<div class={styles.pianoItemWrap}>
					{noteList.value.map((items: any, index: number) => {
						return (
							<div class={styles.itemWrap} style={{ width: `calc(100% / ${noteList.value.length})` }}>
								{items.map((item: any) => {
									return (
										<>
											{item.type === "white" ? (
												<div
													style={{
														display:
															item.noteIndex < data.range.min || item.noteIndex > data.range.max
																? "none"
																: "",
													}}
													class={[
														styles.item,
														item.index === 3 && data.keyDown === item.key && styles.keyDown,
													]}
													key={item.index}
													onClick={() => {
														console.log(item.value);
														emit("click", {
															type: "note",
															value: item.value,
														});
													}}
												>
													<div class={styles.keytip}>
														<div style={{ color: "#ff4a00" }}>
															{item.index === 3 && item.key === "C" ? "中央C" : ""}
														</div>
														<div class={styles.keyname}>{item.name}</div>
														<div class={styles.singname} style={{ background: colors[item.index] }}>
															{item.singname}
														</div>
													</div>
												</div>
											) : (
												<div
													style={{
														display:
															item.noteIndex < data.range.min || item.noteIndex > data.range.max
																? "none"
																: "",
													}}
													class={[styles.bkey, `${item.bekey}`]}
													onClick={() => {
														emit("click", {
															type: "note",
															value: item.value,
														});
													}}
												>
													<div class="keytip"></div>
												</div>
											)}
										</>
									);
								})}
							</div>
						);
					})}
				</div>
			</div>
		);
	},
});
