import 'package:chat/data/UserData.dart';
import 'package:chat/map/google_map_location_picker.dart';
import 'package:chat/map/location_result.dart';
import 'package:chat/models/group_info_model.dart';
import 'package:chat/utils/HttpUtil.dart';
import 'package:chat/utils/screen.dart';
import 'package:chat/utils/separator_line.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:permission_handler/permission_handler.dart';

import '../../data/constants.dart';
import '../../generated/i18n.dart';
import '../../utils/CustomUI.dart';
class TravelButlerPage extends StatefulWidget {
  final GroupInfoModel groupInfoModel;

  TravelButlerPage({Key key, this.groupInfoModel}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return TravelButlerPageState();
  }
}

class TravelButlerPageState extends State<TravelButlerPage> {
  LocationResult startResult;
  LocationResult endResult;

  double distanceB = 0.0;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
//    MessageMgr().off('Update Group Info', updateGroupInfo);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {

    List<String> disStr =getDistanceStr(distanceB).toString().split(' ');

    Widget appBar = AppBar(
      backgroundColor: AppColors.NewAppbarBgColor,
      title: Text(
        I18n.of(context).travel_butler,
        textScaleFactor: 1.0,
        style: TextStyle(color: AppColors.NewAppbarTextColor),
      ),
//      leading: CustomUI.buildCustomLeading(context),
      centerTitle: true,
    );

