import BMapService from '@/utils/mapService';
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons';
import { useModel } from '@umijs/max';
import { useToggle } from 'ahooks';
import { ConfigProvider, Flex, Input, Popover, Space, Switch } from 'antd';
import classNames from 'classnames';
import gsap from 'gsap';
import React, {
  CSSProperties,
  Fragment,
  useEffect,
  useRef,
  useState,
} from 'react';
// import { CustomOverlay, Polygon } from 'react-bmapgl';
import BMapView from '@/components/BMapView';
import CooglMap from '@/components/CooglMap';
import { getColorByIndex } from '@/utils/ui';
import { CustomOverlay, Polygon } from 'react-bmapgl';
import PopoverCard from '../PopoverCard';
import styles from './index.less';

/** @name 街道地图 */
const StreetMap: React.FC<{ data: { data: any[]; indexs: any } }> = ({
  data,
}) => {
  const [state, { toggle }] = useToggle('left', 'right');
  const listRef = useRef<HTMLDivElement>(null);
  const [expandStatus, setExpandStatus] = useState(true);
  /** @description store */
  const { selectDistrict, areaListDto } = useModel('regionalIndex');
  /** 是否启用百度地图 */
  const [isBmap, setIsBmap] = useState(false);
  const MapRef = useRef<any>();

  const expandSlider = () => {
    if (expandStatus === true) {
      setExpandStatus(false);
      gsap.to(listRef.current, {
        x: -352,
      });
    } else {
      setExpandStatus(true);
      gsap.to(listRef.current, {
        x: 0,
      });
    }
  };

  const renderStreetItem = (
    index: number,
    name: string,
    val: number,
    item: any,
  ) => {
    return (
      <Popover
        key={index}
        placement="right"
        arrow={false}
        overlayInnerStyle={{
          padding: 0,
          borderRadius: '0px 30px 30px 0px',
        }}
        // mouseEnterDelay={1}
        color="transparent"
        content={<PopoverCard data={item}></PopoverCard>}
      >
        <Flex
          className={styles.streetItem}
          align="center"
          justify="space-between"
        >
          <Space>
            <div className={styles.streetIndex}>
              {index < 9 ? '0' + (index + 1) : index + 1}
            </div>
            <div className={styles.streetName}>{name}</div>
          </Space>
          <div className={styles.streetVal}>{val}</div>
        </Flex>
      </Popover>
    );
  };

  const renderRoadItem = (
    index: number,
    name: string,
    val: number,
    item: any,
  ) => {
    return (
      <Popover
        key={index}
        placement="right"
        arrow={false}
        overlayInnerStyle={{
          padding: 0,
          borderRadius: '0px 30px 30px 0px',
        }}
        // mouseEnterDelay={1}
        color="transparent"
        content={<PopoverCard data={item}></PopoverCard>}
      >
        <Flex
          className={styles.streetItem}
          align="center"
          justify="space-between"
        >
          <Space>
            <div className={styles.streetIndex}>
              {index < 9 ? '0' + (index + 1) : index + 1}
            </div>
            <div className={styles.streetName}>{name}</div>
          </Space>
          <div className={styles.streetVal}>{val}</div>
        </Flex>
      </Popover>
    );
  };

  /**
   * @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);
    // }
  };
  /** @description 移动视角到能显示全部覆盖物 */
  useEffect(() => {
    setTimeout(() => {
      setViewport();
    }, 500);
  }, [MapRef.current, areaListDto]);
  const streetdata = [
    {
      name: '华阳街道',
      val: 98.6,
      problemNum: 235,
      compare: 1.3,
      id: 1,
    },
    {
      name: '华阳街道',
      val: 98.6,
      problemNum: 235,
      compare: 1.3,
      id: 1,
    },
    {
      name: '华阳街道',
      val: 98.6,
      problemNum: 235,
      compare: 1.3,
      id: 1,
    },
    {
      name: '华阳街道',
      val: 98.6,
      problemNum: 235,
      compare: 1.3,
      id: 1,
    },
    {
      name: '华阳街道',
      val: 98.6,
      problemNum: 235,
      compare: 1.3,
      id: 1,
    },
    {
      name: '华阳街道',
      val: 98.6,
      problemNum: 235,
      compare: 1.3,
      id: 1,
    },
    {
      name: '华阳街道',
      val: 98.6,
      problemNum: 235,
      compare: 1.3,
      id: 1,
    },
    {
      name: '华阳街道',
      val: 98.6,
      problemNum: 235,
      compare: 1.3,
      id: 1,
    },
    {
      name: '华阳街道',
      val: 98.6,
      problemNum: 235,
      compare: 1.3,
      id: 1,
    },
    {
      name: '华阳街道',
      val: 98.6,
      problemNum: 235,
      compare: 1.3,
      id: 1,
    },
    {
      name: '华阳街道',
      val: 98.6,
      problemNum: 235,
      compare: 1.3,
      id: 1,
    },
  ];
  return (
    <div className={styles.container}>
      {isBmap ? (
        <BMapView
          zoom={13}
          ref={MapRef}
          style={{ width: '100%', height: '110%' }}
          center={new BMapGL.Point(104.066349, 30.658842)}
        >
          <Fragment>
            <Polygon
              fillColor={getColorByIndex(Number(data?.data?.qualitySign))}
              strokeColor="#fff"
              fillOpacity={0.3}
              strokeWeight={2}
              path={BMapService.buildPoints(data?.data?.points)}
            ></Polygon>
            <CustomOverlay
              position={BMapService.buildPoint(
                Number(data?.data?.centerX),
                Number(data?.data?.centerY),
              )}
            >
              <div
                className={styles.indexMarker}
                style={
                  BMapService.getMakerCSS(
                    Number(data?.data?.qualitySign),
                  ) as CSSProperties
                }
              >
                {Number(data?.data?.qualitySign)}
              </div>
            </CustomOverlay>
          </Fragment>
        </BMapView>
      ) : (
        <CooglMap.MapView
          zoom={13}
          ref={MapRef}
          center={{ x: 104.066349, y: 30.658842 }}
        >
          <Fragment>
            <CooglMap.Polygon
              fillColor={getColorByIndex(Number(data?.data?.qualitySign))}
              strokeColor="#fff"
              fillOpacity={0.3}
              strokeWidth={2}
              points={data?.data?.points}
            ></CooglMap.Polygon>
            <CooglMap.CustomOverlay
              position={[
                Number(data?.data?.centerX),
                Number(data?.data?.centerY),
              ]}
            >
              <div
                className={styles.indexMarker}
                style={
                  BMapService.getMakerCSS(
                    Number(data?.data?.qualitySign),
                  ) as CSSProperties
                }
              >
                {Number(data?.data?.qualitySign)}
              </div>
            </CooglMap.CustomOverlay>
          </Fragment>
        </CooglMap.MapView>
      )}
      <div className={styles.btnGroup}>
        <div
          onClick={toggle}
          className={classNames(
            styles.btn,
            state === 'left' ? styles.btnSelected : undefined,
          )}
        >
          区域
        </div>
        <div
          onClick={toggle}
          className={classNames(
            styles.btn,
            state === 'right' ? styles.btnSelected : undefined,
          )}
        >
          道路
        </div>
      </div>
      <div className={styles.listContainer} ref={listRef}>
        <div className={styles.actionBtn} onClick={expandSlider}>
          {expandStatus ? (
            <div
              style={{
                textOrientation: 'upright',
                writingMode: 'vertical-rl',
              }}
            >
              {/* <p>收</p>
              <p>起</p> */}
              收起
              <DoubleLeftOutlined></DoubleLeftOutlined>
            </div>
          ) : (
            <div
              style={{
                textOrientation: 'upright',
                writingMode: 'vertical-rl',
              }}
            >
              展开
              {/* <p>展</p>
              <p>开</p> */}
              <DoubleRightOutlined></DoubleRightOutlined>
            </div>
          )}
        </div>
        <div className={styles.listTitle}>
          {state === 'left' ? '街道列表' : '监管道路列表'}
        </div>
        {state === 'left' && (
          <div className={styles.listContent}>
            {streetdata.map((item, index) => {
              return renderStreetItem(index, item.name, item.val, item);
            })}
          </div>
        )}
        {state === 'right' && (
          <div>
            <Flex gap={12}>
              <ConfigProvider
                theme={{
                  components: {
                    Input: {
                      colorBgContainer: '#326FA7',
                      borderRadius: 25,
                    },
                  },
                }}
              >
                <Input
                  style={{ border: 'unset' }}
                  placeholder="输入道路名称"
                ></Input>
              </ConfigProvider>

              <div className={styles.searchBtn}>查询</div>
            </Flex>
            <div className={styles.subTitle}>道路类型</div>
            <Flex gap={10}>
              {['全部', '一类', '二类', '三类'].map((item) => {
                return (
                  <div key={item} className={styles.tabItem}>
                    {item}
                  </div>
                );
              })}
            </Flex>
            <div className={styles.roadList}>
              {streetdata.map((item, index) => {
                return renderRoadItem(index, item.name, item.val, item);
              })}
            </div>
          </div>
        )}
      </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>
    </div>
  );
};

export default StreetMap;
