import 'package:amap_map_fluttify/amap_map_fluttify.dart';
import 'package:base_app/res/index.dart';
import 'package:base_app/ui/widgets/common/button/round_button_widget.dart';
import 'package:base_app/utils/permission_util.dart';
import 'package:base_app/utils/util_index.dart';
import 'package:flutter/material.dart';
import 'package:oktoast/oktoast.dart';

final _assetsIcon1 = AssetImage('assets/images/qidian.png');

class DrawMapPage extends StatefulWidget {
  @override
  _DrawMapPageState createState() => _DrawMapPageState();
}

class _DrawMapPageState extends State<DrawMapPage> with NextLatLng {
  AmapController _controller; // 地图controller
  List<Marker> _markers = []; // markers
  List<Circle> _circleList = []; //circleList
  List<Polygon> _polygonList = [];
  Polyline _currentPolyline;
  List<LatLng> _pointList = [];

  @override
  Widget build(BuildContext context) {
    // 功能栏Widget
    Widget functionBar = Container(
        child: new Column(
      children: <Widget>[
        new FloatingActionButton(
            // 回到当前位置按钮
            mini: true,
            heroTag: 'gps_setting',
            shape: new CircleBorder(),
            backgroundColor: Colors.white,
            child: Icon(Icons.gps_fixed, size: 26, color: Colours.gray_66),
            onPressed: () async {
              final latLng = await _controller?.getLocation();
              final lat = latLng.latitude;
              final lng = latLng.longitude;
              showToast("$lng,$lat");
              _controller.setCenterCoordinate(latLng);
            }),
        new FloatingActionButton(
            // 清屏
            mini: true,
            heroTag: 'refreshData',
            shape: new CircleBorder(),
            backgroundColor: Colors.white,
            child: Icon(Icons.delete, size: 26, color: Colours.gray_66),
            onPressed: () async {
              await _controller.clearMarkers(_markers);
              if (_circleList.isNotEmpty) {
                await _circleList.first.remove();
                _circleList.removeAt(0);
              }
              if (_polygonList.isNotEmpty) {
                await _polygonList.first.remove();
                _polygonList.removeAt(0);
              }
              _currentPolyline?.remove();
            }),
      ],
    ));
    return Scaffold(
        appBar: AppBar(title: const Text('地图绘制示例')),
        body: new Stack(children: [
          Container(
            height: double.infinity,
            width: double.infinity,
            color: Colors.white24,
            child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  Expanded(
                    child: Container(
                      child: AmapView(
                        showScaleControl: false, // 是否显示比例尺
                        showZoomControl: false, // 是否显示缩放控件
                        rotateGestureEnabled: false, // 是否允许旋转
                        tiltGestureEnabled: false,
                        onMapCreated: (controller) async {
                          print("onMapCreate");
                          if (await reqPositionPermission()) {
                            // await controller.showMyLocation(MyLocationOption(show: true));
                            _controller = controller;
                            await _controller?.showMyLocation(MyLocationOption(
                                myLocationType: MyLocationType.Locate, // 定位模式
                                interval: Duration(seconds: 3) // 定位间隔时间
                                ));
                          }
                        },
                      ),
                    ),
                  ),
                  Container(
                    height: 55.0,
                    margin: EdgeInsets.all(10),
                    width: double.infinity,
                    color: Colors.white,
                    padding: EdgeInsets.symmetric(horizontal: 8),
                    child: new Row(
                      children: <Widget>[
                        new RoundButton(
                          text: " 绘制点 ",
                          radius: 8,
                          onPressed: () async {
                            final marker = await _controller?.addMarker(
                              MarkerOption(
                                latLng: getNextLatLng(),
                                title: '北京${random.nextDouble()}',
                                snippet: '描述${random.nextDouble()}',
                                iconProvider: _assetsIcon1,
                                infoWindowEnabled: true,
                                object: '自定义数据${random.nextDouble()}',
                              ),
                            );
                            // 自定义弹窗
                            await _controller
                                ?.setMarkerClickedListener((marker) async {
                              await _controller.showCustomInfoWindow(
                                marker,
                                Container(
                                  width: 128,
                                  height: 122,
                                  padding: EdgeInsets.all(10),
                                  decoration: BoxDecoration(
                                    color: Colors.white,
                                    borderRadius: BorderRadius.circular(16),
                                  ),
                                  child: Text(await marker.title),
                                ),
                              );
                            });
                            _markers.add(marker);
                          },
                        ),
                        new RoundButton(
                          text: " 绘制圆 ",
                          margin: EdgeInsets.symmetric(horizontal: 5),
                          radius: 8,
                          onPressed: () async {
                            final circle =
                                await _controller?.addCircle(CircleOption(
                              center: LatLng(39.999391, 116.135972),
                              radius: 10000,
                              width: 10,
                              strokeColor: Colors.green,
                            ));
                            _circleList.add(circle);
                          },
                        ),
                        new RoundButton(
                          text: " 绘制多边形 ",
                          radius: 8,
                          onPressed: () async {
                            final polygon =
                                await _controller?.addPolygon(PolygonOption(
                              latLngList: [
                                LatLng(39.999391, 116.135972),
                                LatLng(39.898323, 116.057694),
                                LatLng(39.900430, 116.265061),
                                LatLng(39.955192, 116.140092),
                              ],
                              width: 10,
                              strokeColor: Colors.green,
                            ));
                            _polygonList.add(polygon);
                          },
                        ),
                        new RoundButton(
                          text: " 曲线 ",
                          radius: 8,
                          margin: EdgeInsets.symmetric(horizontal: 5),
                          onPressed: () async {
                            _pointList = [
                              getNextLatLng(),
                              getNextLatLng(),
                              getNextLatLng(),
                              getNextLatLng(),
                            ];
                            _currentPolyline =
                                await _controller?.addPolyline(PolylineOption(
                              latLngList: _pointList,
                              width: 10,
                              strokeColor: Colors.green,
                            ));
                          },
                        ),
                        new RoundButton(
                          text: " 地图缩放 ",
                          radius: 8,
                          onPressed: () async {
                            _controller?.zoomToSpan(
                              _pointList,
                              padding: EdgeInsets.only(top: 100),
                            );
                          },
                        ),
                      ],
                    ),
                  )
                ]),
          ),
          new Positioned(
              // 左上角功能栏
              left: 10.0,
              top: 60.0,
              child: functionBar),
        ]));
  }
}