import React, { useEffect, useState } from 'react';
import {
  PageContainer,
  ProTable,
} from '@ant-design/pro-components';

// import { PointLayer, Scene } from '@antv/l7';
// import { GaodeMap } from '@antv/l7-maps';
// import type { PointLayerProps } from '@antv/larkmap';
import { LarkMap, useScene, PointLayer } from '@antv/larkmap';
import cityJson from '@/assets/json/quanguoshixianweizhi.json'

import './index.less';

export default () => {

  const config = {
    mapType: 'Gaode',
    logoVisible: false,
    visible: false,
    mapOptions: {
      style: 'dark',
      zoom: 4,
      minZoom: 5,
      center: [104.288144, 31.239692],
      //pitch: 45,
      token: '5efe6796165180bdc2c0c08d22edf962',
    },
  };

  const layerOptions = {
    // autoFit: true,
    shape: 'circle',
    size: {
      field: 'style',
      value: ({ style }) => {
        if (style === 0) {
          return Math.floor(Math.random() * 11) + 5;
        } else if (style === 1) {
          return Math.floor(Math.random() * 9) + 3;
        } else {
          return 0;
        }
      },
    },
    color: '#47aff7',
    style: {
      opacity: 0.8,
      stroke: '#c3faff',
      strokeWidth: 1,
    },
    state: { active: { color: '#FFF684' } },
    zoom: {
      position: 'bottomright',
    },
    tooltip: {
      items: ['name'],
    },
  };

  const [options, setOptions] = useState(layerOptions);

  const [source, setSource] = useState({
    data: [],
    parser: {
      type: 'json',
      coordinates: 'lnglat',
    },
  });

  useEffect(() => {
    // fetch('/assets/quanguoshixianweizhi.json')
    //   .then((response) => response.json())
    //   .then(({ list }) => {

    //     console.log(source)
    //   });
    const data = cityJson.list;
    setSource((prevState) => ({ ...prevState, data }));
  }, []);

  return (<PageContainer
    header={false}
    pageHeaderRender={false}
    token={{
      paddingBlockPageContainerContent: 0,
      paddingInlinePageContainerContent: 0
    }}
  >

    <LarkMap {...config} style={{ height: '600px' }}>
      <PointLayer {...options} source={source} />
    </LarkMap>
  </PageContainer>)
};