import {
  getAssetUrl,
  getThumbnailUrl
} from '@/api/asset'
import {
  create,
  switchToNext
} from './core/utils'
import Volume from './components/Volume'
import Card from './components/Card'

export default {
  provide () {
    return {
      control: this
    }
  },
  components: {
    Volume,
    Card
  },
  props: {
    program: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      scale: 100,
      minScale: 100,
      maxScale: 100,
      padding: 0,
      selectedWidgetIndex: -1,
      node: null,
      bgm: '',
      muted: true
    }
  },
  computed: {
    transformStyles () {
      return {
        transform: `scale(${this.scale / 100})`,
        'transform-origin': '0 0'
      }
    },
    styles () {
      if (this.node) {
        const { width, height, backgroundColor } = this.node
        return {
          width: `${width}px`,
          height: `${height}px`,
          color: backgroundColor
        }
      }
      return null
    },
    backgroundStyles () {
      if (this.node) {
        const { backgroundImage } = this.node
        return {
          'background-image': backgroundImage[0] ? `url("${getThumbnailUrl(backgroundImage[0])}")` : 'none'
        }
      }
      return null
    },
    widgets () {
      return this.node?.widgets || []
    },
    widget () {
      return this.widgets[this.selectedWidgetIndex] || this.node
    },
    hasAudio () {
      if (this.node) {
        if (this.node.bgm.length) {
          return true
        }
        return this.node.widgets.some(widget => widget.mute === 0 && (widget.sources?.length || widget.url))
      }
      return false
    },
    bgmUrl () {
      return this.bgm ? getAssetUrl(this.bgm) : null
    },
    hasNext () {
      return !this.muted && this.node?.bgm.length > 1
    }
  },
  watch: {
    'node.bgm' () {
      this.setBgm()
    }
  },
  mounted () {
    this.initCanvas(this.program.detail)
    this.checkRatio()
    window.addEventListener('resize', this.checkRatio)
  },
  methods: {
    onBack () {
      window.close()
    },
    toggleMute () {
      this.muted = !this.muted
    },
    setBgm () {
      this.$bgmIndex = -1
      this.switchBgm()
    },
    switchBgm () {
      const { bgm, toggleType } = this.node
      this.$bgmIndex = switchToNext(toggleType, bgm, this.$bgmIndex)
      this.bgm = bgm[this.$bgmIndex]?.keyName
    },
    onAudioEnded () {
      if (this.node.bgm.length > 1) {
        this.switchBgm()
      }
      this.$refs.audio.play()
    },
    onAudioError (e) {
      console.warn('audio error', e)
      if (this.node?.bgm.length > 1) {
        this.switchBgm()
      }
    },
    checkRatio () {
      const wrapper = this.$refs.wrapper
      if (wrapper && this.node) {
        const width = wrapper.offsetWidth - this.padding * 2
        const height = wrapper.offsetHeight - this.padding * 2
        const { width: cWidth, height: cHeight } = this.node
        const wScale = width / cWidth
        const hScale = height / cHeight
        if (cWidth > width || cHeight > height) {
          this.scale = Math.min(wScale, hScale) * 100 | 0
          this.maxScale = Math.max(1, wScale, hScale) * 100 | 0
        } else {
          this.scale = 100
          this.maxScale = Math.max(2, wScale, hScale) * 100 | 0
        }
        this.minScale = this.scale
        console.log('width: layout -> window', cWidth, '->', width, wScale)
        console.log('height: layout -> window', cHeight, '->', height, hScale)
        console.log(this.scale, this.maxScale)
      }
    },
    initCanvas (canvas) {
      this.node = create(canvas)
      console.log(this.node)
    }
  }
}