import styles from '@/page/Meeting/NoticeWindow/index.module.scss'
import { setKeyOpenChildWindow } from '@/utils/package/public';
import { Button, notification } from 'antd';
import { useEffect } from "react";

const NoticeWindow: React.FC = () => {
  const [api, contextHolder] = notification.useNotification({
    stack: {
      threshold: 3
    }
  });
  const channel = new BroadcastChannel('meeting_channel');
  let time: NodeJS.Timeout;
  useEffect(() => {
    channel.onmessage = function (event) {
      const { type, noticeItem } = event.data;
      switch (type) {
        case 'noticeItem':
          api.open({
            message: '',
            description: <div>
              <span style={{ fontSize: '16px' }}>{noticeItem.uname}申请发言</span>
              <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                <Button
                  type="primary"
                  className='m-ant-btn'
                  onClick={async (e: any) => {
                    let i = e.nativeEvent.path;
                    if (i) {
                      i.forEach((i: any) => {
                        if (i.className === 'ant-notification-notice ant-notification-notice-closable') {
                          i.childNodes.forEach((row: any) => {
                            if (row.className === 'ant-notification-notice-close') {
                              row.click()
                              channel.postMessage({
                                type: 'noticeWindowPostRoomManager',
                                noticeWindowPostRoomManager: {
                                  uid: noticeItem.uid
                                }
                              });
                            }
                          })
                        }
                      })
                    }
                  }}
                >接受</Button>
                <Button
                  type="primary"
                  onClick={(e: any) => {
                    let item = e.nativeEvent.path;
                    if (item) {
                      item.forEach((item: any) => {
                        if (item.className === 'ant-notification-notice ant-notification-notice-closable') {
                          item.childNodes.forEach((row: any) => {
                            if (row.className === 'ant-notification-notice-close') {
                              row.click()
                            }
                          })
                        }
                      })
                    }
                  }}
                  style={{ backgroundColor: '#EC3C3C', marginLeft: '14px' }}
                >拒绝</Button>
              </div>
            </div>,
            duration: 10,
            placement: 'bottomRight',
            showProgress: true,
            pauseOnHover: false,
          });
          break;
      }
    }
  }, []);
  useEffect(() => {
    setTimeout(() => {
      time = setInterval(() => {
        const dom = document.getElementsByClassName('ant-notification')
        if (dom.length === 0) {
          window.electron.closeChildWindow('noticeWindow')
          setKeyOpenChildWindow('noticeWindow', false)
        }
      }, 1000)
    }, 3000);
    return () => {
      clearInterval(time)
    };
  }, [])
  return (
    <>
      <div className={`${styles.noticeWindow} drag`}>
        {contextHolder}
      </div>
    </>
  )
}

export default NoticeWindow