import styles from '@/page/Meeting/ChatSmallWindow/index.module.scss'
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
import { Input } from 'antd';
import { useEffect, useState } from "react";
const ChatSmallWindow: React.FC = () => {
  const [inputValue, setInputValue] = useState<string>('')
  const [chatLists, setChatLists] = useState<any>([])
  const [isExpand, setIsExpand] = useState(false)
  const channel = new BroadcastChannel('meeting_channel');
  useEffect(() => {
    window.electron.windowHandleMessageCallBack((_e: any, data: any) => {
      setChatLists((newChatList: any) => {
        data.parmes.chatListIten.timer = setTimeout(() => {
          removeItemByIndex();
        }, 10000);
        return [data.parmes.chatListIten, ...newChatList]
      })
    })
    return () => {
      channel.close();
    }
  }, []);
  useEffect(() => {
    const chatSmallWindowView = document.getElementById('chatSmallWindowView') as HTMLElement;
    if (chatSmallWindowView) {
      chatSmallWindowView.scrollTop = chatSmallWindowView.scrollHeight;
    }
  }, [chatLists]);
  const removeItemByIndex = () => {
    setChatLists((res: any) => {
      return res.slice(0, -1)
    })
  }

  return (
    <>
      <div className={styles.chatSmallWindow}>
        <div id='chatSmallWindowView'>
          {chatLists.map((item: any, index: number) =>
            <div className={`${styles.chatSmallWindowContentLeft}`} key={index}>
              <div>
                <span>{item.userName}：</span>
                <span>{item.message}</span>
              </div>
            </div>
          )}
        </div>
        <div className='drag'>
          <Input
            placeholder="请输入内容"
            style={{ flexGrow: 1 }}
            value={inputValue}
            onChange={(e) => {
              setInputValue(e.target.value)
            }}
            onPressEnter={() => {
              if (inputValue) {
                channel.postMessage({
                  type: 'chatSmallWindowSendChannelMsg',
                  chatSmallWindowSendChannelMsg: {
                    msg: inputValue,
                  }
                });
                setInputValue('')
              }
            }}
            suffix={
              <span
                style={{ color: '#47D3D0', cursor: 'pointer' }}
                onClick={() => {
                  if (inputValue) {
                    channel.postMessage({
                      type: 'chatSmallWindowSendChannelMsg',
                      chatSmallWindowSendChannelMsg: {
                        msg: inputValue,
                      }
                    });
                    setInputValue('')
                  }
                }}
              >发送
              </span>
            }
          />
        </div>
        <div className={`drag`} onClick={() => {
          setIsExpand(!isExpand)
          window.electron.setChildWindow({
            height: isExpand ? 150 : 150 / 2,
            key: 'chatSmallWindow',
          })
        }}>
          <span>{isExpand ? '展开' : '收起'}</span>
          {isExpand ? <CaretDownOutlined /> : <CaretUpOutlined />}
        </div>
      </div >
    </>
  )
}

export default ChatSmallWindow
