import { Button, Popover, Popup, Toast } from 'vant'
import { defineComponent, onBeforeUnmount, ref, watch } from 'vue'
import MusicSheet from '/src/music-sheet'
import { postMessage } from '/src/helpers/native-message'
import { OpenSheetMusicDisplay } from '/osmd-extended/src'
// import { getImageUrl } from '../../header'
import styles from './index.module.less'
import iconArrow from './icons/icon-arrow.svg'
import iconBottom from './icons/icon-bottom.svg'
import iconBack from './icons/back.png'
import iconRed from './icons/icon-red.png'
import iconGreen from './icons/icon-green.png'
import iconWhite from './icons/icon-white.png'
import iconSound from './icons/icon-sound.svg'
import getScore from '/src/pages/detail/tuning-popup/data'
// import detailState from '/src/pages/detail/state'
import { getAllNodes } from '/src/pages/detail/helpers'
const checkStatus = ref(false)

const useStart = (osdm: OpenSheetMusicDisplay) => {
  const notes = getAllNodes(osdm)
  console.log(notes)
  postMessage({
    api: 'proxyServiceMessage',
    content: {
      header: {
        status: 200,
        commond: 'xmlInfo',
        type: 'SOUND_CHECK',
      },
      body: {
        frequency: notes[0].frequency,
      },
    },
  })
  postMessage(
    {
      api: 'startSoundCheck',
    },
    () => {
      checkStatus.value = true
    }
  )
}

export const soundEffectShow = ref<boolean>(false)
export default defineComponent({
  name: 'ColexiuSoundEffectContent',
  setup(props, { expose }) {
    const show = ref<boolean>(false)
    const onSelect = (val: any) => {
      soundEffectShow.value = false
      if (val.text === '关闭校音') {
        // 关闭全局校音
      }
    }

    expose({
      soundEffectShow,
    })
    return () => {
      const score = getScore(2)?.xml || ''
      return (
        <div class={styles.box}>
          <img class={styles.iconSound} src={iconSound} />
          <div class={styles.wrap}>
            <div class={styles.staff}>
              <MusicSheet
                opotions={{
                  stretchLastSystemLine: true,
                  drawMetronomeMarks: false,
                  drawPartAbbreviations: false,
                  drawPartNames: false,
                  drawSlurs: false,
                  drawTimeSignatures: false,
                  followCursor: false,
                }}
                score={score}
                showSection={false}
                onRerender={useStart}
              />
            </div>
            <div class={styles.des}>
              请演奏 <span style={{ color: 'var(--primary-color)' }}>C【do】</span>直到绿灯全部亮起
            </div>
            <div class={styles.lampWrap}>
              <div class={styles.lamp}>
                <img class={styles.flickerAnimate} src={iconGreen} />
              </div>
              <div class={styles.lamp}>
                <img class={styles.flickerAnimate} src={iconRed} />
              </div>
              <div class={styles.lamp}>
                <img class={styles.flickerAnimate} src={iconWhite} alt="" />
              </div>
            </div>
          </div>
          <img class={styles.bottom} src={iconBottom} />
          <Button class={styles.button} icon={iconBack} onClick={() => (soundEffectShow.value = false)} />

          <Popover
            class={styles.skepItems}
            v-model:show={show.value}
            actions={[{ text: '跳过本次' }, { text: '关闭校音' }]}
            onSelect={(val) => onSelect(val)}
            vSlots={{
              reference: () => (
                <Button class={styles.skepBtn} icon={iconArrow} iconPosition="right">
                  跳过本次
                </Button>
              ),
            }}
          ></Popover>
        </div>
      )
    }
  },
})
