import { defineComponent } from 'vue'
import { Cell, Switch } from 'vant'
import SettingState from '/src/pages/detail/setting-state'
import { postMessage } from '/src/helpers/native-message'
import * as RuntimeUtils from '../runtime'

import styles from './index.module.less'
import classnames from 'classnames'

export const switchProps = {
  'active-color': '#01C1B5',
  'inactive-color': '#CCCCCC',
  'size': '20px',
}

export default defineComponent({
  name: 'set-content',
  data() {
    return {
      eyeProtection: false,
    }
  },
  render() {
    return (
      <div class={styles.setting}>
        <Cell
          title="护眼模式"
          vSlots={{
            extra: () => (
              <Switch
                modelValue={SettingState.sett.eyeProtection}
                onChange={val => SettingState.sett.eyeProtection = val}
                {...switchProps}
              />
            )
          }}
        />
        <Cell
          title="延迟检测"
          vSlots={{
            extra: () => (
              <Switch
                modelValue={SettingState.sett.tuning}
                onChange={val => SettingState.sett.tuning = val}
                {...switchProps}
              />
            )
          }}
        />
        <Cell
          title="摄像头"
          vSlots={{
            extra: () => (
              <Switch
                modelValue={SettingState.sett.camera}
                onChange={val => {
                  SettingState.sett.camera = val
                  if (val) {
                    postMessage({
                      api: 'openCamera',
                    })
                  } else {
                    postMessage({
                      api: 'closeCamera',
                    })
                  }
                }}
                {...switchProps}
              />
            )
          }}
        />
        <Cell
          title="循环播放"
          vSlots={{
            extra: () => (
              <Switch
                modelValue={SettingState.sett.loop}
                onChange={val => SettingState.sett.loop = val}
                {...switchProps}
              />
            )
          }}
        />
        <Cell
          title="显示指法"
          vSlots={{
            extra: () => (
              <Switch
                modelValue={SettingState.sett.fingering}
                onChange={val => {
                    SettingState.sett.fingering = val
                    RuntimeUtils.event.emit('settingFingeringChange')
                  }
                }
                {...switchProps}
              />
            )
          }}
        />
        <div class={styles.title} style={{marginTop: '8PX'}}>选择调率</div>
        <div class={classnames(styles.tags, styles.tagsbig)}>
          <span
            class={classnames(styles.tag, {[styles.active]: SettingState.sett.hertz === 440})}
            onClick={() => SettingState.sett.hertz = 440}
          >
            440Hz
          </span>
          <span
            class={classnames(styles.tag, {[styles.active]: SettingState.sett.hertz === 442})}
            onClick={() => SettingState.sett.hertz = 442}
          >
            442Hz
          </span>
        </div>
      </div>
    )
  }
})
