import React, { useEffect, useState } from 'react';
import { Button, Col, Row, Statistic } from 'antd';

import {
  PageContainer,
} 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',
      center: [102.447303, 37.753574],
      zoom: 4,
      pitch: 0,
      //pitch: 45,
      token: '5efe6796165180bdc2c0c08d22edf962',
    },
  };

  const layerOptions = {
    // autoFit: true,
    shape: 'circle',
    size: {
      value: () => {
        return Math.floor(Math.random() * 20) + 16;
      },
    },
    color: '#47aff7',

    animate: true,
    state: { active: true },
    autoFit: true,
    label: {
      field: 'cityName',
      style: {
        fill: '#fff',
        fontSize: 12,
        textAnchor: 'top',
        textOffset: [0, 20],
      },
    },
    zoom: {
      position: 'bottomright',
    },
    layerMenu: {
      position: 'topright',
    },
    tooltip: {
      items: [{ field: 'cityName', alias: '名称' }],
    },
  };

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

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

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

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

  return (<PageContainer
    header={false}
    pageHeaderRender={false}
    token={{
      paddingBlockPageContainerContent: 0,
      paddingInlinePageContainerContent: 0
    }}
  >
    <div className='w-screen h-screen	bg-slate-50		 '>
      <Row gutter={16}>
        <Col span={12}>
          <Statistic title="Active Users" value={112893} valueStyle={{ color: '#3f8600' }} />
        </Col>
        <Col span={12}>
          <Statistic title="Account Balance (CNY)" value={112893} precision={2} />
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <Statistic title="Active Users" value={112893} valueStyle={{ color: '#3f8600' }} />
        </Col>
        <Col span={12}>
          <Statistic title="Account Balance (CNY)" value={112893} precision={2} />
        </Col>
      </Row>
      <div className='w-9/12 h-4/6	'>
        <LarkMap {...config} className='h-full'>
          <PointLayer {...options} source={source} />
        </LarkMap>
      </div>
    </div>
  </PageContainer>)
};