/*
 * @Author: your name
 * @Date: 2022-04-22 11:03:24
 * @Description:
 * @FilePath: /zl-large-screen/src/components/LargeScreenBoardContent/index.tsx
 */

import React, { useRef, useState, useEffect, useContext } from 'react';

import LargeScreenBoardZoom from '../LargeScreenBoardZoom/index';
import LargeScreenBoardBox from '../LargeScreenBoardBox/index';
import Guides from '@scena/react-guides';
import Icon from '../Icon/index';

let resizeObserver; // 监听器
let boardWidth = 0; // 记录画布宽
import { ILargeScreenBoardContentProps } from '../../type/LargeScreenBoard';
import { Board } from '../LargeScreenBoard/index';
import { useRecoilState } from 'recoil';
import { layerCurrentDateTime } from '../../store/page';

const LargeScreenBoardContent: React.FC<ILargeScreenBoardContentProps> = () => {
  const {
    zoomList,
    zoomValue: scaleValue,
    zoomChange,
    guidesData,
    guidesChange,
    preview,
    leftIcons,
    rightIcons,
    theme,
    layerDateTime
  } = useContext(Board); // 缩放列表，缩放值和事件

  // const openFlag = '';
  const [isShowLine, setIsShowLine] = useState(true); // 是否显示参考线
  const [horizontalWidth, setHorizontalWidth] = useState(0); // 水平标尺宽度
  const [horizontalHeight, setHorizontalHeight] = useState(0); // 水平标尺高度
  const [unit, setUnit] = useState(100); // 水平标尺步长

  let horizontalGuides = useRef<any>(null); // 水平标尺
  let verticalGuides = useRef<any>(null); // 垂直标尺
  let boardWidthWrap = useRef<any>(null); // 画布宽度监听

  const [currentDateTime, setCurrentDateTime] = useRecoilState(layerCurrentDateTime); //记录当前日期时间

  useEffect(() => {
    const dom: any = document.getElementById('contentBox');
    if (dom) {
      const { scrollTop, scrollLeft } = dom;
      // 纵滚
      verticalGuides.current.scroll(scrollTop / scaleValue);
      verticalGuides.current.scrollGuides(scrollTop / scaleValue);

      // 横滚
      horizontalGuides.current.scroll(scrollLeft / scaleValue);
      horizontalGuides.current.scrollGuides(scrollLeft / scaleValue);

      dom.addEventListener('scroll', scrollEventListener);
      let dom2: any = document.getElementsByClassName('zl-ls-board')[0];
      const { width } = dom2?.getBoundingClientRect();
      boardWidth = width;
    }

    verticalGuides.current.resize(1);
    horizontalGuides.current.resize(1);
    computerUnit();
    return () => {
      dom?.removeEventListener('scroll', scrollEventListener);
    };
  }, [scaleValue]);

  useEffect(() => {
    // 监听画布高度变化
    resizeObserver = new ResizeObserver((entries) => {
      for (const entry of entries) {
        const width = entry?.contentRect?.width;
        const height = entry?.contentRect?.height;
        setHorizontalWidth(width);
        setHorizontalHeight(height);
      }
    });

    resizeObserver.observe(boardWidthWrap?.current);
  }, []);

  // 监听日期时间变化
  useEffect(() => {
    if (layerDateTime){
      setCurrentDateTime(layerDateTime)
    }
  }, [layerDateTime])
  
  // 参考线滚动事件
  const scrollEventListener = (e) => {
    const { scrollTop, scrollLeft } = e.srcElement;
    // 纵滚
    verticalGuides.current.scroll(scrollTop / scaleValue);
    verticalGuides.current.scrollGuides(scrollLeft / scaleValue);

    // 横滚
    horizontalGuides.current.scroll(scrollLeft / scaleValue);
    horizontalGuides.current.scrollGuides(scrollTop / scaleValue);
  };

  // 参考线回调
  const changeGuides = (type, data) => {
    guidesChange({ type, data });
  };

  // 按比例计算步长
  const computerUnit = () => {
    if (scaleValue < 0.2) {
      setUnit(500);
    } else if (scaleValue < 0.3) {
      setUnit(200);
    } else if (scaleValue < 1) {
      setUnit(100);
    } else if (scaleValue < 2.5) {
      setUnit(50);
    } else if (scaleValue < 4) {
      setUnit(10);
    }
  };

  return (
    <div
      className="zl-ls-board-content"
      ref={boardWidthWrap}
      style={{
        height: `${
          (Array.isArray(leftIcons) && leftIcons?.length > 0) ||
          (Array.isArray(rightIcons) && rightIcons?.length > 0)
            ? 'calc(100% - 49px)'
            : '100%'
        }`
      }}
    >
      <div
        className="guides-line-toggle"
        onClick={() => setIsShowLine(!isShowLine)}
      >
        <Icon
          classname="zl-guides-line-toggle-icon"
          name={`${
            isShowLine ? 'icon-biaochixianxianshi' : 'icon-biaochixianyincang'
          }`}
        />
      </div>
      <div className="zl-ls-board-content-horizontal-guides">
        <Guides
          ref={horizontalGuides}
          type="horizontal" // 方向
          width={horizontalWidth - 30}
          height={30}
          backgroundColor={theme === 'white' ? '#f7f7f7' : '#14161a'} // 背景色
          lineColor={theme === 'white' ? '#e3e3e3' : '#2b2e38'} // 刻度线颜色
          textColor={theme === 'white' ? '#656565' : '#eee'} // 数字颜色
          unit={unit} // 步长
          zoom={scaleValue} // 缩放比例
          showGuides={isShowLine} // 参考线
          displayDragPos={true} //参考线坐标数值
          defaultGuides={guidesData?.horizontal} // 回显参考线
          onChangeGuides={({ guides }) => {
            changeGuides('horizontal', guides);
          }}
        />
      </div>
      <div className="zl-ls-board-content-vertical-guides">
        <Guides
          ref={verticalGuides}
          type="vertical"
          width={30}
          height={horizontalHeight - 70}
          backgroundColor={theme === 'white' ? '#f7f7f7' : '#14161a'} // 背景色
          lineColor={theme === 'white' ? '#e3e3e3' : '#2b2e38'} // 刻度线颜色
          textColor={theme === 'white' ? '#656565' : '#eee'} // 数字颜色
          unit={unit}
          zoom={scaleValue}
          showGuides={isShowLine} // 参考线
          displayDragPos={true}
          defaultGuides={guidesData?.vertical} // 回显参考线
          onChangeGuides={({ guides }) => {
            changeGuides('vertical', guides);
          }}
        />
      </div>
      <LargeScreenBoardBox scaleValue={scaleValue} />
      <LargeScreenBoardZoom
        zoomValue={scaleValue}
        zoomList={zoomList}
        zoomChange={zoomChange}
        preview={preview}
      />
    </div>
  );
};

export default LargeScreenBoardContent;