import React, { useState, useEffect, useRef } from 'react';
import { Radio, Empty } from 'antd';
import style from '../index.less';
import moment from 'moment';
import { ChartBoxTitle } from './ChartBox';
import { useRequest } from '@umijs/max';
import {
  getNotificationList,
  getProjectActive,
} from '@/Project/services/DataMeter';
let LoopTime: NodeJS.Timer;
const normalTimer = 10000;

function MessageCenter(props: DataMeter.IModelsProps) {
  const {
    child,

    setActive,
    layout,
    projectId,
    // news,
    // memorabilia,
    // awards,
    // notificationList,
  } = props;
  const [active, setSelfActive] = useState(
    layout.active || child.find((item) => item.show)?.key,
  );
  const [showTabs, setShowTabs] = useState(false);
  const [isPlay, setIsPlay] = useState(false);
  const [currentIndex, setCurrentIndex] = useState(0);
  const [title, setTitle] = useState('');
  const ulRef = useRef<HTMLUListElement | null>(null);
  const id = projectId || -1;

  const notificationRequest = useRequest(getNotificationList, {
    defaultParams: [
      {
        projectId: id,
        msgType: 6,
      },
    ],
  });
  const newsRequest = useRequest(getProjectActive, {
    defaultParams: [
      {
        projectId: id,
        type: 1,
      },
    ],
  });
  const memorabiliaRequest = useRequest(getProjectActive, {
    defaultParams: [
      {
        projectId: id,
        type: 2,
      },
    ],
  });
  const awardsRequest = useRequest(getProjectActive, {
    defaultParams: [
      {
        projectId: id,
        type: 3,
      },
    ],
  });
  const news: any = notificationRequest.data?.list || [];
  const memorabilia: any = newsRequest.data?.list || [];
  const awards: any = memorabiliaRequest.data?.list || [];
  const notificationList: any = awardsRequest.data?.list || [];

  const StartTimeout = (time: number) => {
    LoopTime = setInterval(() => {
      if (news.length > 0) {
        let scroll: any = document.getElementById('scroll')!;
        if (!scroll) return;
        if (scroll.scrollTop + scroll.clientHeight >= scroll.scrollHeight)
          scroll.scrollTop = 0;
        else scroll.scrollTop += ulRef.current?.children[0].clientHeight;
      }
    }, time);
  };

  const Loop = (key: string | number) => {
    if (key == 2) {
      setIsPlay(true);
      document.getElementById('scroll')!.scrollTop = 0;
      StartTimeout(normalTimer);
    } else {
      setIsPlay(false);
      setCurrentIndex(0);
      clearInterval(LoopTime);
    }
  };
  
  useEffect(() => {
    let current = child.find((item) => item.key == active);
    if (current) {
      setTitle(current.title);
    }
    if (active) {
      Loop(active);
    }
  }, [active]);
  useEffect(() => {
    if (isPlay) StartTimeout(normalTimer);
    return () => {
      clearInterval(LoopTime);
    };
  }, [currentIndex, news]);

  var content;

  switch (active) {
    case 1:
      if (notificationList.length > 0) {
        content = (
          <ul className={style.messageList}>
            {notificationList.map((item: any) => (
              <li key={item.ID}>
                <div className={style.messageTitle}>
                  {moment(item.CreatedOn).format('YYYY-MM-DD')}
                </div>
                <div className={style.messageContent}>{item.MsgBody}</div>
              </li>
            ))}
          </ul>
        );
      } else {
        content = <Empty />;
      }
      break;
    case 2:
      if (news.length > 0) {
        content = (
          <ul ref={ulRef} className={style.messageList}>
            {news.map((item: any) => (
              <li key={item.id}>
                <div className={style.messageTitle}>
                  {moment(item.c_time).format('YYYY-MM-DD')}
                </div>
                <div className={style.messageContent}>
                  <a
                    style={{ color: 'white' }}
                    // onClick={() => {
                    //   sendNewDetailToUnity(item.detail);
                    // }}
                  >
                    {item.content}
                  </a>
                </div>
              </li>
            ))}
          </ul>
        );
      } else {
        content = <Empty />;
      }
      break;
    case 3:
      if (memorabilia.length > 0) {
        content = (
          <ul className={style.messageList}>
            {memorabilia.map((item: any) => (
              <li key={item.id}>
                <div className={style.messageTitle}>
                  {moment(item.c_time).format('YYYY-MM-DD')}
                </div>
                <div className={style.messageContent}>{item.content}</div>
              </li>
            ))}
          </ul>
        );
      } else {
        content = <Empty />;
      }
      break;
    case 4:
      if (awards.length > 0) {
        content = (
          <ul className={style.messageList}>
            {awards.map((item: any) => (
              <li key={item.id}>
                <div className={style.messageTitle}>
                  {moment(item.c_time).format('YYYY-MM-DD')}
                </div>
                <div className={style.messageContent}>{item.content}</div>
              </li>
            ))}
          </ul>
        );
      } else {
        content = <Empty />;
      }
      break;
  }
  return (
    <div className={style.modelBox}>
      
      <ChartBoxTitle
        title={title == '全部' ? '报警中心' : title}
        showTabs={showTabs}
        setShowTabs={setShowTabs}
        width={layout.w}
      />
      {showTabs && (
        <ul className={style.tabsList}>
          {(child || [])
            .filter((item) => item.show)
            .map((item) => (
              <li
                key={item.key}
                className={`${active == item.key ? style.active : ''}`}
                onClick={() => {
                  setActive(item.key);
                  setSelfActive(item.key);
                }}
              >
                {item.title}
              </li>
            ))}
        </ul>
      )}
      <div id="scroll" className={style.modelContent}>
        {content}
      </div>
    </div>
  );
}

export default MessageCenter;
