import { defineComponent, reactive, ref, watch, toRef } from "vue";
import { headImg } from "../image";
import { useClickAway } from "@vant/use";
import { headData } from "..";
import styles from "./index.module.less";
import state, { IPlatform, handleGuide } from "/src/state";
import { Popup } from "@varlet/ui";
import TheComfirm from "../../component/the-comfirm";
import { musicRenderTypeKey, resetRenderMusicScore } from "/src/view/music-score";
import useDrag from "/src/view/plugins/useDrag/index";
import Dragbom from "/src/view/plugins/useDrag/dragbom";
import { storeData } from "/src/store";
import { setGuidance } from "../../custom-plugins/guide-page/api";

export default defineComponent({
	name: "musicType",
	setup(props) {
		const musicTypeData = reactive({
			show: false,
			type: 'staff' as any
		})
		const musicTypeRef = ref();
		useClickAway(musicTypeRef, () => {
			headData.musicTypeShow = false;
		});
		/** 选择曲谱渲染模式 */
		const onSelect = (type: any) => {
			if (state.musicRenderType == type) return;
			musicTypeData.show = true
			musicTypeData.type = type
		};

		/** 确定结果 */
		const handleResult = (type: any) => {
			if (type){
				state.musicRenderType = musicTypeData.type
				// sessionStorage.setItem(musicRenderTypeKey, musicTypeData.type)
				resetRenderMusicScore(musicTypeData.type)
			} else {
				headData.musicTypeShow = false;
				musicTypeData.type = ''
			}
			musicTypeData.show = false
		}

		const parentClassName = "transBoxClass_drag";
		const userId = storeData.user?.id ? String(storeData.user?.id) : '';
		const positionInfo = state.platform !== IPlatform.PC ? {
		  styleDrag: { value: null }
		} : useDrag(
		  [
			`${parentClassName} .top_drag`,
			`${parentClassName} .bom_drag`
		  ],
		  parentClassName,
		  toRef(musicTypeData, 'show'),
		  userId
		)

		return () => (
			<>
				<div ref={musicTypeRef}>
					<div class={["van-popover__action", styles.item, state.musicRenderType === "staff" && styles.active]} onClick={() => onSelect("staff")}>
						<img src={state.musicRenderType === "staff" ? headImg("icon-staff-active.svg") : headImg("icon-staff.svg")} />
						<div>五线谱</div>
					</div>
					<div class={["van-popover__action", styles.item, state.musicRenderType === "firstTone" && styles.active]} onClick={() => onSelect("firstTone")}>
						<img src={state.musicRenderType === "firstTone" ? headImg("shuodiao-active.svg") : headImg("shuodiao.svg")} />
						<div>首调</div>
					</div>
					{
						['1788501975122489346','1788502467554750466','1789839575249596417'].includes(state.cbsExamSongId) ? null : 
						<div class={["van-popover__action", styles.item, state.musicRenderType === "fixedTone" && styles.active]} onClick={() => onSelect("fixedTone")}>
							<img src={state.musicRenderType === "fixedTone" ? headImg("guding-active.svg") : headImg("guding.svg")} />
							<div>固定调</div>
						</div>						
					}
				</div>
				<Popup teleport="body" closeOnClickOverlay={true} defaultStyle={false} v-model:show={musicTypeData.show} class="transBoxClass_drag" style={positionInfo.styleDrag.value}>
					<TheComfirm tip="设置成功，是否立即重新加载？" onClose={handleResult} />
					{ state.platform === IPlatform.PC && <Dragbom showGuide={!state.guideInfo?.teacherDrag} onGuideDone={handleGuide}  /> }
				</Popup>
			</>
		);
	},
});