    return Scaffold(
      appBar: appBar,
      body: SafeArea(
        child: Container(
          color: Color(0xffE8EAF0),
          child: ListView(
            children: <Widget>[
              Container(
                margin: EdgeInsets.all(10),
                child: Card(
                  elevation: 2, // 阴影
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10),
//              side: BorderSide(color: Colors.green,width: 25),
                  ),
                  child: Container(
//                    width: double.maxFinite,
//                    color: Colors.blue,
                    padding: EdgeInsets.all(14),
                    child:  Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
//                       mainAxisAlignment: MainAxisAlignment.spaceAround,
                      mainAxisSize: MainAxisSize.max,
                      children: <Widget>[
                        Column(
                          children: <Widget>[
                            SizedBox(height: 17,),
                            ClipOval(
                              child: Container(
                                padding: EdgeInsets.all(4),
                                child:  ClipOval(
                                  child: Container(

                                    color: Colors.white,
                                    width: 5,height: 5,
                                  ),
                                ),
//                                decoration: BoxDecoration(
//                                    color: Color(0xff3875E9),
//                                    border: Border.all(
//                                        color: Color(0xff3875E9), width: 3)),
                                color: Color(0xff3875E9),
                                width: 17,height: 17,
                              ),
                            ),
                            Padding(padding: EdgeInsets.only(top: 5,bottom: 5),child:  MySeparator(color: Color(0xffDADCDE)),),
                            ClipOval(
                              child: Container(
                                padding: EdgeInsets.all(4),
                                child:  ClipOval(
                                  child: Container(

                                    color: Colors.white,
                                    width: 5,height: 5,
                                  ),
                                ),
//                                decoration: BoxDecoration(
//                                    color: Color(0xff3875E9),
//                                    border: Border.all(
//                                        color: Color(0xff3875E9), width: 3)),
                                color: Color(0xffFF1010),
                                width: 17,height: 17,
                              ),
                            ),
                          ],
                        ),

                        SizedBox(width: 12,),
                        Expanded(child: Container( child: Column(mainAxisSize: MainAxisSize.max,children: <Widget>[
                          InkWell(child: positionLayout(true),onTap: ()async{
                            startResult = await _openMap(context);
                            print('ddddd: $startResult');
                            setState(() {
                            });
                          },),
                        Container(color: Color(0xffD8D8D8),height: 0.8,width: double.maxFinite,),
                          InkWell(child: positionLayout(false),onTap: ()async{
                            endResult = await _openMap(context);
                            setState(() {
                            });
                          },),
                        ],),))

                      ],
                    ),
                  ),
                ),
              ),

              Padding(
                padding: EdgeInsets.only(left: 15,right: 15,bottom: 20,top: 13),
                child: Text(
                  I18n.of(context).travel_tips,
                  textScaleFactor: 1.0,
                  textAlign: TextAlign.left,
                  style: TextStyle(
                      color: Color(0xff797979), fontSize: 11),
                ),
              ),

              Container(
                margin: EdgeInsets.only(left: 70, right: 70 ,bottom: 30),
                height: 47,
                child: RaisedButton(
                    color: Color(0xff3875E9),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(Radius.circular(10))),
                    child: Text(
                      I18n.of(context).travel_check_distance,
                      textScaleFactor: 1.0,
                      style: TextStyle(color: Colors.white, fontSize: 19),
                    ),
                    onPressed: () async{
                      if (startResult != null && endResult != null) {
                        distanceB = await Geolocator().distanceBetween(
                            startResult.latLng.latitude,
                            startResult.latLng.longitude,
                            endResult.latLng.latitude,
                            endResult.latLng.longitude);


                        HttpUtil().userRanging(distanceB.toInt(),startResult.address,endResult.address);

                        setState(() {
                        });
                      }
                    }),
              ),



              Container(
                margin: EdgeInsets.all(10),
                child: Card(
                  elevation: 2, // 阴影
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10),
//              side: BorderSide(color: Colors.green,width: 25),
                  ),
                  child: Container(
//                    width: double.maxFinite,
//                    color: Colors.blue,
                    padding: EdgeInsets.all(14),
                    child:  Column(children: <Widget>[
                      SizedBox(height: 21,),
                      Text(
                        I18n.of(context).travel_check_distance_result,
                        textScaleFactor: 1.0,
                        style: TextStyle(color: Color(0xff797979), fontSize: 16),
                      ),


                     Padding(padding: EdgeInsets.only(top: 25,bottom: 25),child:  RichText(
                         maxLines: 3,
                         textAlign: TextAlign.center,
                         text: TextSpan(children: [
                           TextSpan(
                               text: disStr[0],
                               style: TextStyle(
                                   color: Color(0xffFF1010),
                                   fontSize: 25)),
                           TextSpan(
                               text: ' '+disStr[1],
                               style: TextStyle(
                                   color: Color(0xff6F4A5D),
                                   fontSize: 17)),

                         ])),)

                    ],),



                  ),
                ),
              ),


            ],
          ),
        ),
      ),
    );
  }


  Widget positionLayout(bool isStart){

    String str = isStart?I18n.of(context).travel_my_location:I18n.of(context).travel_go_where;
    if(isStart && startResult!=null && startResult.address!=null){
      str =  startResult.address;
    }else if (!isStart && endResult!=null &&endResult.address!=null){
      str =  endResult.address;
    }
    return  Container(height:50,child: Row(mainAxisSize: MainAxisSize.max, children: <Widget>[
      Expanded(child: Container( child: fixedText(str,color: Colors.black,fontSize: 16),)),
      fixedText(isStart?I18n.of(context).travel_start:I18n.of(context).travel_end,color: Color(0xff797979),fontSize: 14)
    ],),);


  }

  getDistanceStr(double m) {
    if (m < 1000) {
      return '${m.toInt()} M';
    } else {
      return '${(m / 1000).toStringAsFixed(2)} KM';
    }
  }


  _openMap(BuildContext context) async {
    if (await CustomUI.showPermissionSetting(
        context, PermissionGroup.location, I18n.of(context).open_location)) {
      return LocationPicker.pickLocation(
          context, 'AIzaSyAb9JNtW0BEZ_qLeDg87ZhvxSmZply-7hU',
          initialCenter: LatLng(UserData().latitude, UserData().longitude));

//      print('地图结果 ${result}');
//      return result;

    }
  }
}