import { GetCheckoutRoomNum, GetRoomInfo, GetRoomRtcToken } from '@/api/Home/Index';
import styles from '@/components/JoinMeetingModal/index.module.scss'
import ImageUrl from '@/utils/package/ImageUrl';
import { Modal, message } from 'antd';
import { useState, useImperativeHandle, forwardRef, useRef } from "react";
import { useNavigate } from 'react-router-dom';
import Avatar from '@/components/Avatar';
import JoinSetting from '../JoinSetting';
const JoinMeetingModal = forwardRef((props: any, ref: any) => {
  useImperativeHandle(ref, () => ({
    changeModal: (item: any) => {
      setInfo(item)
      setIsJoinMeetingModal(true)
    }
  }))
  const joinSettingRef = useRef<any>();
  const [isJoinMeetingModal, setIsJoinMeetingModal] = useState(false);
  const [info, setInfo] = useState<any>('');
  return (
    <>
      <Modal
        title=""
        open={isJoinMeetingModal}
        footer={null}
        onCancel={() => setIsJoinMeetingModal(false)}
        centered
        width={'300px'}
      >
        <div className={styles.joinMeetingModal}>
          <div>
            <div><Avatar name={info.InviterName} /></div>
            <div>
              <span>{info.InviterName} 邀请你加入</span>
              <span>{info.roomName}</span>
            </div>
          </div>
          <div>
            <div style={{ marginRight: '40px' }} onClick={() => setIsJoinMeetingModal(false)}>
              <img src={ImageUrl.icon38} alt="" />
              <span>拒绝</span>
            </div>
            <div onClick={() => {
              if (location.hash.indexOf('/meeting') === 1) {
                setIsJoinMeetingModal(false)
                return message.error('您已经在房间中了，请退出房间重试。')
              }
              joinSettingRef.current.changeModal(info.roomNum)
            }}>
              <img src={ImageUrl.icon37} alt="" />
              <span>接听</span>
            </div>
          </div>
        </div>
      </Modal>
      <JoinSetting ref={joinSettingRef} />
    </>
  )
})

export default JoinMeetingModal