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 './index.less';

export default () => {

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

  const layerOptions = {
    // autoFit: true,
    shape: 'cylinder',
    size: {
      field: 't',
      value: ({ t }) => {
        return [2, 2, t * 2 + 20];
      }
      ,
    },
    color: {
      field: 't',
      value: [
        '#094D4A',
        '#146968',
        '#1D7F7E',
        '#289899',
        '#34B6B7',
        '#4AC5AF',
        '#5FD3A6',
        '#7BE39E',
        '#A1EDB8',
        '#CEF8D6',
      ],
    },
    state: {
      active: true,
    },
    style: {
      opacity: 0.8,
    },
  };

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

  const [source, setSource] = useState({
    data: [],
    parser: {
      type: 'json',
      x: 'j',
      y: 'w',
    },
  });

  useEffect(() => {
    fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
      .then((response) => response.json())
      .then(({ list }) => {
        const data = list;
        setSource((prevState) => ({ ...prevState, data }));
        console.log(source)
      });
  }, []);

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

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