import { defineComponent, onBeforeMount, watch } from "vue";
import styles from "./index.module.less";
import iconClose from "../image/close2.svg";
import { Cell, Field, NoticeBar, Radio, RadioGroup, Slider, Switch, Tab, Tabs } from "vant";
import state from "/src/state";
import { api_closeCamera, api_openCamera } from "/src/helpers/communication";
import store from "store";
import iconInfo from "../image/info.svg";
import iconDown from "../image/down.svg";
import iconTv from "../image/tv.svg";
import iconYijian from "../image/yijian.svg";

export default defineComponent({
	name: "header-settting",
	emits: ["close"],
	setup(props, { emit }) {
		return () => (
			<div class={styles["header-settting"]}>
				<div class={styles.closeBtn} onClick={() => emit("close")}>
					<img src={iconClose} />
				</div>
				<div class={styles.content}>
					<Tabs border animated swipeable>
						<Tab title="全局设置">
							<NoticeBar class={styles.noticebar} left-icon={iconInfo} text="全局设置会更改所有乐谱练习及评测" />
							<Cell title="护眼模式" center>
								{{
									extra: () => <Switch v-model={state.setting.eyeProtection}></Switch>,
								}}
							</Cell>
							<div class={styles.btnsbar}>
								<div class={styles.btn}>
									<img src={iconDown} />
									下载曲谱
								</div>
								<div class={styles.btn}>
									<img src={iconTv} />
									投屏帮助
								</div>
								<div class={styles.btn}>
									<img src={iconYijian} />
									意见反馈
								</div>
							</div>
						</Tab>
						<Tab title="练习设置">
							<Cell title="循环播放" center>
								{{
									extra: () => <Switch v-model={state.setting.repeatAutoPlay}></Switch>,
								}}
							</Cell>
							<Cell title="显示指法" center>
								{{
									extra: () => <Switch v-model={state.setting.displayFingering}></Switch>,
								}}
							</Cell>
						</Tab>
						<Tab title="评测">
							<Cell title="选择评测难度" center>
								{{
									extra: () => (
										<RadioGroup iconSize={20} class={styles.radioGroup} v-model={state.setting.evaluationDifficulty}>
											<Radio name="BEGINNER">入门</Radio>
											<Radio name="ADVANCED">进阶</Radio>
											<Radio name="PERFORMER">大师</Radio>
										</RadioGroup>
									),
								}}
							</Cell>

							<Cell title="校音提醒" center>
								{{
									extra: () => <Switch v-model={state.setting.soundEffect}></Switch>,
								}}
							</Cell>
							<Cell title="摄像头" center>
								{{
									extra: () => (
										<Switch
											v-model={state.setting.camera}
											onChange={(value) => {
												if (value) {
													api_openCamera();
												} else {
													api_closeCamera();
												}
											}}
										></Switch>
									),
								}}
							</Cell>
							<Cell style={{ display: state.setting.camera ? "" : "none" }} title="透明度" class={styles.sliderWrap} center>
								{{
									extra: () => (
										<Slider class={styles.slider} min={0} max={100} v-model:modelValue={state.setting.cameraOpacity}>
											{{
												button: () => <div class={styles.sliderBtn}>{state.setting.cameraOpacity}</div>,
											}}
										</Slider>
									),
								}}
							</Cell>
							<Cell title="保存到相册" center>
								{{
									extra: () => <Switch v-model={state.setting.saveToAlbum}></Switch>,
								}}
							</Cell>
							<Cell title="开启伴奏" center>
								{{
									extra: () => <Switch v-model={state.setting.enableAccompaniment}></Switch>,
								}}
							</Cell>
							<Cell title="标准音高" center>
								{{
									extra: () => (
										<RadioGroup iconSize={20} class={styles.radioGroup} v-model={state.setting.frequency}>
											<Radio name={440}>440Hz</Radio>
											<Radio name={442}>442Hz</Radio>
										</RadioGroup>
									),
								}}
							</Cell>

							<Field class={styles.reactionTime} label="反应时间(毫秒)" type="digit" v-model:modelValue={state.setting.reactionTimeMs} />
						</Tab>
					</Tabs>
				</div>
			</div>
		);
	},
});