import 'package:flutter/material.dart';
import 'package:flutter/services.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/utils/utils.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();

  int alwaysCount = 0; //常用备注数

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

    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      _getRemarks(showPageLoading: true);
    });
  }

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

  //添加备注
  _addRemark() async {
    Map<String, String> params = {
      "uid": Provider.of<UserModel>(context, listen: false).user.openid,
      "custom": _controller.text
    };
    await remarkManagerModel.addRemark(context, params);
    _getRemarks(showPageLoading: false); //添加完重新获取备注信息
  }

  //添加常用备注
  _addCustomRemark(Remark remark) {
    Map<String, String> params = {
      "uid": Provider.of<UserModel>(context, listen: false).user.openid,
      "kid": remark.id,
      "flag": "custom"
    };
    remarkManagerModel.getRemarks(context, params);
  }

  //取消常用备注
  _delCustomRemark(Remark remark) {
    if (remark.id == "-1") return;
    Map<String, String> params = {
      "uid": Provider.of<UserModel>(context, listen: false).user.openid,
      "kid": remark.id,
      "flag": "often"
    };
    remarkManagerModel.getRemarks(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 = "";
                  });
                  _delCustomRemark(remark);
                },
                child: Padding(
                  padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
                  child: Image.asset(
                    "assets/icon_remark_del.png",
                    width: ScreenUtil().setWidth(18),
                    height: ScreenUtil().setWidth(18),
                  ),
                ))
          ]),
        ));
    }
    alwaysCount = always.length;
    return always;
  }

  //构建所有备注
  List<Widget> _buildAllItems() {
    List<Widget> alls = [];
    for (Remark remark in remarkManagerModel.remarks) {
      alls.add(
        GestureDetector(
            onTap: () {
              if (alwaysCount >= 10) {
                Utils.showToast("最多添加10个常用备注");
                return;
              }
              setState(() {
                remark.oftenUse = remark.custom;
                _addCustomRemark(remark);
              });
            },
            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),
                alignment: Alignment.center,
                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: TextField(
                  controller: _controller,
                  focusNode: focusNode,
                  autofocus: true,
                  textInputAction: TextInputAction.done,
                  textAlignVertical: TextAlignVertical.center,
                  keyboardType: TextInputType.text,
                  decoration: InputDecoration.collapsed(hintText: ""),
                  inputFormatters: [LengthLimitingTextInputFormatter(10)],
                  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;
                    });
                    _addRemark();
                    _controller.clear();
                  },
                ))
            : GestureDetector(
                onTap: () {
                  if (remarkManagerModel.remarks.length >= 20) {
                    Utils.showToast("最多添加20个备注");
                    return;
                  }
                  if (alwaysCount >= 10) {
                    Utils.showToast("最多添加10个常用备注");
                    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: [
                      Image.asset(
                        "assets/icon_remark_add.png",
                        width: ScreenUtil().setWidth(30),
                        height: ScreenUtil().setWidth(30),
                      ),
                      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(showPageLoading: true);
                  },
                  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(40)),
                        child: Wrap(
                            spacing: ScreenUtil().setWidth(20),
                            runSpacing: ScreenUtil().setWidth(20),
                            children: _buildAlwayItems()),
                      ),
                      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(40)),
                        child: Wrap(
                            spacing: ScreenUtil().setWidth(20),
                            runSpacing: ScreenUtil().setWidth(20),
                            children: _buildAllItems()),
                      )
                    ],
                  ),
                );
              }
            },
          ),
        ));
  }
}