import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:sport/services/app_lifecycle_state.dart';
import 'package:sport/widgets/appbar.dart';
import 'package:sport/widgets/button_primary.dart';
import 'package:sport/widgets/misc.dart';

final Map<int, String> targetTypeMap = {0:"距离", 1:"时间", 2:"次数", 3:"步数"};
final Map<int, String> targetTypeMapUnit = {0:"公里", 1:"分钟", 2:"次", 3:"步"};

class RunTargetCustomPage extends StatefulWidget {
  final double target;
  final int type;

  const RunTargetCustomPage({Key? key, this.target = 0, required this.type}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _PageState();
}

class _PageState extends LifecycleState<RunTargetCustomPage> {
  ValueNotifier<String> _valueTotal = ValueNotifier("");

  @override
  void initState() {
    super.initState();
    _valueTotal.value = widget.type == 0 ? "${widget.target.toStringAsFixed(2)}" : "${widget.target.toInt()}";
  }

  @override
  void dispose() {
    super.dispose();
  }

  late String _t = "";

  _text(int index) {
    var tt = _valueTotal.value;
    print("! index $index, $_t");

    int dot = _t.indexOf(".");
    if (dot > -1) {
      print("! index $index, $_t ${_t.substring(dot).length}");
      if (_t.substring(dot).length > 2 && index != 11) {
        return;
      }
      if (index == 9) return;
    }

    if (index < 9) {
      _t += (index + 1).toString();
    } else if (index == 9) {
      _t += ".";
    } else if (index == 10) {
      _t += "0";
    } else if (index == 11) {
      if (_t.length > 0) {
        _t = _t.substring(0, _t.length - 1);
      }
      if (_t.isEmpty) {
        _valueTotal.value = "";
        return;
      }
    }

    var check = true;
    try {
      var result = double.parse(_t);
      if (widget.type == 0) {
        if (result > 100) {
          check = false;
        }
      } else if (widget.type == 1) {
        if (result > 1440) {
          check = false;
        }
      }
      print("! result $result $_t");
    } catch (e) {
      print("! result $tt $_t $e");
    }
    if (check) {
      _valueTotal.value = "$_t";
    } else {
      _valueTotal.value = "$tt";
      _t = tt;
    }
  }

  @override
  Widget build(BuildContext context) {
    final double _height = (MediaQuery.of(context).size.height - 50) / 2 / 5;
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: buildAppBar(context, title: "自定义${targetTypeMap[widget.type]}"),
      body: Column(
        children: [
          Expanded(
            child: Center(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  ValueListenableBuilder(
                      valueListenable: _valueTotal,
                      builder: (_, v, __) => Text(
                            "$v",
                            style: Theme.of(context).textTheme.headline1!.copyWith(fontSize: 80.0, fontFamily: "DIN"),
                          )),
                  SizedBox(
                    height: 12.0,
                  ),
                  Text(
                    "${targetTypeMapUnit[widget.type]}",
                    style: Theme.of(context).textTheme.bodyText2!.copyWith(fontSize: 18.0),
                  ),
                  SizedBox(
                    height: 30.0,
                  ),
                  PrimaryButton(
                    callback: () {
                      Navigator.pop(context, _valueTotal.value);
                    },
                    content: "确定",
                    width: 90,
                    height: 35,
                  )
                ],
              ),
            ),
          ),
          Container(
            color: Color(0xfff1f1f1),
            padding: EdgeInsets.all(4),
            child: AlignedGridView.count(
              padding: EdgeInsets.zero,
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              crossAxisCount: 3,
              itemCount: 12,
              itemBuilder: (BuildContext context, int index) {
                if (index == 9) {
                  if (widget.type == 0) {
                    return Material(
                      child: Ink(
                        child: InkWell(
                          onTap: () {
                            _text(index);
                          },
                          child: Container(
                              height: _height,
                              child: Center(
                                child: Text(
                                  ".",
                                  style: TextStyle(fontSize: 40, color: Color(0xff333333)),
                                  strutStyle: fixedLine,
                                ),
                              )),
                        ),
                      ),
                    );
                  } else {
                    return Container();
                  }
                } else if (index == 11) {
                  return Material(
                    child: Ink(
                      child: InkWell(
                          onTap: () {
                            _text(index);
                          },
                          child: Container(
                            height: _height,
                            child: Center(child: Icon(Icons.backspace_outlined)),
                          )),
                    ),
                  );
                }
                return Material(
                  child: Ink(
                    child: InkWell(
                      onTap: () {
                        _text(index);
                      },
                      child: Container(
                          height: _height,
                          child: Center(
                              child: Text(
                            index < 10 ? "${index + 1}" : "0",
                            style: TextStyle(fontSize: 16.0, color: Color(0xff333333)),
                          ))),
                    ),
                  ),
                );
              },
              mainAxisSpacing: 4.0,
              crossAxisSpacing: 4.0,
            ),
          )
        ],
      ),
    );
  }
}