import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:ysairplane/tools/YSNetWorking.dart';
import 'package:ysairplane/tools/YSTools.dart';
import 'package:shared_preferences/shared_preferences.dart';

class YSCity extends StatefulWidget {
  @override
  _YSCityState createState() => _YSCityState();
}

class _YSCityState extends State<YSCity> {
  List _historyList = [];
  List _hotList = [];
  List _searchList = [];
  List _dataArray = [];
  TextEditingController _searchStr = TextEditingController();
  @override
  void initState() {
    Future.delayed(Duration(seconds: 0)).then((value){
      _getHotCityData();
    });
    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: 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 = '';},),
                    suffixMode: OverlayVisibilityMode.editing,
                    controller: _searchStr,
                    padding: EdgeInsets.all(0),
                    decoration: BoxDecoration(),
                    onChanged: (value){
                      setState(() {});
                    },
                    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 = _siftCity()[index];
                        List indexList = [];
                        for(int i = 0;i<_historyList.length;i++){
                          if(_historyList[i]['display']==city['display']){
                            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('${_siftCity()[index]['display']}', _searchStr.text, _siftCity()[index]['airplanename']!=null?_siftCity()[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: _siftCity().length,
                ),
              ):Container(
                child: Row(
                  children: [
                    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: Color(0xFF007AFF),
                          width: wsp(133),
                        )
                      ],
                    ),
                    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: Colors.transparent,
                          width: wsp(133),
                        )
                      ],
                    )
                  ],
                ),
              ),
              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(i>0){
                      Map city = _historyList[i-1];
                      _historyList.remove(city);
                      _historyList.insert(0, city);
                      SharedPreferences.getInstance().then((prefer){
                        String historyStr = jsonEncode(_historyList);
                        prefer.setString('cityHistory', historyStr);
                        Navigator.of(context).pop(city);
                      });
                    }
                  },
                  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(' 西安', style: TextStyle(fontSize: zsp(26),color: Color(0xFF16181A)), textAlign: TextAlign.center,),
                      ],
                    ):Text('${_historyList[i-1]['display']}', 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 _hotList) GestureDetector(
                  behavior: HitTestBehavior.opaque,
                  onTap: (){
                    Map city = item;
                    List indexList = [];
                    for(int i = 0;i<_historyList.length;i++){
                      if(_historyList[i]['display']==city['display']){
                        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(
                    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['display']}', 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 = _dataArray[index]['mapList'][indexSub];
                          List indexList = [];
                          for(int i = 0;i<_historyList.length;i++){
                            if(_historyList[i]['display']==city['display']){
                              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)),
                          alignment: Alignment.centerLeft,
                          child: Text('${_dataArray[index]['mapList'][indexSub]['display']}',style: TextStyle(fontSize: zsp(32),color: Color(0xFF16181A)),),
                        ),
                      );
                    },
                    separatorBuilder: (context,indexSub){
                      return Divider(height: 0.5,thickness: 0.5,color: Color(0xFFF1F2F3),);
                    },
                    itemCount: (_dataArray[index]['mapList']).length,
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                  )
                ],
              );
            },
            separatorBuilder: (context,index){
              return Divider(height: 0.5,thickness: 0.5,color: Color(0xFFF1F2F3),);
            },
            itemCount: _dataArray.length,
            physics: NeverScrollableScrollPhysics(),
          ),
        ),
            ],
          ),
        ),
      ),
    );
  }

  _getHotCityData() async{
    Map dict = await ysRequestHttp(context,type: requestType.get,api: '/app/applets/poi/list',parameter: {},isLoading: true,isToken: false);
    if(dict!=null){
      SharedPreferences prefer = await SharedPreferences.getInstance();
      String historyStr = prefer.getString('cityHistory')??'[]';
      _historyList = jsonDecode(historyStr);
      _dataArray = dict['data'];
      _dataArray.forEach((element) {
        List array = element['mapList'];
        array.forEach((elementSub) {
          if(elementSub['isHot']=='1'){
            _hotList.add(elementSub);
          }
          _searchList.add(elementSub);
        });
      });
      setState(() {

      });
    }
  }

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