import styles from '@/page/Meeting/NoticeWindow/index.module.scss'
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');
  useEffect(() => {
    window.electron.setChildWindowShow({
      key: 'noticeWindow',
      bool: false
    })
    channel.onmessage = function (event) {
      const { type, noticeItem } = event.data;
      switch (type) {
        case 'noticeItem':
          api.open({
            message: '',
            description: <div>
              <div style={{ fontSize: '16px' }}>
                <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={noticeItem.uname}>{noticeItem.uname}</div>
                <div>申请发言</div>
              </div>
              <div style={{ display: 'flex', justifyContent: 'flex-end' }} className='drag'>
                <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>,
            onClose: () => {
              setTimeout(() => {
                const dom = document.getElementsByClassName('ant-notification')
                if (dom.length === 0) {
                  window.electron.setChildWindowShow({
                    key: 'noticeWindow',
                    bool: false
                  })
                }
              }, 500);
            },
            duration: 10,
            placement: 'bottomRight',
            showProgress: true,
            pauseOnHover: false,
          });
          break;
      }
    }
    return () => {
      channel.close();
    };
  }, []);
  return (
    <>
      <div className={`${styles.noticeWindow} drag`}>
        {contextHolder}
      </div>
    </>
  )
}

export default NoticeWindow