import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'YSNetWork.dart';
import 'YSTools.dart';

class YSPicker extends StatefulWidget {
  final List dataArray;
  final String title;
  final ValueSetter choose;
  const YSPicker({Key? key,  this.title = 'label',required this.dataArray, required this.choose,}) : super(key: key);
  @override
  YSPickerState createState() => YSPickerState();
}

class YSPickerState extends State<YSPicker> {
  Map _value = {};
  @override
  void initState() {
    if(widget.dataArray.isNotEmpty){
      _value = widget.dataArray[0];
    }
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.transparent,
      height: hsp(300),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Container(
            height: hsp(50),
            padding: EdgeInsets.only(left: hsp(20),right: hsp(20)),
            decoration: BoxDecoration(
                color: ysBgColor,
                border: const Border(bottom: BorderSide(width: 0.5,color: Colors.white24))
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                GestureDetector(
                  child: Text('取消',style: TextStyle(fontSize: zsp(15),color: Colors.white60),),
                  onTap: (){
                    Navigator.pop(context);
                  },
                ),
                GestureDetector(
                  child: Text('确定',style: TextStyle(fontSize: zsp(15),color: Colors.white),),
                  onTap: (){
                    if(_value.isNotEmpty){
                      widget.choose(_value);
                    }
                    Navigator.pop(context);

                  },
                )
              ],
            ),
          ),
          Container(
            height: hsp(250),
            padding: const EdgeInsets.all(10),
            color: ysBgColor,
            child: CupertinoPicker(
              itemExtent: hsp(50),
              onSelectedItemChanged: (value){
                _value = widget.dataArray[value];
              },
              children: [
                for(int i=0;i<widget.dataArray.length;i++)Container(
                  alignment: Alignment.center,
                  child: Text('${widget.dataArray[i][widget.title]}',style: const TextStyle(color: Colors.white),),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class YSMultipleChoose extends StatefulWidget {
  final String projectId;
  final ValueSetter<List> choose;
  const YSMultipleChoose({Key? key, required this.projectId, required this.choose}) : super(key: key);

  @override
  YSMultipleChooseState createState() => YSMultipleChooseState();
}

class YSMultipleChooseState extends State<YSMultipleChoose> {
  List _dataArray = [];
  List _chooseArray = [];
  @override
  void initState() {
    Future.delayed(const Duration(seconds: 0)).then((value) {
      _getData();
    });
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.transparent,
      height: hsp(300),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Container(
            height: hsp(50),
            padding: EdgeInsets.only(left: hsp(20),right: hsp(20)),
            decoration: const BoxDecoration(
                color: Colors.white,
                border: Border(bottom: BorderSide(width: 0.5,color: Color(0xFFEEEEEE)))
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                GestureDetector(
                  child: Text('取消',style: TextStyle(fontSize: zsp(15),color: const Color(0xFF999999)),),
                  onTap: (){
                    Navigator.pop(context);
                  },
                ),
                GestureDetector(
                  child: Text('确定',style: TextStyle(fontSize: zsp(15),color: const Color(0xFF108DE9)),),
                  onTap: (){
                    if(_chooseArray.isNotEmpty){
                      widget.choose(_chooseArray);
                    }
                    Navigator.pop(context);

                  },
                )
              ],
            ),
          ),
          Container(
            height: hsp(250),
            color: ysBgColor,
            child: ListView.separated(
              itemBuilder: (context,index){
                Map item = _dataArray[index];
                bool isChoose = _chooseArray.contains(item);
                return GestureDetector(
                  onTap: (){
                    if(isChoose){
                      _chooseArray.remove(item);
                    }else{
                      _chooseArray.add(item);
                    }
                    setState(() {});
                  },
                  child: Container(
                    color: Colors.white,
                    padding: EdgeInsets.all(hsp(16)),
                    child: LayoutBuilder(
                      builder: (context,conSize){
                        return Row(
                          children: [
                            Icon(
                              isChoose?Icons.check_circle:Icons.radio_button_unchecked,
                              size: hsp(15),
                              color: Color(isChoose?0xFF377DFE:0xFF4A4A4A),
                            ),
                            Container(
                              width: conSize.maxWidth-hsp(15),
                              padding: EdgeInsets.only(left: hsp(5)),
                              child: Text(item['partsName']??'',style: TextStyle(fontSize: zsp(14),color: const Color(0xFF4A4A4A)),),
                            )
                          ],
                        );
                      },
                    ),
                  ),
                );
              },
              separatorBuilder: (context,index){
                return Divider(height: hsp(1),thickness: hsp(1),color: ysBgColor,);
              },
              itemCount: _dataArray.length,
              padding: const EdgeInsets.all(0),
            ),
          ),
        ],
      ),
    );
  }
  _getData() async{
    YSNetWork.ysRequestHttp(context, type: RequestType.post, api: 'maintain/parts/appDetailByProjectId',
        parameter: {'projectId':widget.projectId,'codeStr':'app','recordId':YSData().detailsId}, successSetter: (dict){
        _dataArray = dict['data']??[];
        setState(() {});
    });
  }
}


class YSPickerWithSearchView extends StatefulWidget {
  final List dataArray;
  final ValueSetter choose;
  const YSPickerWithSearchView({Key? key, required this.dataArray, required this.choose}) : super(key: key);

