import { defineComponent } from 'vue'
import { Popup } from 'vant'
import Tick from '/src/components/tick'
import state from '/src/pages/detail/state'
import { getDuration } from '/src/pages/detail/helpers'
import runtime, * as RunTimeUtils from '/src/pages/detail/runtime'
import styles from './index.module.less'

export default defineComponent({
  name: 'DetailTick',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    score: {
      default: '',
    },
  },
  methods: {
    sendMessage: () => {
      window.parent.postMessage(
        {
          api: 'headerTogge',
          playState: runtime.playState,
          show: true
        },
        '*'
      )
    },
  },
  render() {
    return (this.score && runtime.osmd) || this.show ? (
      <Popup
        class={styles.tickWrap}
        show={state.activeTick > -1}
        closeable
        onClickCloseIcon={() => {
          RunTimeUtils.stopTick()
          this.sendMessage()
        }}
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          background: 'transparent',
        }}
      >
        <Tick
          dots={(runtime as any)?.osmd?.numerator || getDuration((runtime as any).osmd).numerator || 0}
          repeat={state.activeTickRepeat}
        />
      </Popup>
    ) : null
  },
})
