import { defineComponent, toRefs, ref } from 'vue'
import classnames from 'classnames'
import Fingering from '/src/components/fingering'
import debounce from '/src/helpers/debounce'
import { noop } from '/src/helpers/utils'
import state from '../state'
import { FingeringViewInfo } from '../'

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

export default defineComponent({
  name: 'fingeringInfo',
  props: {
    viewInfo: {
      type: Object,
    },
    fingeringInfo: {
      default: null as any,
    },
    firstLib: {
      default: null as any,
    },
    loaded: {
      type: Function,
      default: noop,
    },
  },
  setup(props, { expose }) {
    const refProps = toRefs(props)
    const childRef = ref({})

    return () => {
      return refProps.fingeringInfo.value ? (
        <div
          class={classnames(
            styles.imgs,
            refProps.fingeringInfo.value.direction,
            refProps.fingeringInfo.value.name
          )}
          style={{
            boxShadow: '0 0 10px rgb(0 0 0 / 5%)',
            position: 'relative',
          }}
        >
          <Fingering
            ref={childRef}
            class={styles.fingering}
            type={refProps.fingeringInfo.value.name}
            fixedKey={state.fixedKey}
            viewInfo={refProps.viewInfo.value}
            fingeringInfo={refProps.fingeringInfo.value}
            loaded={debounce(refProps.loaded.value, 100)}
          />
        </div>
      ) : refProps.firstLib.value?.memo ? (
        <div class={classnames(styles.imgs, 'vertical')}>
          <p>{refProps.firstLib.value?.memo}</p>
        </div>
      ) : null
    }
  },
})
