import BMapView from '@/components/BMapView';
import CooglMap from '@/components/CooglMap';
import BMapService from '@/utils/mapService';
import { getColorByIndex } from '@/utils/ui';
import { useModel } from '@umijs/max';
import { Space, Switch } from 'antd';
import React, { CSSProperties, Fragment, useRef, useState } from 'react';
import { CustomOverlay, Polygon } from 'react-bmapgl';
import DistrictDetailBar from '../DIstrictDetailBar';
import styles from './index.less';

/** 地图 */
const DistrictMap: React.FC = () => {
  /** @description store */
  const { selectDistrict, areaListDto } = useModel('regionalIndex');

  const MapRef = useRef<any>();
  /** 是否启用百度地图 */
  const [isBmap, setIsBmap] = useState(false);

  /**
   * @description 设置地图视野
   */
  const setViewport = () => {
    const points = areaListDto
      .map((item) => {
        return BMapService.buildPoints(item.points);
      })
      .flat(1);

    const map = MapRef.current?.map as BMapGL.Map;
    if (map) {
      map.setViewport(points);
    }
  };
  console.log(selectDistrict);

  return (
    <div className={styles.container}>
      {isBmap ? (
        <BMapView
          zoom={13}
          ref={MapRef}
          style={{ width: '100%', height: '110%' }}
          center={new BMapGL.Point(104.066349, 30.658842)}
        >
          {!selectDistrict ? (
            <Fragment>
              {areaListDto.map((item, index) => {
                return (
                  <Polygon
                    fillColor={getColorByIndex(Number(item.qualitySign))}
                    key={index}
                    strokeColor="#fff"
                    fillOpacity={0.3}
                    strokeWeight={2}
                    path={BMapService.buildPoints(item.points)}
                  ></Polygon>
                );
              })}
              {areaListDto.map((item, index) => {
                const point = BMapService.buildPoint(
                  Number(item.centerX),
                  Number(item.centerY),
                );

                return (
                  <CustomOverlay position={point}>
                    <div
                      className={styles.indexMarker}
                      style={
                        BMapService.getMakerCSS(
                          Number(item.qualitySign),
                        ) as CSSProperties
                      }
                    >
                      {Number(item.qualitySign)}
                    </div>
                  </CustomOverlay>
                );
              })}
            </Fragment>
          ) : (
            <>
              <Polygon
                fillColor={getColorByIndex(Number(selectDistrict?.qualitySign))}
                strokeColor="#fff"
                fillOpacity={0.3}
                strokeWeight={2}
                path={BMapService.buildPoints(selectDistrict?.points)}
              ></Polygon>
              <CustomOverlay
                position={BMapService.buildPoint(
                  Number(selectDistrict?.centerX),
                  Number(selectDistrict?.centerY),
                )}
              >
                <div
                  className={styles.indexMarker}
                  style={
                    BMapService.getMakerCSS(
                      Number(selectDistrict?.qualitySign),
                    ) as CSSProperties
                  }
                >
                  {Number(selectDistrict?.qualitySign)}
                </div>
              </CustomOverlay>
            </>
          )}
        </BMapView>
      ) : (
        <CooglMap.MapView
          zoom={13}
          ref={MapRef}
          center={{ x: 104.066349, y: 30.658842 }}
        >
          {!selectDistrict ? (
            <Fragment>
              {areaListDto.map((item, index) => {
                return (
                  <CooglMap.Polygon
                    fillColor={getColorByIndex(Number(item.qualitySign))!}
                    key={index}
                    strokeColor="#fff"
                    points={item.points}
                    strokeWidth={2}
                    fillOpacity={0.2}
                  ></CooglMap.Polygon>
                );
              })}
              {areaListDto.map((item, index) => {
                const point = [Number(item.centerX), Number(item.centerY)];

                return (
                  <CooglMap.CustomOverlay key={index} position={point}>
                    <div
                      className={styles.indexMarker}
                      style={
                        BMapService.getMakerCSS(
                          Number(item.qualitySign),
                        ) as CSSProperties
                      }
                    >
                      {Number(item.qualitySign)}
                    </div>
                  </CooglMap.CustomOverlay>
                );
              })}
            </Fragment>
          ) : (
            <>
              <CooglMap.Polygon
                fillColor={
                  getColorByIndex(Number(selectDistrict?.qualitySign))!
                }
                strokeColor="#fff"
                points={selectDistrict?.points}
                strokeWidth={2}
                fillOpacity={0.2}
              ></CooglMap.Polygon>
              <CooglMap.CustomOverlay
                position={[
                  Number(selectDistrict?.centerX),
                  Number(selectDistrict?.centerY),
                ]}
              >
                <div
                  className={styles.indexMarker}
                  style={
                    BMapService.getMakerCSS(
                      Number(selectDistrict?.qualitySign),
                    ) as CSSProperties
                  }
                >
                  {Number(selectDistrict?.qualitySign)}
                </div>
              </CooglMap.CustomOverlay>
            </>
          )}
        </CooglMap.MapView>
      )}

      {selectDistrict && (
        <div className={styles.districtName}>{selectDistrict.objectName}</div>
      )}
      <div className={styles.statusBar}>
        <Space>
          <Switch onChange={setIsBmap}></Switch>
          <div>启用百度地图</div>
        </Space>
        <Space>
          <div className={styles.mark} style={{ backgroundColor: '#F24F4F' }} />
          <div>应急态 &lt;60</div>
        </Space>
        <Space>
          <div className={styles.mark} style={{ backgroundColor: '#FFA81A' }} />
          <div>预警态 &lt;85</div>
        </Space>
        <Space>
          <div className={styles.mark} style={{ backgroundColor: '#00B9FF' }} />
          <div>标准态 85-95</div>
        </Space>
        <Space>
          <div className={styles.mark} style={{ backgroundColor: '#57EF58' }} />
          <div>理想态 &gt;95</div>
        </Space>
      </div>

      {selectDistrict && <DistrictDetailBar></DistrictDetailBar>}
    </div>
  );
};

export default DistrictMap;
