import React, { useEffect, useRef, useState } from "react";
import { Modal } from "antd";
import Draggable from "react-draggable";

import styles from "./index.less";

const ClockComponent = ({ num: numNew = 0, ...props }) => {
  const [num, setNum] = useState(0);
  const [bMove, setMove] = useState(false);
  const [ModalVisible, setModalVisible] = useState(false);
  const [disabled, setDisabled] = useState(true);
  const [bounds, setBounds] = useState({ left: 0, top: 0, bottom: 0, right: 0 });
  const draggleRef = useRef(null);

  const [data, setData] = useState([]);

  useEffect(
    () => {
      if (ModalVisible) {
        const deviceTargetInfoDataPart = [
          { ...(props.deviceTargetInfoData?.[0] || {}) },
          ...(data || [])
        ].slice(0, 30); // 弹框展示内容
        setData(deviceTargetInfoDataPart);
      }
    },
    [props.deviceTargetInfoData, ModalVisible]
  );

  const timer = useRef(null);
  useEffect(
    () => {
      if (numNew === 0) return;
      if (num === numNew) return;

      if (num === 0 && numNew > 0) {
        setNum(numNew);
        return;
      }

      setNum(numNew);
      setMove(true);

      clearTimeout(timer.current);
      timer.current = setTimeout(() => {
        setMove(false);
      }, 5000);
    },
    [numNew]
  );

  if (numNew === 0) return "";

  const openModal = () => {
    if (["dProcessQty", "dTrayQty"].includes(props.sName))
      setModalVisible(true);
  };

  const closeModal = () => {
    setModalVisible(false);
  };

  const content = () => {
    const noShowWord = ['dProcessfeesendQty', 'dMaterialAdjustEndQty', 'dTransfermAdjustQty', 'dMaterialEndQty', 'dTransfermQty', 'dOeeQty', 'dProductMeterQty', 'dProductPieceQty'];
    const translate = name =>
      ({
        sTime: "时间"
      }[name] || name);
    const itemInfo = item => {
      const key = Object.keys(item).filter(
        i => i?.endsWith("Qty") && !noShowWord.includes(i)
      );
      key.unshift("sTime", "sStatusName");
      return (
        <div
          style={{
            display: "flex",
            flexWrap: "wrap",
            color: "#fff",
            marginBottom: 10,
            fontSize: 16
          }}
        >
          {key.map(j => (
            <div style={{ marginRight: 10 }}>
              {translate(j)}: {item[j]}
            </div>
          ))}
        </div>
      );
    };

    if (Array.isArray(data)) {
      return <> 
      <div className={styles.rotate}></div>
      {data.map(i => itemInfo(i))}
      </>
    }

    return "";
  };

  const onStart = (_event, uiData) => {
    const { clientWidth, clientHeight } = window.document.documentElement;
    const targetRect = draggleRef.current?.getBoundingClientRect();
    if (!targetRect) {
      return;
    }
    setBounds({
      left: -targetRect.left + uiData.x,
      right: clientWidth - (targetRect.right - uiData.x),
      top: -targetRect.top + uiData.y,
      bottom: clientHeight - (targetRect.bottom - uiData.y)
    });
  };

  return (
    <>
      <div className={styles.clock} onClick={openModal}>
        <div className={`${styles.hand} ${bMove ? styles.move : ""}`} />
      </div>
      <Modal
        title={
          <div
            style={{ fontSize: 20 }}
            onMouseOver={() => {
              if (disabled) {
                setDisabled(false);
              }
            }}
            onMouseOut={() => {
              setDisabled(true);
            }}
          >
            设备信息
          </div>
        }
        open={ModalVisible}
        onOk={closeModal}
        width={"70%"}
        onCancel={closeModal}
        footer={null}
        bodyStyle={{ background: "#000", height: "50vh", overflowY: "scroll" }}
        destroyOnClose
        maskClosable={false}
        afterClose={() => {
          setData([]);
        }}
        modalRender={modal => (
          <Draggable
            disabled={disabled}
            bounds={bounds}
            onStart={(event, uiData) => onStart(event, uiData)}
          >
            <div ref={draggleRef}>{modal}</div>
          </Draggable>
        )}
      >
        {ModalVisible && content()}
      </Modal>
    </>
  );
};

export default ClockComponent;