import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:ysairplane2/tools/YSNetWorking.dart';
import 'package:ysairplane2/tools/YSTools.dart';
import 'package:shared_preferences/shared_preferences.dart';

class YSCity extends StatefulWidget {
  final bool isHome;
  const YSCity({Key key, this.isHome}) : super(key: key);
  @override
  _YSCityState createState() => _YSCityState();
}

class _YSCityState extends State<YSCity> {
  List _historyList = [];
  List _hotList = [];
  List _dataArray = [];
  List _searchList = [];
  List _hotList2 = [];
  List _dataArray2 = [];
  int _selected = 0;
  int _page = 1;
  String _location = '';
  TextEditingController _searchStr = TextEditingController();
  @override
  void initState() {
    Future.delayed(Duration(seconds: 0)).then((value){
      _refresh();
    });
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFF0F0F1),
      appBar: CupertinoNavigationBar(
        backgroundColor: Colors.white,
        leading: GestureDetector(child: Icon(Icons.arrow_back_ios,size: 15,color: Color(0xFF000000),),onTap: (){Navigator.pop(context);},),
        border: Border(),
        middle: Text('选择城市',style: TextStyle(fontSize: zsp(36),color: Color(0xFF000000)),),
      ),
      body: EasyRefresh(
        onRefresh: _refresh,
        onLoad: _loadMore,
        header: TaurusHeader(

        ),
        footer: TaurusFooter(

        ),
        child: SingleChildScrollView(
          child: Container(
            width: MediaQuery.of(context).size.width,
            child: Column(
              children: [
                Container(
                  height: hsp(88),
                  color: Color(0xFF007AFF),
                  alignment: Alignment.center,
                  child: Container(
                    height: hsp(66),
                    width: MediaQuery.of(context).size.width-wsp(30),
                    padding: EdgeInsets.only(left: wsp(30),right: wsp(30)),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.all(Radius.circular(5))
                    ),
                    child: CupertinoTextField(
                      placeholder: '搜索城市或者国家',
                      placeholderStyle: TextStyle(fontSize: zsp(28),color: Color(0xFF545454)),
                      style: TextStyle(fontSize: zsp(28),color: Color(0xFF545454)),
                      prefix: Icon(Icons.search,size: hsp(40),color: Color(0xFF8E8E93),),
                      suffix: GestureDetector(child: Icon(Icons.close,size: hsp(40),color: Color(0xFF8E8E93),),
                        onTap: (){_searchStr.text = '';FocusScope.of(context).unfocus();},),
                      suffixMode: OverlayVisibilityMode.editing,
                      controller: _searchStr,
                      padding: EdgeInsets.all(0),
                      decoration: BoxDecoration(),
                      onEditingComplete: (){
                        _getSearchData();
                      },
                      textInputAction: TextInputAction.search,
                    ),
                  ),
                ),
                _searchStr.text.isNotEmpty? Container(
                  height: MediaQuery.of(context).size.height-MediaQuery.of(context).padding.top-44-hsp(88),
                  child: ListView.separated(
                    itemBuilder: (context,index){
                      return GestureDetector(
                        onTap: (){
                          Map city = {};
                          if(widget.isHome==true){
                            city['id'] = '';
                            city['name'] = _searchList[index]['name'];
                            city['initials'] = '';
                            city['country'] = '';
                            city['area'] = '';
                            city['home'] = 1;
                            city['airplaneName'] = '';
                          }else{
                            city['id'] = _searchList[index]['id'];
                            city['name'] = _searchList[index]['display'];
                            city['initials'] = _searchList[index]['id'];
                            city['country'] = _searchList[index]['country'];
                            city['area'] = _searchList[index]['country'];
                            city['home'] = 1;
                            city['airplaneName'] = _searchList[index]['airplaneName'];
                          }
                          List indexList = [];
                          for(int i = 0;i<_historyList.length;i++){
                            if(_historyList[i]['name']==city['name']){
                              indexList.add(i);
                            }
                          }
                          indexList.forEach((element) {
                            _historyList.removeAt(element);
                          });
                          _historyList.insert(0, city);
                          SharedPreferences.getInstance().then((prefer){
                            String historyStr = jsonEncode(_historyList);
                            prefer.setString('cityHistory', historyStr);
                            Navigator.of(context).pop(city);
                          });
                        },
                        child: Container(
                            color: Colors.white,
                            height: hsp(100),
                            padding: EdgeInsets.only(left: wsp(40),right: wsp(40)),
                            alignment: Alignment.centerLeft,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                indicateString(_searchList[index]['display']!=null?'${_searchList[index]['display']}':'${_searchList[index]['name']}',
                                    _searchStr.text, _searchList[index]['airplaneName']!=null?_searchList[index]['airplaneName']:''),
                                Icon(Icons.keyboard_arrow_right,size: hsp(40),color: Color(0xFFA4A5A5),)
                              ],
                            )
                        ),
                      );
                    },
                    separatorBuilder: (context,index){
                      return Divider(height: 0.5,thickness: 0.5,color: Color(0xFFF1F2F3),);
                    },
                    itemCount: _searchList.length,
                  ),
                ):Container(
                  child: Row(
                    children: [
                      GestureDetector(
                        child: Column(
                          children: [
                            Container(
                              height: hsp(85),
                              color: Colors.white,
                              width: MediaQuery.of(context).size.width/2,
                              alignment: Alignment.center,
                              child: Text('国内城市',style: TextStyle(fontSize: zsp(30),color: Color(0xFF444444)),),
                            ),
                            Container(
                              height: hsp(3),
                              color: _selected==0?Color(0xFF007AFF):Colors.transparent,
                              width: wsp(133),
                            )
                          ],
                        ),
                        onTap: (){
                          setState(() {
                            _selected = 0;
                          });
                        },
                      ),
                      GestureDetector(
                        child: Column(
                          children: [
                            Container(
                              height: hsp(88),
                              color: Colors.white,
                              width: MediaQuery.of(context).size.width/2,
                              alignment: Alignment.center,
                              child: Text('国际/中国港澳台',style: TextStyle(fontSize: zsp(30),color: Color(0xFF444444)),),
                            ),
                            Container(
                              height: hsp(3),
                              color: _selected==1?Color(0xFF007AFF):Colors.transparent,
                              width: wsp(133),
                            )
                          ],
                        ),
                        onTap: (){
                          setState(() {
                            _selected = 1;
                          });
                        },
                      )
                    ],
                  ),
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      child: Row(
                        children: [
                          Text('定位/历史',style: TextStyle(fontSize: zsp(24),color: Color(0xFF9A9A9A)),),
                          GestureDetector(
                            child: Icon(Icons.delete,color: Color(0xFF9A9A9A),size: hsp(40),),
                            onTap: (){
                              SharedPreferences.getInstance().then((prefer){
                                _historyList.clear();
                                String historyStr = jsonEncode(_historyList);
                                prefer.setString('cityHistory', historyStr);
                                setState(() {});
                              });
                            },
                          )
                        ],
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      ),
                      padding: EdgeInsets.only(left: wsp(24),right: wsp(24),top: hsp(34),bottom: hsp(10)),
                      width: MediaQuery.of(context).size.width,
                    ),
                  Container(
                    margin: EdgeInsets.only(left: zsp(8)),
                    child: Wrap(
                        alignment: WrapAlignment.start,
                        children: <Widget>[
                          for (int i =0;i<_historyList.length+1;i++ ) GestureDetector(
                            behavior: HitTestBehavior.opaque,
                            onTap: (){
                              if(widget.isHome==true){
                                Map city = {};
                                city['id'] = '';
                                city['name'] = i>0?'${_historyList[i-1]['name']}':_location;
                                city['initials'] = '';
                                city['country'] = '';
                                city['area'] = '';
                                city['home'] = 1;
                                city['airplaneName'] = '';
                                List indexList = [];
                                for(int i = 0;i<_historyList.length;i++){
                                  if(_historyList[i]['name']==city['name']){
                                    indexList.add(i);
                                  }
                                }
                                indexList.forEach((element) {
                                  _historyList.removeAt(element);
                                });
                                _historyList.insert(0, city);
                                SharedPreferences.getInstance().then((prefer){
                                  String historyStr = jsonEncode(_historyList);
                                  prefer.setString('cityHistory', historyStr);
                                  Navigator.of(context).pop(city);
                                });
                              }else{
                                if(i>0){
                                  _searchStr.text = '${_historyList[i-1]['name']}';
                                }else{
                                  _searchStr.text = _location;
                                }
                              }
                              _getSearchData();
                            },
                            child: Container(
                              margin: EdgeInsets.symmetric(vertical: hsp(16), horizontal: hsp(16)),
                              decoration: BoxDecoration(
                                  color: Colors.white,
                                  borderRadius: BorderRadius.all(Radius.circular(5))
                              ),
                              padding: EdgeInsets.only(left: wsp(40), right: wsp(40),top: hsp(20),bottom: hsp(20)),
                              child: i==0?Row(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  Icon(Icons.location_on,color: Color(0xFF007AFF),size: hsp(40),),
                                  Text(' $_location', style: TextStyle(fontSize: zsp(26),color: Color(0xFF16181A)), textAlign: TextAlign.center,),
                                ],
                              ):Text('${_historyList[i-1]['name']}', style: TextStyle(fontSize: zsp(26),color: Color(0xFF16181A)), textAlign: TextAlign.center,),
                            ),
                          )
                        ]
                    ),
                  ),
                Container(
                  child: Text('热门城市',style: TextStyle(fontSize: zsp(24),color: Color(0xFF9A9A9A)),),
                  padding: EdgeInsets.only(left: wsp(24),right: wsp(24),top: hsp(34),bottom: hsp(10)),
                  width: MediaQuery.of(context).size.width,
                ),
                Container(
                  margin: EdgeInsets.only(bottom: hsp(10),left: zsp(8)),
                  child: Wrap(
                      alignment: WrapAlignment.start,
                      children: <Widget>[
                        for (Map item in (_selected==0?_hotList:_hotList2)) GestureDetector(
                          behavior: HitTestBehavior.opaque,
                          onTap: () {
                            if (widget.isHome == true) {
                              Map city = {};
                              city['id'] = '';
                              city['name'] = '${item['name']}';
                              city['initials'] = '';
                              city['country'] = '';
                              city['area'] = '';
                              city['home'] = 1;
                              city['airplaneName'] = '';
                              List indexList = [];
                              for(int i = 0;i<_historyList.length;i++){
                                if(_historyList[i]['name']==city['name']){
                                  indexList.add(i);
                                }
                              }
                              indexList.forEach((element) {
                                _historyList.removeAt(element);
                              });
                              _historyList.insert(0, city);
                              SharedPreferences.getInstance().then((prefer){
                                String historyStr = jsonEncode(_historyList);
                                prefer.setString('cityHistory', historyStr);
                                Navigator.of(context).pop(city);
                              });
                            } else {
                              _searchStr.text = '${item['name']}';
                              _getSearchData();
                            }
                          },
                          child: Container(
                            margin: EdgeInsets.symmetric(vertical: hsp(16), horizontal: hsp(16)),
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.all(Radius.circular(5))
                            ),
                            padding: EdgeInsets.only(left: wsp(40), right: wsp(40),top: hsp(20),bottom: hsp(20)),
                            child: Text('${item['name']}', style: TextStyle(fontSize: zsp(26),color: Color(0xFF16181A)), textAlign: TextAlign.center,),
                          ),
                        )
                      ]
                  ),
                ),
                  ],
                ),
          Container(
            color: Colors.white,
            child: ListView.separated(
              shrinkWrap: true,
              itemBuilder: (context,index){
                return Column(
                  children: [
                    Container(
                      color: Colors.white,
                      height: hsp(60),
                      padding: EdgeInsets.only(left: wsp(30)),
                      alignment: Alignment.centerLeft,
                      child: Text('${_dataArray[index]['word']}',style: TextStyle(fontSize: zsp(24),color: Color(0xFFA4A5A5),fontWeight: FontWeight.bold),),
                    ),
                    Divider(height: 0.5,thickness: 0.5,color: Color(0xFFF1F2F3),),
                    ListView.separated(
                      itemBuilder: (context,indexSub){
                        return GestureDetector(
                          behavior: HitTestBehavior.opaque,
                          onTap: (){
                            Map city = (_selected==0?_dataArray:_dataArray2)[index]['mapList'][indexSub];
                            if (widget.isHome == true) {
                              Map city2 = {};
                              city2['id'] = '';
                              city2['name'] = '${city['name']}';
                              city2['initials'] = '';
                              city2['country'] = '';
                              city2['area'] = '';
                              city2['home'] = 1;
                              city2['airplaneName'] = '';
                              List indexList = [];
                              for(int i = 0;i<_historyList.length;i++){
                                if(_historyList[i]['name']==city['name']){
                                  indexList.add(i);
                                }
                              }
                              indexList.forEach((element) {
                                _historyList.removeAt(element);
                              });
                              _historyList.insert(0, city);
                              SharedPreferences.getInstance().then((prefer){
                                String historyStr = jsonEncode(_historyList);
                                prefer.setString('cityHistory', historyStr);
                                Navigator.of(context).pop(city);
                              });
                            } else {
                              _searchStr.text = '${city['name']}';
                              _getSearchData();
                            }
                          },
                          child: Container(
                            color: Colors.white,
                            height: hsp(100),
                            padding: EdgeInsets.only(left: wsp(40)),
                            alignment: Alignment.centerLeft,
                            child: Text('${(_selected==0?_dataArray:_dataArray2)[index]['mapList'][indexSub]['name']}',style: TextStyle(fontSize: zsp(32),color: Color(0xFF16181A)),),
                          ),
                        );
                      },
                      separatorBuilder: (context,indexSub){
                        return Divider(height: 0.5,thickness: 0.5,color: Color(0xFFF1F2F3),);
                      },
                      itemCount: ((_selected==0?_dataArray:_dataArray2)[index]['mapList']).length,
                      shrinkWrap: true,
                      physics: NeverScrollableScrollPhysics(),
                    )
                  ],
                );
              },
              separatorBuilder: (context,index){
                return Divider(height: 0.5,thickness: 0.5,color: Color(0xFFF1F2F3),);
              },
              itemCount: (_selected==0?_dataArray:_dataArray2).length,
              physics: NeverScrollableScrollPhysics(),
            ),
          ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Future<void> _refresh() async{
    SharedPreferences prefer = await SharedPreferences.getInstance();
    _location = prefer.getString('location')??'';
    _page = 1;
    Map dict = await ysRequestHttp(context,type: requestType.get,api: '/app/applets/region/region',parameter: {'pageNum':_page},isLoading: true,isToken: false);
    if(dict!=null){
      SharedPreferences prefer = await SharedPreferences.getInstance();
      String historyStr = prefer.getString('cityHistory')??'[]';
      _historyList = jsonDecode(historyStr);
      _hotList.clear();
      _hotList2.clear();
      _dataArray = dict['region']['1']['resultList'];
      _dataArray.forEach((element) {
        List array = element['mapList'];
        array.forEach((elementSub) {
          if(elementSub['isHot']==1){
            _hotList.add(elementSub);
          }
        });
      });

      _dataArray2 = dict['region']['2']['resultList'];
      _dataArray2.forEach((element) {
        List array = element['mapList'];
        array.forEach((elementSub) {
          if(elementSub['isHot']==1){
            _hotList2.add(elementSub);
          }
        });
      });
      setState(() {

      });
    }
  }

  Future<void> _loadMore() async{
    _page++;
    Map dict = await ysRequestHttp(context,type: requestType.get,api: '/app/applets/region/region',parameter: {'pageNum':_page},isLoading: true,isToken: false);
    if(dict!=null){
      List array1 = dict['region']['1']['resultList'];
      array1.forEach((element) {
        List array = element['mapList'];
        array.forEach((elementSub) {
          if(elementSub['isHot']==1){
            _hotList.add(elementSub);
          }
        });
      });
      _dataArray.addAll(array1);

      List array2 = dict['region']['2']['resultList'];
      array2.forEach((element) {
        List array = element['mapList'];
        array.forEach((elementSub) {
          if(elementSub['isHot']==1){
            _hotList2.add(elementSub);
          }
        });
      });
      _dataArray2.addAll(array2);
      setState(() {});
    }
  }

  _getSearchData() async{
    Map request = {};
    request['cid'] = _searchStr.text;
    if(widget.isHome==true){
      request['type'] = 1;
    }
    Map dict = await ysRequestHttp(context,type: requestType.get,api: '/app/airplane/Poi/airportById',parameter: request,isLoading: false,isToken: false);
    if(dict!=null){
      setState(() {
        _searchList = dict['data'];
      });
    }
  }

  // List _siftCity() {
  //   List array = [];
  //   _searchList.forEach((element) {
  //     if(((element['display']).split(_searchStr.text)).length>1){
  //       array.add(element);
  //     }
  //   });
  //   return array;
  // }
}