import { GetRoomUser } from '@/api/Meeting';
import { role } from '@/config/role';
import styles from '@/page/Meeting/ShareScreenWindow/index.module.scss'
import { storage } from '@/utils';
import ImageUrl from '@/utils/package/imageUrl';
import { getKeyOpenChildWindow, setKeyOpenChildWindow } from '@/utils/package/public';
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { useEffect, useState } from "react";
const ShareScreenWindow: React.FC = () => {
  const [footerLists, setFooterLists] = useState<any>([
    {
      title: '静音',
      icon: ImageUrl.icon22,
      iconActive: ImageUrl.icon22Active,
      active: false,
      select: false,
    },
    {
      title: '关闭视频',
      icon: ImageUrl.icon23,
      iconActive: ImageUrl.icon23Active,
      active: false,
      select: false,
    },
    {
      title: '成员',
      icon: ImageUrl.icon30,
      iconSelect: ImageUrl.icon30Select,
      active: false,
      select: false,
    },
    {
      title: '聊天',
      icon: ImageUrl.icon31,
      iconSelect: ImageUrl.icon31Select,
      active: false,
      select: false,
    },
    {
      title: '录制',
      icon: ImageUrl.icon27,
      iconSelect: ImageUrl.icon27Select,
      iconActive: ImageUrl.icon27Active,
      active: false,
      select: false,
    },
  ])
  const [time, setTime] = useState('')
  const [isExpand, setIsExpand] = useState(false)
  const [roomUserLists, setRoomUserLists] = useState<any>([])
  const channel = new BroadcastChannel('meeting_channel');
  const userInfo = JSON.parse(storage.getItem('user') as string)
  useEffect(() => {
    getRoomUser()
    channel.onmessage = function (event) {
      const { type, time, roomUserList, footerList, currentSpeakUserMe } = event.data;
      const footerListTemplate = [...footerLists];
      switch (type) {
        case 'time':
          setTime(time)
          break;
        case 'roomUserList':
          setRoomUserLists(roomUserList)
          break;
        case 'footerList':
          footerListTemplate[0].title = footerList[0][0].active ? '解除静音' : '静音';
          footerListTemplate[0].active = footerList[0][0].active;
          footerListTemplate[1].title = footerList[0][1].active ? '开启视频' : '关闭视频';
          footerListTemplate[1].active = footerList[0][1].active;
          footerListTemplate[4].title = footerList[1][3].active ? '录制中' : '录制';
          footerListTemplate[4].active = footerList[1][3].active;
          setFooterLists(footerListTemplate)
          break;
        case 'currentSpeakUserMe':
          let domMe = document.getElementById(`micr-item-${userInfo.uid}`) as HTMLDivElement;
          if (domMe) {
            domMe.style.height = `${currentSpeakUserMe}%`
          }
          break;
      }
    }
  }, []);

  // 获取房间用户
  const getRoomUser = async (): Promise<void> => {
    const data = JSON.parse(storage.getItem('stateInfo') as string)
    await GetRoomUser(data.channelId).then(res => {
      if (res.code === 200) {
        res.data.forEach((item: any) => {
          item.isShow = true;
          item.isRoom = true;
          item.isAdmin = role.ID.includes(item.roleId) || item.isRoomManager
        })
        setRoomUserLists(res.data)
        channel.postMessage({
          type: 'shareScreenWindowGetFooterLists',
        });
      }
    })
  }
  // 底部按钮点击效果
  const changeFooterListSelect = (item: any, index: number, bool: boolean): void => {
    let arr = ['静音', '解除静音', '关闭视频', '开启视频']
    if (arr.indexOf(item.title) === -1) {
      const footerListTemplate = [...footerLists]
      footerListTemplate[index].select = bool;
      setFooterLists(footerListTemplate)
    }
  }
  return (
    <>
      <div className={styles.shareScreenWindow} style={{ width: isExpand ? '100%' : '100%' }}>
        <div className={styles.shareScreenWindowTitle}>
          <span>{time} 共享中</span>
          {isExpand ? <span className='drag' onClick={() => {
            channel.postMessage({
              type: 'shareScreenWindowClose'
            });
          }}>结束共享</span> : <span style={{ visibility: 'hidden' }}>结束共享</span>}
        </div>
        {isExpand ? null : <div className={`${styles.shareScreenWindowContent} drag`}>
          <div className={styles.shareScreenWindowContentList}>
            {footerLists.map((item: any, index: number) => {
              return (
                <div
                  onMouseDown={() => changeFooterListSelect(item, index, true)}
                  onMouseUp={() => changeFooterListSelect(item, index, false)}
                  onMouseLeave={() => changeFooterListSelect(item, index, false)}
                  onClick={async () => {
                    switch (item.title) {
                      case '静音':
                      case '解除静音':
                      case '关闭视频':
                      case '开启视频':
                      case '录制':
                      case '录制中':
                        channel.postMessage({
                          type: 'shareScreenWindowfooterListsTitle',
                          shareScreenWindowfooterListsTitle: item.title
                        });
                        break;
                      case '聊天':
                        const chatBigWindow = await getKeyOpenChildWindow('chatBigWindow')
                        if (!chatBigWindow) {
                          window.electron.createChildWindow({
                            url: location.origin + `/#/chatBigWindow`,
                            width: 540,
                            height: 640,
                            key: 'chatBigWindow',
                          })
                          setKeyOpenChildWindow('chatBigWindow', true)
                        }
                        break;
                      case '成员':
                        const userListWindow = await getKeyOpenChildWindow('userListWindow')
                        if (!userListWindow) {
                          window.electron.createChildWindow({
                            url: location.origin + `/#/userListWindow`,
                            width: 440,
                            height: 540,
                            key: 'userListWindow',
                          })
                          setKeyOpenChildWindow('userListWindow', true)
                        }
                        break;
                    }
                  }}
                  key={index}>
                  <div>
                    {!item.active ? <div style={{ backgroundImage: `url(${ImageUrl.icon49})` }} id={`micr-item-${userInfo.uid}`}>
                    </div> : ''}
                    {item.select ? <img src={item.iconSelect} alt="" /> : <img src={item.active ? item.iconActive : item.icon} alt="" />}
                  </div>
                  <span>{item.title}{item.title === '成员' ? `(${roomUserLists.filter((item: any) => item.isRoom).length})` : ''}</span>
                </div>
              )
            })}
          </div>
          <Button type="primary" style={{ backgroundColor: '#FF5219', marginRight: '14px' }} size={'small'} onClick={() => {
            channel.postMessage({
              type: 'shareScreenWindowClose'
            });
          }}>
            结束共享
          </Button>
        </div>}
        <div className={`${styles.shareScreenWindowExpand} drag`} onClick={() => {
          setIsExpand(!isExpand)
          window.electron.setChildWindow({
            width: isExpand ? 440 : 440 / 2,
            key: 'shareScreenWindow',
          })
        }}>
          <span>{isExpand ? '展开' : '收起'}</span>
          {isExpand ? <CaretDownOutlined /> : <CaretUpOutlined />}
        </div>
      </div >
    </>
  )
}

export default ShareScreenWindow
