import { SignalFilled } from '@ant-design/icons';
import { Modal } from 'antd';
import { useEffect, useState } from 'react';
import { IChatItem } from '../ChatLogsType';
import styles from './index.module.scss';

export const ChatVote: React.FC<IChatItem> = (props) => {
  const votetype: any = { '101': '发起投票', '102': '参与投票' };
  const [open, setOpen] = useState(false);
  const [voteitem, setVoteitem] = useState([]);

  useEffect(() => {
    try {
      const msg = JSON.parse(props.chat?.content as string);
      setVoteitem(msg?.voteitem);
    } catch (e) {}
  }, [props.chat]);

  function content() {
    try {
      const msg = JSON.parse(props.chat?.content as string);

      return (
        <>
          <div
            style={{ display: 'flex', color: '#000', flexDirection: 'column', cursor: 'pointer' }}
            onClick={() => setOpen(true)}
          >
            <div style={{ wordBreak: 'break-all', fontWeight: 'bold' }}>{msg?.votetitle}</div>
            <div style={{ wordBreak: 'break-all' }}>
              {Array.isArray(msg?.voteitem)
                ? [0, 1, 2].map((item) => {
                    return msg?.voteitem[item] ? (
                      <div key={item} className={styles.voteitem}>
                        {msg?.voteitem[item]}
                      </div>
                    ) : (
                      <></>
                    );
                  })
                : null}
            </div>
            <div
              style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}
            >
              <SignalFilled style={{ color: '#F0B40E' }} /> 投票 [
              {votetype[msg?.votetype as string]}]
            </div>
          </div>
          <Modal
            open={open}
            title={msg?.votetitle}
            centered
            onCancel={() => {
              setOpen(false);
            }}
            footer={false}
          >
            <div style={{ maxHeight: '75vh', overflow: 'auto' }}>
              {Array.isArray(voteitem)
                ? voteitem.map((item) => {
                    return (
                      <div key={item} className={styles.voteitem}>
                        {item}
                      </div>
                    );
                  })
                : null}
            </div>
          </Modal>
        </>
      );
    } catch (e) {}

    return (
      <div style={{ display: 'flex', color: '#000', flexDirection: 'column' }}>
        <div style={{ wordBreak: 'break-all' }}>{props.chat?.content}</div>
        <div style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}>
          <SignalFilled style={{ color: '#F0B40E' }} /> 投票
        </div>
      </div>
    );
  }

  return <>{content()}</>;
};