import { computed, defineComponent, onMounted, reactive, ref } from "vue";
import styles from "./index.module.less";

import iconBack from "./image/icon-back.svg";
import Title from "./title";
import state, { handleChangeSection, handleResetPlay, togglePlay } from "../../state";
import { headImg } from "./image";
import icons from "./image/headerTop.json";
import { Badge, Circle, Popover } from "vant";
import { metronomeData } from "../../helpers/metronome";
import Speed from "./speed";
import { evaluatingData, handleStartEvaluat } from "/src/view/evaluating";
import { Popup } from "@varlet/ui";
import Settting from "./settting";

export const headData = reactive({
	speedShow: false,
});

export default defineComponent({
	name: "header-top",
	setup() {
		const headerData = reactive({
			settingMode: false,
		});
		const headRef = ref();

		const toggleEvaluat = () => {
			handleStartEvaluat();
		};
		const disabledList = ["evaluating"];
		return () => (
			<div ref={headRef} class={styles.headerTop}>
				<div class={styles.back}>
					<img src={iconBack} />
				</div>
				<Title text={state.examSongName} />

				<div class={styles.headRight}>
					<div class={styles.btn} id="tips-step-2" onClick={toggleEvaluat}>
						<img class={styles.iconBtn} src={state.modeType === "evaluating" ? icons.evaluating2 : icons.evaluating} />
						<span>评测</span>
					</div>
					<div class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]} id="tips-step-4" onClick={() => handleChangeSection()}>
						<img class={styles.iconBtn} src={headImg(`section${state.section.length}.svg`)} />
						{/* <Button class={styles.button} icon={Icons["section" + state.section.length]} color="#01C1B5" disabled={runtime.isFirstPlay || runtime.evaluatingStatus || isHomework} onClick={this.authBefore("excerpts", RuntimeUtils.sectionChange)} /> */}
						<span>选段</span>
					</div>
					<div class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]} id="tips-step-5" onClick={() => togglePlay()}>
						<div class={styles.btnWrap}>
							<img style={{ marginTop: "-1px" }} class={styles.iconBtn} src={state.playState === "paused" ? icons.play : icons.pause} />
							<Circle class={styles.progress} stroke-width={80} currentRate={state.playProgress} rate={100} layerColor="#01C1B5" color="#FFC830" />
						</div>
						<span>{state.playState === "play" ? "暂停" : "播放"}</span>
					</div>
					<div
						class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]}
						id="tips-step-6"
						onClick={() => {
							state.playSource = state.playSource === "music" ? "background" : "music";
						}}
					>
						<img class={styles.iconBtn} src={state.playSource === "music" ? icons.music : icons.background} />
						<span>{state.playSource === "music" ? "原声" : "伴奏"}</span>
					</div>
					<div
						class={[styles.btn]}
						onClick={async () => {
							metronomeData.lineShow = !metronomeData.lineShow;
						}}
					>
						<img class={styles.iconBtn} src={headImg("iconStep.png")} />
						<span>{metronomeData.lineShow ? "高级" : "初级"}</span>
					</div>
					<div
						class={styles.btn}
						onClick={async () => {
							metronomeData.disable = !metronomeData.disable;
							metronomeData.metro?.initPlayer();
						}}
					>
						<img style={{ display: metronomeData.disable ? "block" : "none" }} class={styles.iconBtn} src={headImg("tickoff.png")} />
						<img style={{ display: !metronomeData.disable ? "block" : "none" }} class={styles.iconBtn} src={headImg("tickon.png")} />
						<span style={{ whiteSpace: "nowrap" }}>节拍器</span>
					</div>
					<div class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]} id="tips-step-7" onClick={() => handleResetPlay()}>
						<img class={styles.iconBtn} src={headImg("replay.svg")} />
						<span>重播</span>
					</div>

					<Popover trigger="manual" v-model:show={headData.speedShow} placement="bottom" overlay={false}>
						{{
							reference: () => (
								<div
									id="tips-step-8"
									class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]}
									onClick={(e: Event) => {
										e.stopPropagation();
										headData.speedShow = !headData.speedShow;
									}}
								>
									<Badge class={styles.badge} content={state.speed}>
										<img class={styles.iconBtn} src={headImg("speed.svg")} />
									</Badge>
									<span>速度</span>
								</div>
							),
							default: () => <Speed />,
						}}
					</Popover>
					<div class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]} onClick={() => (headerData.settingMode = true)}>
						<img class={styles.iconBtn} src={headImg("menu.svg")} />
						<span>设置</span>
					</div>
				</div>

				<Popup teleport="body" defaultStyle={false} v-model:show={headerData.settingMode}>
					<Settting onClose={() => headerData.settingMode = false} />
				</Popup>
			</div>
		);
	},
});