import { defineComponent, PropType, ref, Ref, reactive, watch, toRefs, onMounted } from 'vue'
import FingeringComponent from '/src/music-sheet/fingering'
import FingeringComponentSvg from '/src/music-sheet/fingering/index-svg'
import { Fingering as IFingering } from '/src/music-sheet/fingering/types'
import getTypes from '/src/music-sheet/fingering/types'
import { typeById, ITypeContentItem } from '/src/constant/fingering-colexiu'
import { getImageSize, useFingeringSrc, formatFixedKey } from '/src/music-sheet/fingering/index'
import runtime, * as RuntimeUtils from '/src/pages/detail/runtime'
import detailState from '/src/pages/detail/state'
import formatId from './format-id'
import styles from './index.module.less'

export type FingeringStatus = 'init' | 'show' | 'hidden'
const subjectsSvg = ['piano']
const fingeringWidth = ref(0)
const fingeringStatus: Ref<FingeringStatus> = ref('hidden')

const fingeringViewInfo = async (type: ITypeContentItem) => {
  // @ts-ignore
  const detail: ITypeContentItem = type
  // 该声部有指法情况
  if (detail) {
    const activeType: IFingering = await getTypes(detail.name)
    if (activeType) {
      const usedFixedKey = formatFixedKey(detail.name, detailState.fixedKey)
      const fullsrc = useFingeringSrc(activeType, detail.name, usedFixedKey.value)
      const { width, height } = await getImageSize(fullsrc.value)
      const containerHeight = document.getElementById('colexiu-detail-music-sheet')?.clientHeight || 0
      const w = runtime.evaluatingStatus ? 0 : width
      const scale = containerHeight / height
      fingeringWidth.value = containerHeight ? scale * w : w
      if (width) {
        fingeringStatus.value = 'show'
      }
      return reactive({
        width,
        height,
        scale,
        usedFixedKey: usedFixedKey.value,
        fullsrc: fullsrc.value,
        activeType,
        detail,
      })
    }
  } else {
    fingeringStatus.value = 'hidden'
  }
}

export default defineComponent({
  name: 'ColexiuFingering',
  props: {
    code: {
      type: String,
      default: -1,
    },
  },
  setup(props) {
    const { code } = toRefs(props)
    const viewInfo: Ref<any> = ref(null)
    const id: Ref<number | string> = ref(-1)
    watch(
      [code],
      async ([nid], [oid]) => {
        id.value = formatId(code.value)
        // console.log("🚀 ~ file: index.tsx ~ line 65 ~ id.value", id.value)

        if (nid !== oid) {
          const data = await fingeringViewInfo(typeById[id.value])
          if (data) {
            viewInfo.value = data
          }
        }
      },
      { immediate: true, deep: true }
    )
    return () => {
      if (id.value < 0 || !viewInfo.value) return null
      const typeData = typeById[id.value]

      return (
        <div
          class={[styles.fingering, typeData.name, typeData.direction, 'fingering']}
          style={{
            left: typeData.direction === 'vertical' ? detailState.notchHeight / 2 + 'px' : '',
          }}
        >
          {subjectsSvg.includes(typeData?.name) ? (
            <FingeringComponentSvg
              viewInfo={viewInfo.value}
              type={typeData?.name}
              fingeringInfo={typeData}
              fixedKey={detailState.fixedKey}
            />
          ) : (
            <FingeringComponent
              viewInfo={viewInfo.value}
              type={typeData?.name}
              fingeringInfo={typeData}
              fixedKey={detailState.fixedKey}
            />
          )}
        </div>
      )
    }
  },
})
