import React, { useState, useEffect, useRef } from 'react';
import mapstyles from '@/assets/css/map.less';
import { useModel } from 'umi';

import cx from 'classnames';
import Icon from '@/tenants-ui/SgIcon';

type MapProps = {
  type: string;
  // searchText: any;
  selFloorId?: string;
  render: (item: API.MapInfo, index: number) => React.ReactNode;
  mapList: API.MapInfo[];
  mapSize: any;
};

const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, mapSize }) => {
  //useModel 注释掉 不用啦 晚会删

  //   useEffect(() => {
  //     getMapListData(selFloorId);
  //   }, [selFloorId]);
  const {
    searchText,
    changeSearchSpace,
    changeSearchText,
    changeSearchFloorId,
    changeSearchBuildId,
  } = useModel('searchInfo');

  const [startPageX, setStartPageX] = useState<number>(0);
  const [startPageY, setStartPageY] = useState<number>(0);

  const [translateX, setTranslateX] = useState<number>(0);
  const [translateY, setTranslateY] = useState<number>(0);

  const [originX, setOriginX] = useState<number>(0);
  const [originY, setOriginY] = useState<number>(0);
  const [mscale, setMscale] = useState<number>(1);
  //最大的缩放比例
  const [maxscale, setMaxscale] = useState<number>(1.6);
  const [minscale, setMinscale] = useState<number>(0.3);
  const [canMove, setCanMove] = useState<boolean>(false);

  const [mapHeight, setMapHeight] = useState(500);

  const currentFloorId = useRef<any>(null);
  const mapRef = useRef();
  //   let mapWidth: number = 3000,
  //     mapHeight: number = 1200;

  const mouseDownEvent = (event: React.MouseEvent) => {
    setStartPageX(event.pageX);
    setStartPageY(event.pageY);
    //console.log('mouseDownEvent', startPageX, event.pageY);
    setCanMove(true);
  };
  const mouseUpEvent = (event: React.MouseEvent) => {
    //console.log('mouseUpEvent', event);
    setCanMove(false);
  };
  const mouseMoveEvent = (event: React.MouseEvent) => {
    if (canMove) {
      let nowPageX = event.pageX;
      let nowPageY = event.pageY;
      setTranslateX(translateX + nowPageX - startPageX);
      setTranslateY(translateY + nowPageY - startPageY);
      //console.log('mouseMoveEvent-xx', translateX, nowPageX, startPageX);
      // console.log('mouseMoveEvent-yy', translateY, nowPageY, startPageY);

      setStartPageX(event.pageX);
      setStartPageY(event.pageY);
    }
  };
  useEffect(() => {
    console.log('mapRef', mapRef);
    // var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
    // var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
    // var originX = mapWrapWidth / 2 - translateX < 0 ? 0 : mapWrapWidth / 2 - translateX;
    // var originY = mapWrapHeight / 2 - translateY < 0 ? 0 : mapWrapHeight / 2 - translateY;
    // setOriginX(originX);
    // setOriginY(originY);
    console.log('originX', originX, 'originY', originY);
  }, [translateX, translateY]);

  const mapZoom = (event: React.MouseEvent) => {
    event.stopPropagation();
    if (mscale < maxscale) {
      var mscaleTemp = Number((mscale + 0.1).toFixed(4));
      setMscale(mscaleTemp);
      var changeWidth = mapSize.width * 0.1;
      var changeHeight = mapSize.height * 0.1;
      setTranslateX(translateX - changeWidth / 2);
      setTranslateY(translateY - changeHeight / 2);
    }

    console.log('mscale', mscale);
  };
  const mapReduce = (event: React.MouseEvent) => {
    event.stopPropagation();
    //console.log('mapReduce', mscale);
    if (mscale > minscale) {
      var mscaleTemp = Number((mscale - 0.1).toFixed(4));
      setMscale(mscaleTemp);
      var changeWidth = mapSize.width * 0.1;
      var changeHeight = mapSize.height * 0.1;
      setTranslateX(translateX + changeWidth / 2);
      setTranslateY(translateY + changeHeight / 2);
    }

    console.log('mscale', mscale);
  };

  //const fixWidth = 1300;
  useEffect(() => {
    var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
    var scale = Number((mapWrapWidth / mapSize.width).toFixed(4));
    setMscale(scale);
    if (scale < 0.3) {
      console.log('mscale', mscale);
      setMinscale(scale);
    }
  }, [mapSize]);

  //当地图发生改变时 的搜索
  useEffect(() => {
    //searchText使用对象 防止修改了 不再重新定位
    //根据searchText进行搜索 如果mapList 更改了

    if (searchText && searchText.text && mapList.length > 0) {
      let left: any = 0,
        top: any = 0;

      var filterItem = mapList.filter((item) => {
        return item.localName == (searchText && searchText.text);
      });
      if (filterItem.length == 0) return;
      //找到搜索的空间
      changeSearchSpace(filterItem[0]);
      //console.log('selectSpace2', filterItem[0]);
      left = -((filterItem[0] || {}).left || 0);
      top = -((filterItem[0] || {}).top || 0);
      var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
      var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
      setTranslateX(left * mscale + mapWrapWidth / 2);
      setTranslateY(top * mscale + mapWrapHeight / 2);
      //搜索完成
      changeSearchBuildId(''); //清空搜索记录  以防两次搜索一样的建筑的 没反应
      changeSearchFloorId(''); //清空搜索记录 以防两次搜索一样的楼层时 没反应 要不要换位置
      changeSearchText({}); //清空搜索记录 好进行一些操作
    } else if (currentFloorId.current != selFloorId) {
      //如果两次的selFloorId 不一样 才会更改地图的位置为0 0
      setTranslateX(0);
      setTranslateY(0);
    }
    currentFloorId.current = selFloorId;
    //console.log('selectSpace2');
  }, [mapList]);

  //搜索信息改变时的搜索
  useEffect(() => {
    if (searchText && searchText.text && mapList.length > 0) {
      let left: any = 0,
        top: any = 0;

      var filterItem = mapList.filter((item) => {
        return item.localName == (searchText && searchText.text);
      });
      if (filterItem.length == 0) return;
      //找到搜索的空间
      changeSearchSpace(filterItem[0]);

      //console.log('selectSpace2', filterItem[0]);
      left = -((filterItem[0] || {}).left || 0);
      top = -((filterItem[0] || {}).top || 0);
      var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
      var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
      //   left = left * mscale + mapWrapWidth / 2;
      //   top = top * mscale + mapWrapHeight / 2;

      setTranslateX(left * mscale + mapWrapWidth / 2);
      setTranslateY(top * mscale + mapWrapHeight / 2);
      changeSearchBuildId(''); //清空搜索记录  以防两次搜索一样的建筑的 没反应
      changeSearchFloorId(''); //清空搜索记录 以防两次搜索一样的楼层时 没反应 要不要换位置
      changeSearchText({});
    }
  }, [searchText]);

  useEffect(() => {
    // todo 要不要用呢
    document.querySelector('#root').addEventListener(
      'mouseup',
      function () {
        //console.log('mouseUpEvent');
        setCanMove(false);
      },
      true,
    );
  }, []);

  useEffect(() => {
    console.log('document', document.body.offsetHeight);
    var bodyHeight = document.body.offsetHeight;
    setMapHeight(bodyHeight - 293);
  }, []);
  return (
    <div
      className={mapstyles.mapwrap}
      ref={mapRef}
      onMouseDown={(event) => {
        mouseDownEvent(event);
      }}
      onMouseUp={(event) => {
        mouseUpEvent(event);
      }}
      onMouseMove={(event) => {
        mouseMoveEvent(event);
      }}
      style={{ height: mapHeight + 'px' }}
    >
      <div
        className={cx(mapstyles.map, { [mapstyles.equipmentMap]: type == 'equipment' })}
        style={{
          transform: `translate(${translateX}px,${translateY}px) scale(${mscale},${mscale})`,
          width: mapSize.width,
          height: mapSize.height,
        }}
      >
        {mapList.map(function (item, index) {
          return render(item, index);
        })}
      </div>
      <div className={mapstyles.mapControl}>
        <div
          className={cx(mapstyles.zoom, { [mapstyles.disable]: mscale >= maxscale })}
          onClick={(event) => {
            mapZoom(event);
          }}
        >
          <Icon className="" type="zoom"></Icon>
        </div>
        <div
          className={cx(mapstyles.zoom, { [mapstyles.disable]: mscale <= minscale })}
          onClick={(event) => {
            mapReduce(event);
          }}
        >
          <Icon className="" type="reduce"></Icon>
        </div>
      </div>
    </div>
  );
};
export default Map;