  @override
  YSPickerWithSearchViewState createState() => YSPickerWithSearchViewState();
}

class YSPickerWithSearchViewState extends State<YSPickerWithSearchView> {
  String _searchStr = '';
  List _searchArray = [];
  @override
  void initState() {
    _searchArray.addAll(widget.dataArray);
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(topLeft: Radius.circular(10),topRight: Radius.circular(10))
      ),
      height: hsp(600),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Container(
            height: hsp(50),
            padding: EdgeInsets.only(left: hsp(20),right: hsp(20)),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(),
                Text('选择车辆',style: TextStyle(fontSize: zsp(16),color: Colors.black),),
                Container(
                  height: hsp(15),
                  width: hsp(15),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    border: Border.all(color: Colors.black,width: 1),
                    borderRadius: const BorderRadius.all( Radius.circular(50))
                  ),
                  alignment: Alignment.center,
                  child: Icon(Icons.close,size: hsp(10),color: Colors.black,),
                )
              ],
            ),
          ),
          Container(
            height: hsp(50),
            alignment: Alignment.center,
            padding: EdgeInsets.only(top: hsp(5),bottom: hsp(5),left: hsp(30),right: hsp(30)),
            child: CupertinoTextField(
              decoration: BoxDecoration(
                borderRadius: const BorderRadius.all(Radius.circular(50)),
                border: Border.all(color: Colors.grey.withOpacity(0.6),width: 1)
              ),
              padding: EdgeInsets.only(left: hsp(10),right: hsp(10),top: hsp(10),bottom: hsp(10)),
              prefix: Row(
                children: [
                  Padding(
                    padding: EdgeInsets.only(left: hsp(15)),
                    child: Icon(Icons.search,size: hsp(20),color: Colors.grey,),
                  )
                ],
              ),
              onChanged: (value){
                _searchStr = value;
                _searchArray = widget.dataArray.where((element) => '${element['LicensePlate']}'.contains(_searchStr)).toList();
                setState(() {});
              },
            ),
          ),
          Container(
            height: hsp(500),
            alignment: Alignment.center,
            child: ListView.separated(
              padding: EdgeInsets.only(left: hsp(20),right: hsp(20)),
              itemBuilder: (context,index){
                Map item = _searchArray[index];
                String licensePlate = item['LicensePlate']??'';
                String fStr = licensePlate.substring(0,1);
                List licensePlateArray = licensePlate.split(_searchStr);
                if(licensePlateArray.length>1){
                  licensePlateArray.insert(1,_searchStr);
                }
                return GestureDetector(
                  onTap: (){
                    FocusScope.of(context).unfocus();
                    widget.choose(item);
                    Navigator.pop(context);
                  },
                  behavior: HitTestBehavior.opaque,
                  child: Container(
                    height: hsp(50),
                    alignment: Alignment.centerLeft,
                    child: LayoutBuilder(
                      builder: (context,conSize){
                        return Row(
                          children: [
                            Container(
                              height: hsp(30),
                              width: hsp(30),
                              decoration: const BoxDecoration(
                                color: Colors.blue,
                                borderRadius: BorderRadius.all(Radius.circular(50))
                              ),
                              alignment: Alignment.center,
                              child: Text(fStr,style: TextStyle(fontSize: zsp(13),color: Colors.white),),
                            ),
                            SizedBox(
                              width: conSize.maxWidth-hsp(30),
                              child: RichText(text: TextSpan(
                                  style: TextStyle(fontSize: zsp(15),color: Colors.black),
                                  text: ' ',
                                  children: <TextSpan>[
                                    for (int i = 0;i<licensePlateArray.length;i++)TextSpan(
                                      text: licensePlateArray[i],
                                      style: TextStyle(fontSize: zsp(15),color: licensePlateArray[i]==_searchStr?Colors.red:Colors.black)
                                    )
                                  ]
                              ),),
                            )
                          ],
                        );
                      },
                    ),
                  ),
                );
              },
              separatorBuilder: (context,index){
                return Divider(height: 0.5,thickness: 0.5,color: Colors.grey.withOpacity(0.3),);
              },
              itemCount: _searchArray.length
            ),
          )
        ],
      ),
    );
  }
}