import { onBeforeUnmount, onMounted, Ref, ref } from 'vue'
import { useClientType, useOriginSearch } from '.'
import request from '/src/helpers/request'
import originRequest from 'umi-request'
import store from 'store'
import runtime, * as RuntimeUtils from '/src/pages/detail/runtime'
import detailState from '/src/pages/detail/state'
import SettingState from '/src/pages/detail/setting-state'
import { listenerMessage, postMessage } from '/src/helpers/native-message'
import audiosInstance from '/src/helpers/multiple-audio'
import { formatXML, onlyVisible, getCustomInfo } from '/src/pages/detail/helpers'
import { MusicSheelDetail, ShaeetStatusType } from '../index.d'
import { browser, getRequestHostname } from '/src/helpers/utils'
import formatId, { getSubjectIdCode } from '../fingering/format-id'
import { evaluatStopPlay } from '../buttons/evaluating'

const search = useOriginSearch()
const skpList = ['Ukulele']

/**
 * 获取xml并前置格式化
 * @param url xml地址
 * @param detail 音乐详情
 * @returns Ref<string>
 */
export const useXml = async (url: string, detail: MusicSheelDetail) => {
  let score = ref<string>('')
  try {
    const xml = await originRequest(url)
    const parseXmlInfo = getCustomInfo(xml)
    if (skpList.includes(parseXmlInfo.code)) {
      score.value = xml
    } else {
      score.value = formatXML(parseXmlInfo.parsedXML, {
        title: detail.musicSheetName,
      })
      const partIndex = Number(search['part-index']) || 0
      score.value = onlyVisible(score.value, partIndex)
    }
  } catch (error) {}
  return score
}

/**
 * 设置音频信息
 * @param detail 音乐详情
 */
export const useMp3s = async (detail: MusicSheelDetail) => {
  const search = useOriginSearch()
  const partIndex = ((search['part-index'] as string) || 0) as unknown as number
  const activebg = detail.background?.[partIndex]
  // 兼容未修改之前
  runtime.songs = {
    background: encodeURI(detail.audioFileUrl || detail.metronomeUrl || detail.url || ''),
    music: encodeURI(activebg?.audioFileUrl || activebg?.metronomeUrl || ''),
    // music: '/m1.mp3'
  }
  // console.log('backgroundUrl', runtime.songs.background)
  // console.log('musicUrl', runtime.songs.music)
  detailState.isAppPlay = detail.audioType === 'MIDI'

  let defaultExtConfigJson = {
    skipTick: false,
    repeatedBeats: true,
    scoreSize: 'middle'
  }
  let extConfigJson = {}
  detailState.activeDetail = {
    ...detail,
    examSongId: detail.id,
    originalSpeed: 90,
    isAppPlay: detail.audioType === 'MIDI',
    extConfigJson: {
      ...defaultExtConfigJson,
    },
  }

  /** 按照后台配置的设置频率 */
  SettingState.sett.hertz = detail.aiDefaultFrequency ? parseInt('' + detail.aiDefaultFrequency || '440') || 440 : 440

  try {
    extConfigJson = JSON.parse(detail?.extConfigJson || '')
  } catch (error) {}
  detailState.activeDetail.extConfigJson = {
    ...detailState.activeDetail.extConfigJson,
    ...extConfigJson,
  }

  const setZoom = detailState.activeDetail.extConfigJson.scoreSize
  const zooms = store.get('zooms') || {}

  if (setZoom && !zooms['' + detail.id]) {
    store.set('zooms', {...zooms, ['' + detail.id]: setZoom})
    SettingState.sett.scoreSize = setZoom
  }

  detailState.needTick = (detail.audioType === 'MP3' && detail.mp3Type === 'MP3') || detail.audioType === 'MIDI'
  detailState.skipTick = detailState.activeDetail.extConfigJson.skipTick
  detailState.repeatedBeats = detailState.activeDetail.extConfigJson.repeatedBeats
  if (!runtime.songs['music']) {
    RuntimeUtils.changeMode('background')
  }
  // console.log({ ...detailState.activeDetail })
  if (!runtime.audiosInstance) {
    runtime.audiosInstance = new audiosInstance(Object.values(runtime.songs) as string[])
  }

}

/**
 * 获取异形屏信息
 * @returns {Promise<void>}
 */
export const useSpecialShapedScreen = () => {
  const heightRef = ref<number>(0)
  postMessage(
    {
      api: 'isSpecialShapedScreen',
    },
    (evt) => {
      const height = evt?.content.notchHeight
      detailState.notchHeight =
        (browser().ios ? height * 2 : height) || (evt?.content.isSpecialShapedScreen && browser().ios ? 100 : 0)
      heightRef.value = detailState.notchHeight
      detailState.isSpecialShapedScreen = evt?.content.isSpecialShapedScreen
    }
  )
  return [heightRef]
}

/**
 * 获取当前曲目信息
 * @param id 歌曲id
 */
export const useDetail = (id: number | string): [Ref<ShaeetStatusType>, Ref<MusicSheelDetail>] => {
  const prefix = getRequestHostname()
  const status = ref<ShaeetStatusType>('loading')
  const data = ref<MusicSheelDetail>({})
  status.value = 'loading'
  request
    .get(`/musicSheet/detail/${id}`, {
      prefix: prefix,
    })
    .then((res) => {
      useMp3s(res.data)
      data.value = {
        ...res.data,
        code: Array.isArray(res?.data?.background) && res.data.background.length ? getSubjectIdCode(res.data.background[0].musicSubject) : ''
      }
      if (data.value.notation == 0) {
        SettingState.sett.type = 'staff'
      }
      detailState.subjectId = (res.data.musicSubject || '').split(',')[0] || 0
      ;(window as any).DYSubjectId = formatId(data.value.code as any)
      status.value = 'success'
    })
    .catch(() => (status.value = 'error'))

  return [status, data]
}

/**
 * 监听后台切换状态，暂停播放与评测
 */
export const useSuspendPlay = () => {
  listenerMessage('suspendPlay', () => {
    if (detailState.activeTick > -1) {
      RuntimeUtils.stopTick()
    }
    console.log(runtime.playState)
    if (runtime.playState === 'play') {
      RuntimeUtils.resetPlayStatus()
      if (runtime.evaluatingStatus) {
        
        // postMessage(
        //   {
        //     api: 'pauseRecording',
        //   },
        //   () => {
        //     detailState.isPauseRecording = true
        //   }
        // )
        evaluatStopPlay(false)
      }
    }
  })
}