import 'package:flutter/material.dart';
import 'package:twong/api/index.dart';
import 'package:twong/utils/index.dart';
import 'package:twong/models/index.dart';
import 'package:twong/config/style.dart';
import 'package:twong/router/index.dart';
import 'package:twong/widgets/app_bar.dart';
import 'package:twong/widgets/payment.dart';

class RechargePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _RechargeState();
  }
}

class _RechargeState extends State<RechargePage> {
  RechargeIndex _data;
  RechargeData _selected;
  TextEditingController _inputCtrl = TextEditingController();

  @override
  void initState() {
    super.initState();
    loadData();
  }

  loadData() {
    Network.inst.getRecharge().then((value){
      setState(() {
        _data = value;
        _selected = _data.recharge_quota.first;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: DColors.back,
      appBar: DAppBar("充值中心", actions: [
        InkWell(
          onTap: () {
            Navigator.pushNamed(context, RouteNames.billRecord, arguments: 2);
          },
          highlightColor: Colors.transparent,
          child: Container(
            margin: EdgeInsets.only(right: 12.px),
            alignment: Alignment.center,
            child: Text("充值记录"),
          ),
        )
      ]),
      body: SafeArea(
        child: ListView(
          physics: ClampingScrollPhysics(),
          children: [
            Container(
              height: 500.px,
              child: Stack(
                children: [
                  Container(
                    height: 128.px,
                    width: MediaQuery.of(context).size.width,
                    color: DColors.Main,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text("我的余额", style: TextStyle(color: Colors.white,
                            fontSize: 12.px)),
                        RichText(text: TextSpan(
                            text: I18n.$,
                            style: TextStyle(fontSize: 12.px),
                            children: [
                              TextSpan(
                                text: _data == null ? ""
                                    : Utils.formatRMB(_data.balance),
                                style: TextStyle(fontSize: 26.px),
                              )
                            ]
                        ))
                      ],
                    ),
                  ),
                  Positioned(child: Container(
                    padding: EdgeInsets.all(6.px),
                    width: MediaQuery.of(context).size.width,
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(12.px)
                    ),
                    child: _data == null ? Utils.loadingWidget : _buildList(),
                  ), top: 120.px, left: 0)
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _buildList() {
    List<Widget> widgets = List<Widget>();
    for (var item in _data.recharge_quota) {
      widgets.add(InkWell(
        onTap: () {
          setState(() {
            _selected = item;
          });
          FocusScope.of(context).requestFocus(FocusNode());
        },
        child: Container(
          height: 48.px,
          width: 100.px,
          decoration: BoxDecoration(
              color: _selected.id == item.id ? DColors.Main : Colors.black12,
              borderRadius: BorderRadius.circular(12.px)
          ),
          padding: EdgeInsets.all(6.px),
          margin: EdgeInsets.only(bottom: 8.px, left: 6.px, right: 6.px),
          child: Column(
            children: [
              Text(Utils.formatRMB(item.price, cn: true), style: TextStyle(
                  color: _selected.id == item.id ? Colors.white : Colors.black
              )),
              Text("赠送：${Utils.formatRMB(item.price, cn: true)}", style:
              TextStyle(color: _selected.id == item.id ? Colors.white
                  : Colors.black
              ))
            ],
          ),
        ),
      ));
    }
    widgets.add(Container(
      height: 48.px,
      width: 100.px,
      decoration: BoxDecoration(
          color: _selected.id == 0 ? DColors.Main : Colors.black12,
          borderRadius: BorderRadius.circular(12.px)
      ),
      padding: EdgeInsets.all(6.px),
      margin: EdgeInsets.only(bottom: 8.px, left: 6.px, right: 6.px),
      child: TextField(
        onTap: () {
          var data = RechargeData();
          data.id = 0;
          setState(() {
            _selected = data;
          });
        },
        onChanged: (value) {
          _selected.price = value.toString();
        },
        style: TextStyle(color: _selected.id == 0 ? Colors.white
            : Colors.black),
        controller: _inputCtrl,
        textAlign: TextAlign.center,
        keyboardType: TextInputType.number,
        decoration: InputDecoration(
            hintText: "其他",
            hintStyle: TextStyle(color: _selected.id == 0 ? Colors.white
                : Colors.black),
            border: InputBorder.none
        ),
      ),
    ));

    return Container(
      margin: EdgeInsets.only(left: 12.px, right: 12.px),
      child: Column(
          children: [
            Wrap(alignment: WrapAlignment.center, children: widgets),
            _buildInfo(),
            _buildButton()
          ]),
    );
  }

  Widget _buildInfo() {
    List<Widget> widgets = List<Widget>();
    widgets.add(Text("注意事项", style: TextStyle(fontWeight: FontWeight.bold)));

    for(var item in _data.recharge_attention) {
      widgets.add(Text(item.toString()));
    }

    return Container(
      width: double.infinity,
      margin: EdgeInsets.only(top: 12.px),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: widgets,
      ),
    );
  }

  Widget _buildButton() {
    return Container(
      width: double.infinity,
      margin: EdgeInsets.only(top: 12.px, bottom: 6.px),
      child: FlatButton(
        onPressed: _goPay,
        color: DColors.Main,
        shape: StadiumBorder(),
        child: Text("立即充值", style: TextStyle(color: Colors.white)),
      ),
    );
  }

  _goPay() {
    showModalBottomSheet(
        context: context,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.only(
            topLeft: Radius.circular(10.px), topRight: Radius.circular(10.px)
        )),
        builder: (BuildContext context) {
          return Payment(PaymentInfo.recharge(_selected.id, _selected.price));
        });
  }
}