import { Popup } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'
import { permissionPopup } from './permission'
import * as RuntimeUtils from '/src/pages/detail/runtime'
import Microphone from './microphone'
import Camera from './camera'
import Member from './member'
import Demand from './demand'
import Earphone from './earphone'
import MemberAndDemand from './memberAndDemand'

export default defineComponent({
  name: 'ColexiuPermission',
  setup(props, { expose }) {
    const toggle = () => {
      permissionPopup.show = !permissionPopup.show
    }
    expose({
      toggle,
    })
    return () => (
      <Popup
        class={styles.popup}
        v-model:show={permissionPopup.show}
        teleport="body"
        onClosed={() => {
          RuntimeUtils.setCurrentTime(0)
        }}
      >
        {permissionPopup.active === 'microphone' ? (
          <Microphone />
        ) : permissionPopup.active === 'camera' ? (
          <Camera />
        ) : permissionPopup.active === 'member' ? (
          <Member />
        ) : permissionPopup.active === 'demand' ? (
          <Demand />
        ) : permissionPopup.active === 'earphone' ? (
          <Earphone />
        ) : permissionPopup.active === 'memberAndDemand' ? (
          <MemberAndDemand />
        ) : null}
      </Popup>
    )
  },
})
