import { defineComponent, ref } from 'vue'
import { Cell, Divider, Field, Radio, RadioGroup, Slider, Switch } from 'vant'
import styles from './index.module.less'
import SettingState from '/src/pages/detail/setting-state'

export const switchProps = {
  // 'active-color': '#2dc7aa',
  // 'inactive-color': '#CCCCCC',
  // size: '20px',
}

export type Difficulty = 'BEGINNER' | 'ADVANCED' | 'PERFORMER'

export default defineComponent({
  name: 'ColexiuSettingPractise',
  setup() {
    return () => {
      return (
        <div>
          <div class={styles.groupBox}>
            <Cell center border={false} title="评测难度">
              <RadioGroup iconSize={20} class={styles.radioGroup} v-model={SettingState.eva.difficulty}>
                <Radio name="BEGINNER">入门</Radio>
                <Radio name="ADVANCED">进阶</Radio>
                <Radio name="PERFORMER">大师</Radio>
              </RadioGroup>
            </Cell>
            <Divider />
            <Cell center border={false} title="延迟检测">
              <Switch v-model={SettingState.sett.tuning} {...switchProps}>
                off
              </Switch>
            </Cell>
            <Divider />
            <Cell center border={false} title="摄像头">
              <Switch v-model={SettingState.sett.camera} {...switchProps}>
                off
              </Switch>
            </Cell>
            {SettingState.sett.camera && (
              <>
                <Divider />
                <div class={styles.sliderWrap}>
                  <div class="cell__title">透明度</div>
                  <Slider
                    min={0}
                    max={100}
                    v-model:modelValue={SettingState.sett.opacity}
                    v-slots={{
                      button: () => <div class={styles.slider}>{SettingState.sett.opacity}</div>,
                    }}
                  ></Slider>
                </div>
              </>
            )}
            <Divider />
            <Cell center border={false} title="保存到相册">
              <Switch v-model={SettingState.eva.save} {...switchProps}>
                off
              </Switch>
            </Cell>
            <Divider />
            <Cell center border={false} title="评测伴奏">
              <Switch v-model={SettingState.eva.mute} {...switchProps}>
                off
              </Switch>
            </Cell>
            <Divider />
            <Cell center border={false} title="标准音高">
              <div style={{ display: 'flex' }}>
                <RadioGroup iconSize={20} class={styles.radioGroup} v-model={SettingState.sett.hertz}>
                  <Radio name={440}>440</Radio>
                  <Radio name={442}>442</Radio>
                </RadioGroup>
              </div>
            </Cell>
            <Divider />
            {/* <Cell center border={false} title="反应时间(毫秒)">
              <Field
                // type="number"
                v-model={SettingState.eva.reactionTimeMs}
                inputAlign="right"
                // formatter={(value) => value.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                onBlur={() => {
                  SettingState.eva.reactionTimeMs = Math.max(-300, Math.min(300, SettingState.eva.reactionTimeMs)) || 0
                }}
              />
            </Cell> */}
          </div>
        </div>
      )
    }
  },
})
