import { defineComponent, reactive, watch } from 'vue'
import {
  ElButton,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElSlider,
  ElDialog,
  ElIcon,
} from 'element-plus'
import runtime, * as RuntimeUtils from './runtime'
import MicroPhoneIcon from './images/microphone.svg?raw'
import styles from './action-bar.module.less'
import Share from './share'
import { requireMedia } from './helpers'
import SvgIcon from '../svg-icon'

export const state = reactive({
  volume: 0,
  barStatus: {
    camera: false, // 摄像头
    volume: false, // 声音调节
    microphone: false, // 麦克风
    microphone2: false, // 系统音频
    screen: false, // 共享屏幕
    share: false, // 分享
  },
  shareVisiable: false,
  binded: false,
})

export default defineComponent({
  name: 'LiveBroadcast-ActionBar',
  computed: {
    isCameraDisabled() {
      return (
        state.barStatus.camera &&
        runtime.deviceStatus.camera !== 'denied' &&
        runtime.cameras.length
      )
    },
    isMicrophoneDisabled() {
      const isDisabled =
        state.barStatus.microphone &&
        runtime.deviceStatus.microphone !== 'denied' &&
        runtime.microphones.length
      return isDisabled
    },
    isMicrophone2Disabled() {
      console.log(runtime.selectedMicrophone2)
      const isDisabled =
        state.barStatus.microphone2 &&
        runtime.deviceStatus.microphone !== 'denied' &&
        runtime.microphones.length
      return isDisabled || !runtime.selectedMicrophone2
    },
    isVolumeDisabled() {
      return state.volume === 0
    },
  },
  mounted() {
    RuntimeUtils.runtimeEvent.on('microphoneChange', this.listenMicophoneAudioTrack)
    // RuntimeUtils.runtimeEvent.on('microphoneChange2', this.listenMicophoneAudioTrack)
    // console.log(runtime.microphones, runtime.microphones.length)
    // watch(runtime, () => {
    //   console.log('runtime changed')
    //   if (state.binded) return
    // this.listenMicophoneAudioTrack()
    // })
  },
  beforeUnmount() {
    RuntimeUtils.runtimeEvent.off('microphoneChange', this.listenMicophoneAudioTrack)
    // RuntimeUtils.runtimeEvent.off('microphoneChange2', this.listenMicophoneAudioTrack)
  },
  methods: {
    setIconPath(iconName: string, num: number) {
      const icon = (this.$refs[iconName] as HTMLSpanElement)?.querySelector(
        '#microphone-content-svg'
      )
      if (icon) {
        const line = 14 - 11 * (num / 100)
        icon.setAttribute(
          'd',
          `M7,${line} L14,${line} L14,10.5 C14,12.4329966 12.4329966,14 10.5,14 C8.56700338,14 7,12.4329966 7,10.5 L7,${line} L7,${line} Z`
        )
      }
    },
    async listenMicophoneAudioTrack() {
      let levelChecker: ScriptProcessorNode, levelChecker2: ScriptProcessorNode
      // console.log('listenMicophoneAudioTrack', runtime.selectedMicrophone)
      if (runtime.selectedMicrophone && !this.isMicrophoneDisabled) {
        const mediaStreams = await requireMedia({
          audio: {
            deviceId: runtime.selectedMicrophone?.deviceId,
          },
          video: false,
        })
        levelChecker = RuntimeUtils.listenAudioChecker(mediaStreams, (num, label) => {
          this.setIconPath('microphoneicon', num)
        })
      } else {
        // @ts-ignore
        if (levelChecker && levelChecker?.onaudioprocess) {
          // @ts-ignore
          // levelChecker?.onaudioprocess = null
        }
      }
      // if (runtime.selectedMicrophone2 && !this.isMicrophone2Disabled) {
      //   const mediaStreams = await requireMedia({
      //     audio: {
      //       deviceId: runtime.selectedMicrophone2?.deviceId,
      //     },
      //     video: false,
      //   })
      //   levelChecker2 = RuntimeUtils.listenAudioChecker(mediaStreams, (num, label) => {
      //     console.log(num, label)
      //     this.setIconPath('microphoneicon2', num)
      //   })
      // } else {
      //   console.log('disconnect')
      //   // @ts-ignore
      //   if (levelChecker2 && levelChecker2?.onaudioprocess) {
      //     // @ts-ignore
      //     // levelChecker2?.onaudioprocess = null
      //   }
      // }
      // for (const item of runtime.microphones) {
      //   const mediaStreams = await requireMedia({
      //     audio: {
      //       deviceId: item.deviceId,
      //     },
      //     video: false,
      //   })
      //   const indexof = runtime.microphones.indexOf(item)
      //   RuntimeUtils.listenAudioChecker(mediaStreams, (num, label) => {
      //     // this.setIconPath('microphoneicon-' + indexof, num)
      //     // if (indexof === 0) {
      //     // this.setIconPath('microphoneicon', num)
      //     // this.setIconPath('microphoneicon2', num)
      //     // }
      //     // console.log(num, label, indexof, this.$refs['microphoneicon-' + indexof])
      //   })
      //   state.binded = true
      // }
    },
    startShare() {
      console.log('调用')
      state.shareVisiable = true
    },
    volumeChange(value: number) {
      state.volume = value
      RuntimeUtils.setVolume(value)
    },
    async toggleCamera() {
      RuntimeUtils.toggleDevice('camera')
      if (runtime.screenShareStatus) {
        return
      }
      state.barStatus.camera = !state.barStatus.camera
    },
    async toggleMicrophone() {
      const needPublish = runtime.videoStatus === 'liveing'
      state.barStatus.microphone = !state.barStatus.microphone
      if (!state.barStatus.microphone) {
        RuntimeUtils.openDevice('microphone', needPublish)
      } else {
        RuntimeUtils.closeDevice('microphone', needPublish)
      }
      this.listenMicophoneAudioTrack()
    },
    async toggleMicrophone2() {
      const needPublish = runtime.videoStatus === 'liveing'
      console.log('toggleMicrophone2', state.barStatus.microphone2)
      state.barStatus.microphone2 = !state.barStatus.microphone2
      if (!state.barStatus.microphone2) {
        RuntimeUtils.openDevice('microphone', needPublish)
      } else {
        RuntimeUtils.closeDevice('microphone', needPublish)
      }
      this.listenMicophoneAudioTrack()
    },
  },
  render() {
    return (
      <div class={styles['action-bar']} id="action-bar">
        <div style={{ display: 'flex' }}>
          <div class={styles['bar-btn']}>
            <div class={styles.btnInner}>
              <SvgIcon
                onClick={this.toggleCamera}
                name={
                  this.isCameraDisabled ? 'bar-camera-disabled' : 'bar-camera'
                }
                style={{
                  width: '22px',
                  cursor: 'pointer',
                }}
              />
              {runtime.cameras.length === 0 ? null : (
                <ElDropdown
                  placement="top"
                  // @ts-ignore
                  disabled={runtime.cameras.length === 0}
                  onCommand={RuntimeUtils.setSelectCamera}
                  // @ts-ignore
                  vSlots={{
                    dropdown: () => (
                      <ElDropdownMenu>
                        {runtime.cameras.map((item) => (
                          <ElDropdownItem
                            disabled={item === runtime.selectedCamera}
                            command={item}
                          >
                            {item.label}
                          </ElDropdownItem>
                        ))}
                      </ElDropdownMenu>
                    ),
                  }}
                >
                  <div class={styles['bar-btn']} style={{ height: '32px' }}>
                    <SvgIcon
                      name="bar-arrow-down"
                      style={{
                        width: '18px',
                      }}
                    />
                  </div>
                </ElDropdown>
              )}
            </div>
            <span class={styles['bar-btn-text']}>摄像头</span>
          </div>
          {/* <div class={styles['bar-btn']}>
            <div class={styles.btnInner}>
              <SvgIcon
                onClick={() => {
                  state.barStatus.volume = !state.barStatus.volume;
                  if(!state.barStatus.volume) {
                    sessionStorage.getItem('volume') && this.volumeChange(Number(sessionStorage.getItem('volume')))
                  } else {
                    sessionStorage.setItem('volume', state.volume.toString())
                    this.volumeChange(0)
                  }
                }}
                name={this.isVolumeDisabled ? 'bar-volume-disabled' : 'bar-volume'}
                style={{
                  width: '22px',
                  cursor: 'pointer'
                }}
              />
              <ElDropdown
                placement="top-start"
                popper-options={{ boundariesElement: '#action-bar', gpuAcceleration: false }}
                // @ts-ignore
                vSlots={{
                  dropdown: () => (
                    <div class={styles.volumeSlider}>
                      <SvgIcon class={styles.volumeIcon} name="message-voice" color="#fff" />
                      <ElSlider modelValue={state.volume} onInput={this.volumeChange} size="small" />
                    </div>
                  )
                }}
              >
                <div class={styles['bar-btn']} style={{ height: '32px' }}>
                  <SvgIcon
                    name="bar-arrow-down"
                    style={{
                      width: '18px'
                    }}
                  />
                </div>
              </ElDropdown>
            </div>
            <span class={styles['bar-btn-text']}>音量调节</span>
          </div> */}

          {/* <div
            class={styles['bar-btn']}
            onClick={RuntimeUtils.toggleShareScreenVideo}
          >
            <div class={styles.btnInner}>
              <SvgIcon
                name={
                  runtime.videoStatus === 'liveing'
                    ? 'bar-screen-share'
                    : 'bar-screen-share-disabled2'
                }
                style={{
                  width: '22px',
                  cursor: 'pointer',
                }}
              />
            </div>
            <span class={styles['bar-btn-text']}>
              {runtime.screenShareStatus ? '取消共享' : '屏幕共享'}
            </span>
          </div> */}

          {/* <div class={styles['bar-btn']} >
            <div class={styles.btnInner}>
              <SvgIcon
                name="bar-beauty"
                style={{
                  width: '22px',
                  cursor: 'pointer'
                }}
              />
            </div>
            <span class={styles['bar-btn-text']}>美颜</span>
          </div> */}
          <div class={styles['bar-btn']}>
            <div class={styles.btnInner}>
              {this.isMicrophoneDisabled ? (
                <SvgIcon
                  name="bar-mike-disabled"
                  onClick={this.toggleMicrophone}
                  style={{
                    width: '22px',
                    height: '22px',
                    cursor: 'pointer',
                  }}
                />
              ) : (
                <span
                  ref="microphoneicon"
                  v-html={MicroPhoneIcon}
                  onClick={this.toggleMicrophone}
                  // name={this.isMicrophoneDisabled ? 'bar-mike-disabled' : 'bar-mike'}
                  style={{
                    width: '22px',
                    height: '22px',
                    cursor: 'pointer',
                  }}
                />
              )}
              {runtime.microphones.length === 0 ? null : (
                <ElDropdown
                  placement="top-start"
                  // @ts-ignore
                  disabled={runtime.microphones.length === 0}
                  popper-options={{
                    boundariesElement: '#action-bar',
                    gpuAcceleration: false,
                  }}
                  visible-change={(visible: boolean) => {
                    console.log(visible)
                  }}
                  onCommand={RuntimeUtils.setSelectMicrophone}
                  // @ts-ignore
                  vSlots={{
                    dropdown: () => (
                      <ElDropdownMenu>
                        {runtime.microphones.map((item, index) => (
                          <ElDropdownItem
                            disabled={
                              item === runtime.selectedMicrophone ||
                              item === runtime.selectedMicrophone2
                            }
                            command={item}
                          >
                            {/* <span
                              ref={'microphoneicon-' + index}
                              v-html={MicroPhoneIcon}
                              // name={this.isMicrophoneDisabled ? 'bar-mike-disabled' : 'bar-mike'}
                              style={{
                                width: '22px',
                                cursor: 'pointer',
                              }}
                            /> */}
                            {' ' + item.label}
                          </ElDropdownItem>
                        ))}
                      </ElDropdownMenu>
                    ),
                  }}
                >
                  <div class={styles['bar-btn']} style={{ height: '32px' }}>
                    <SvgIcon
                      name="bar-arrow-down"
                      style={{
                        width: '18px',
                      }}
                    />
                  </div>
                </ElDropdown>
              )}
            </div>
            <span class={styles['bar-btn-text']}>麦克风</span>
          </div>
          {/* <div class={styles['bar-btn']}>
            <div class={styles.btnInner}>
              <SvgIcon
                onClick={this.toggleMicrophone2}
                style={{
                  width: '22px',
                  height: '22px',
                  cursor: 'pointer',
                }}
                name={this.isMicrophone2Disabled ? 'bar-volume-disabled' : 'bar-volume'}
              />
              {runtime.microphones.length === 0 ? null : (
                <ElDropdown
                  placement="top-start"
                  // @ts-ignore
                  disabled={runtime.microphones.length === 0}
                  popper-options={{
                    boundariesElement: '#action-bar',
                    gpuAcceleration: false,
                  }}
                  visible-change={(visible: boolean) => {
                    console.log(visible)
                  }}
                  onCommand={RuntimeUtils.setSelectMicrophone2}
                  // @ts-ignore
                  vSlots={{
                    dropdown: () => (
                      <ElDropdownMenu>
                        {runtime.microphones.map((item, index) => (
                          <ElDropdownItem
                            disabled={
                              item === runtime.selectedMicrophone2 ||
                              item === runtime.selectedMicrophone
                            }
                            command={item}
                          >
                            {' ' + item.label}
                          </ElDropdownItem>
                        ))}
                      </ElDropdownMenu>
                    ),
                  }}
                >
                  <div class={styles['bar-btn']} style={{ height: '32px' }}>
                    <SvgIcon
                      name="bar-arrow-down"
                      style={{
                        width: '18px',
                      }}
                    />
                  </div>
                </ElDropdown>
              )}
            </div>
            <span class={styles['bar-btn-text']}>系统音频</span>
          </div> */}
        </div>
        <div style={{ display: 'flex' }} onClick={this.startShare}>
          <div class={styles['bar-btn']}>
            <div class={styles.btnInner}>
              <SvgIcon
                name="bar-share"
                style={{
                  width: '22px',
                  cursor: 'pointer',
                }}
              />
            </div>
            <span class={styles['bar-btn-text']}>分享</span>
          </div>
        </div>
        {/* <ElButton onClick={RuntimeUtils.shareScreenVideo}>屏幕共享</ElButton> */}
        <ElDialog
          width="510px"
          destroy-on-close
          append-to-body
          modelValue={state.shareVisiable}
          title="分享"
          before-close={() => {
            state.shareVisiable = false
          }}
        >
          <Share onClose={() => (state.shareVisiable = false)} />
        </ElDialog>
      </div>
    )
  },
})
