import { defineComponent, ref, Ref } from 'vue'
import classnames from 'classnames'
// import appstate from '/src/state'
// import Plyr from 'plyr'
// import request from '/src/helpers/request'
// import qs from 'query-string'
// import 'plyr/dist/plyr.css'

import videobg from './videobg.png'

const videoRef: Ref<HTMLVideoElement | null> = ref(null)
// let play: Plyr | null = null

import styles from './index.module.less'
import { postMessage } from '/src/helpers/native-message'
import { Toast } from 'vant'
import { browser, getRequestHostname } from '/src/helpers/utils'

const browserInfo = browser()

export default defineComponent({
  name: 'setting-content',
  props: {
    close: {
      type: Function,
      default: () => {},
    },
    videoFilePath: {
      type: String,
    },
    className: {
      type: String,
    },
  },
  data() {
    return {
      isFullScreen: false,
    }
  },
  mounted() {
    return
    // if (videoRef.value) {
    //   const options: any = {
    //     controls: ['play-large', 'play', 'progress', 'current-time', 'airplay'],
    //     fullscreen: browserInfo.ios ? {
    //       enabled: true,
    //       fallback: true,
    //       iosNative: true,
    //     } : false
    //   }
    //   if (browserInfo.ios) {
    //     options.controls.push('fullscreen')
    //   }
    //   play = new Plyr(videoRef.value, options)
    //   play.on('enterfullscreen', () => (this.isFullScreen = true))
    //   play.on('exitfullscreen', () => (this.isFullScreen = false))
    //   if (this.mediaType() === 'video' && getRequestHostname() === '/api-student') {
    //     const shareButton = document.createElement('button')
    //     shareButton.className = 'plyr__controls__item plyr__control plyr__share-button'
    //     shareButton.innerHTML = `<?xml version="1.0" encoding="UTF-8"?>
    //     <svg width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    //         <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
    //         <title>编组 12</title>
    //         <desc>Created with Sketch.</desc>
    //         <g id="分享" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    //             <g id="训练统计备份-11" transform="translate(-343.000000, -35.000000)" fill="#fff" fill-rule="nonzero" stroke="#fff" stroke-width="0.4">
    //                 <g id="编组-12" transform="translate(344.000000, 36.000000)">
    //                     <g id="编组备份">
    //                         <path d="M16.2470898,9.95964844 C15.8204687,9.95964844 15.4739063,10.3062109 15.4739063,10.7331641 L15.4739063,13.322207 C15.4739063,14.5087305 14.5086328,15.4740625 13.3220898,15.4740625 L3.70880859,15.4740625 C2.52246094,15.4740625 1.55714844,14.5087305 1.55714844,13.322207 L1.55714844,3.70892578 C1.55714844,2.52259766 2.52246094,1.55728516 3.70880859,1.55728516 L6.24816406,1.55728516 C6.67533203,1.55728516 7.02169922,1.21089844 7.02169922,0.784316406 C7.02169922,0.356972656 6.6753125,0.0105859375 6.24816406,0.0105859375 L3.70880859,0.0105859375 C1.66607422,0.0105859375 0.0106640625,1.66619141 0.0106640625,3.70892578 L0.0106640625,13.322207 C0.0106640625,15.3649609 1.66607422,17.0207227 3.70880859,17.0207227 L13.3220898,17.0207227 C15.3648047,17.0207227 17.0206055,15.3649609 17.0206055,13.322207 L17.0206055,10.7331641 C17.0206055,10.3062109 16.674043,9.95964844 16.2470898,9.95964844 Z" id="路径"></path>
    //                         <path d="M10.8350195,1.56066406 L14.4217969,1.56066406 C14.3497037,1.60870774 14.2825522,1.66378187 14.2213281,1.72507812 L6.35746094,9.58894531 C5.96238281,9.98341797 5.88708984,10.5485742 6.18929688,10.8502148 C6.49111328,11.1525977 7.05607422,11.0770703 7.45056641,10.6818555 L15.3149805,2.81818359 C15.3739557,2.75927938 15.4271724,2.69487912 15.4739063,2.62585937 L15.4739063,6.19996094 C15.4739063,6.62693359 15.8200977,6.97310547 16.2470898,6.97310547 C16.6743945,6.97310547 17.0202734,6.62693359 17.0202734,6.19996094 L17.0202734,0.787519531 C17.0202734,0.360546875 16.6743945,0.014375 16.2470898,0.014375 L10.8350195,0.014375 C10.4076758,0.014375 10.0618359,0.360566406 10.0618359,0.787519531 C10.0618359,1.21447266 10.4076758,1.56066406 10.8350195,1.56066406 Z" id="路径"></path>
    //                     </g>
    //                 </g>
    //             </g>
    //         </g>
    //     </svg>`
    //     shareButton.onclick = async () => {
    //       try {
    //         const pathname =
    //         location.origin.indexOf('localhost') > -1 || location.origin.indexOf('192.168') > -1 ? '' : '/accompany'
    //         const getShareUrl = () => {
    //           const shareData: any = {
    //             name: appstate.user?.username || '',
    //             subjectName: (appstate.user?.subjectName || '').split(',')[0] || '',
    //             avatar: encodeURIComponent(appstate.user?.avatar || ''),
    //             src: encodeURIComponent(this.videoFilePath || ''),
    //           }
    //           return `${location.origin}${pathname}/share-colexiu/index.html?${qs.stringify(shareData)}`
    //         }
    //         // const pathname =
    //         //   location.origin.indexOf('localhost') > -1 || location.origin.indexOf('192.168') > -1 ? '' : '/accompany'
    //         // const url = `${location.origin}${pathname}/share-colexiu/index.html?src=${encodeURIComponent(
    //         //   this.videoFilePath || ''
    //         // )}&name=${encodeURIComponent(appstate.user?.student?.username || '')}&subjectName=${encodeURIComponent(
    //         //   (appstate.user?.student?.subjectNames || '').split(',')[0] || ''
    //         // )}&avatar=${encodeURIComponent(appstate.user?.student?.avatar || '')}`
    //         const res = await request.post('/sysConfig/shortURL', {
    //           data: {
    //             orginURL: getShareUrl(),
    //           },
    //         })

    //         postMessage(
    //           {
    //             api: 'shareAchievements',
    //             content: {
    //               title: '用这款APP在家就能高效完成乐器练习，快来看我分享的作品吧！',
    //               desc: '坚持练习，收获成长！今天我用小酷AI录制了一段演奏视频，欢迎大家来观看！',
    //               image: '',
    //               video: res.data,
    //               type: 'video',
    //               button: ['copy'],
    //               url: getShareUrl()
    //             },
    //           },
    //           (res) => {
    //             if (res?.content?.message) {
    //               Toast(res?.content?.message)
    //             }
    //           }
    //         )
    //       } catch (error) {
    //         Toast('分享地址获取失败，请重试')
    //       }
    //     }
    //     play.elements.controls?.appendChild(shareButton)
    //   }
    // }
  },
  // unmounted() {
  //   if (play) {
  //     play = null
  //   }
  // },
  methods: {
    mediaType(): 'audio' | 'video' {
      const subfix = (this.videoFilePath || '').split('.').pop()
      if (subfix === 'wav' || subfix === 'mp3') {
        return 'audio'
      }
      return 'video'
    },
  },
  render() {
    return (
      <div>
        {this.mediaType() === 'audio' ? (
          <audio ref={videoRef} src={this.videoFilePath} controls="false" preload="metadata" playsinline />
        ) : (
          <video
            ref={videoRef}
            src={this.videoFilePath}
            data-poster={videobg}
            controls="false"
            preload="metadata"
            playsinline
          />
        )}
      </div>
    )
  },
})
