import 'package:flutter/material.dart';
import 'package:flutter_screenutil/screenutil.dart';
import 'package:one_key/constant/state.dart';
import 'package:one_key/models/remark.dart';
import 'package:one_key/provider/remark_manager_model.dart';
import 'package:one_key/provider/user_model.dart';
import 'package:one_key/res/colors.dart';
import 'package:one_key/widgets/MyDivider.dart';
import 'package:one_key/widgets/h_empty_view.dart';
import 'package:one_key/widgets/page_exception.dart';
import 'package:one_key/widgets/system_app_bar.dart';
import 'package:one_key/widgets/v_empty_view.dart';
import 'package:provider/provider.dart';

import '../../app.dart';

class RemarkManagerPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return RemarkManagerPageState();
  }
}

class RemarkManagerPageState extends State<RemarkManagerPage> {
  RemarkManagerModel remarkManagerModel;

  bool isAdding = false; //正在添加备注

  TextEditingController _controller = TextEditingController();
  FocusNode focusNode = FocusNode();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      _getRemarks();
    });
  }

  //获取备注
  _getRemarks() {
    Map<String, String> params = {
      "uid": Provider.of<UserModel>(context, listen: false).user.openid
    };
    remarkManagerModel.getRemarks(context, params);
  }

  //添加备注
  _addRemark() {
    Map<String, String> params = {
      "uid": Provider.of<UserModel>(context, listen: false).user.openid,
      "custom": _controller.text
    };
    remarkManagerModel.addRemark(context, params);
  }

  //删除备注
  _delRemark(Remark remark) {
    if (remark.id == "-1") return;
    Map<String, String> params = {
      "uid": Provider.of<UserModel>(context, listen: false).user.openid,
      "kid": remark.id,
    };
    remarkManagerModel.delRemark(context, params);
  }

  //构建常用备注
  List<Widget> _buildAlwayItems() {
    List<Widget> always = [];
    for (Remark remark in remarkManagerModel.remarks) {
      if (remark.oftenUse != null && remark.oftenUse.isNotEmpty)
        always.add(Container(
          height: ScreenUtil().setWidth(50),
          decoration: BoxDecoration(
              color: MyColours.color_199095,
              borderRadius: BorderRadius.circular(ScreenUtil().setWidth(10))),
          child: Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
            Flexible(
              child: Padding(
                padding:
                    EdgeInsets.symmetric(horizontal: ScreenUtil().setWidth(20)),
                child: Text(
                  "${remark.oftenUse}",
                  style: TextStyle(
                    fontSize: ScreenUtil().setSp(30),
                    color: MyColours.color_ffffff,
                  ),
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ),
            MyDivider(
              ScreenUtil().setWidth(2),
              ScreenUtil().setWidth(30),
              color: MyColours.color_6AB6B9,
            ),
            GestureDetector(
              onTap: () {
                setState(() {
                  remark.oftenUse = "";
                });
                _delRemark(remark);
              },
              child: Padding(
                  padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
                  child: Text(
                    "X",
                    style: TextStyle(
                        color: MyColours.color_ffffff,
                        fontSize: ScreenUtil().setSp(30)),
                  )),
            )
          ]),
        ));
    }
    return always;
  }

  //构建所有备注
  List<Widget> _buildAllItems() {
    List<Widget> alls = [];
    for (Remark remark in remarkManagerModel.remarks) {
      alls.add(
        GestureDetector(
            onTap: () {
              setState(() {
                remark.oftenUse = remark.custom;
              });
            },
            child: Container(
              height: ScreenUtil().setWidth(50),
              padding:
                  EdgeInsets.symmetric(horizontal: ScreenUtil().setWidth(20)),
              decoration:
                  (remark.oftenUse != null && remark.oftenUse.isNotEmpty)
                      ? BoxDecoration(
                          color: MyColours.color_199095,
                          borderRadius:
                              BorderRadius.circular(ScreenUtil().setWidth(10)))
                      : BoxDecoration(
                          color: MyColours.color_ffffff,
                          borderRadius:
                              BorderRadius.circular(ScreenUtil().setWidth(10)),
                          border: Border.all(
                              color: MyColours.color_6AB6B9,
                              width: ScreenUtil().setWidth(2))),
              child: Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
                Flexible(
                    child: Text(
                  "${remark.custom}",
                  style: TextStyle(
                    fontSize: ScreenUtil().setSp(30),
                    color:
                        (remark.oftenUse != null && remark.oftenUse.isNotEmpty)
                            ? MyColours.color_ffffff
                            : MyColours.color_199095,
                  ),
                  overflow: TextOverflow.ellipsis,
                )),
              ]),
            )),
      );
    }
    alls.add(Stack(
      children: [
        isAdding
            ? Container(
                width: ScreenUtil().setWidth(200),
                height: ScreenUtil().setWidth(50),
                padding:
                    EdgeInsets.symmetric(horizontal: ScreenUtil().setWidth(20)),
                decoration: BoxDecoration(
                    border: Border.all(
                        color: MyColours.color_cccccc,
                        width: ScreenUtil().setWidth(2)),
                    borderRadius:
                        BorderRadius.circular(ScreenUtil().setWidth(10))),
                child: Expanded(
                  child: TextField(
                    controller: _controller,
                    focusNode: focusNode,
                    autofocus: true,
                    textInputAction: TextInputAction.done,
                    textAlignVertical: TextAlignVertical.center,
                    keyboardType: TextInputType.text,
                    maxLength: 10,
                    decoration: InputDecoration(
                      border: InputBorder.none,
                    ),
                    style: TextStyle(
                        color: MyColours.color_353535,
                        fontSize: ScreenUtil().setSp(30),
                        textBaseline:
                        TextBaseline.alphabetic),
                    onEditingComplete: () {
                      if(_controller.text.isEmpty){
                        setState(() {
                          isAdding=false;
                          return;
                        });
                      }
                      setState(() {
                        isAdding = false;
                        remarkManagerModel.remarks.add(Remark()
                          ..id = "-1"
                          ..custom = _controller.text
                          ..oftenUse = _controller.text);
                      });
                      _addRemark();
                      _controller.clear();
                    },
                  ),
                ),
              )
            : GestureDetector(
                onTap: () {
                  if(remarkManagerModel.remarks.length>=20)return;
                  setState(() {
                    isAdding = true;
                  });
                },
                child: Container(
                  width: ScreenUtil().setWidth(200),
                  height: ScreenUtil().setWidth(50),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      border: Border.all(
                          color: MyColours.color_cccccc,
                          width: ScreenUtil().setWidth(2)),
                      borderRadius:
                          BorderRadius.circular(ScreenUtil().setWidth(10))),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Icon(
                        Icons.add,
                        size: ScreenUtil().setWidth(30),
                        color: MyColours.color_999999,
                      ),
                      HEmptyView(10),
                      Text(
                        "添加备注",
                        style: TextStyle(
                            color: MyColours.color_999999,
                            fontSize: ScreenUtil().setSp(30)),
                      )
                    ],
                  ),
                ),
              )
      ],
    ));
    return alls;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    remarkManagerModel =
        Provider.of<RemarkManagerModel>(context, listen: false);
    return Scaffold(
        backgroundColor: MyColours.color_ffffff,
        appBar: SystemAppBar(
          '常用备注管理',
          onTap: () {
            Navigator.of(context).pop();
          },
        ),
        body: SafeArea(
          child: Consumer<RemarkManagerModel>(
            builder: (context, model, _) {
              if (model.pageState != PageState.Success) {
                return ExceptionPage(
                  pageState: model.pageState,
                  callback: () {
                    _getRemarks();
                  },
                  emptyMsg: "暂时没有备注哦",
                  emptyImg: "empty_search",
                  showMsg: "加载中，请稍后...",
                );
              } else {
                return Container(
                  padding: EdgeInsets.symmetric(
                      horizontal: ScreenUtil().setWidth(40)),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      VEmptyView(60),
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: [
                          Text(
                            "我的常用备注",
                            style: TextStyle(
                                color: MyColours.color_353535,
                                fontSize: ScreenUtil().setSp(30),
                                fontWeight: FontWeight.bold),
                          ),
                          Text(
                            "（最多添加10个）",
                            style: TextStyle(
                                color: MyColours.color_666666,
                                fontSize: ScreenUtil().setSp(26)),
                          ),
                        ],
                      ),
                      Padding(
                        padding: EdgeInsets.symmetric(
                            vertical: ScreenUtil().setWidth(20)),
                        child: Wrap(
                            spacing: ScreenUtil().setWidth(20),
                            runSpacing: ScreenUtil().setWidth(20),
                            children: _buildAlwayItems()),
                      ),
                      VEmptyView(20),
                      MyDivider(
                        double.infinity,
                        ScreenUtil().setWidth(2),
                        color: MyColours.color_f3f3f3,
                      ),
                      VEmptyView(40),
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: [
                          Text(
                            "所有备注",
                            style: TextStyle(
                                color: MyColours.color_353535,
                                fontSize: ScreenUtil().setSp(30),
                                fontWeight: FontWeight.bold),
                          ),
                          Text(
                            "（最多添加20个）",
                            style: TextStyle(
                                color: MyColours.color_666666,
                                fontSize: ScreenUtil().setSp(26)),
                          ),
                        ],
                      ),
                      Padding(
                        padding: EdgeInsets.symmetric(
                            vertical: ScreenUtil().setWidth(20)),
                        child: Wrap(
                            spacing: ScreenUtil().setWidth(20),
                            runSpacing: ScreenUtil().setWidth(20),
                            children: _buildAllItems()),
                      )
                    ],
                  ),
                );
              }
            },
          ),
        ));
  }
}