import 'package:flutter/material.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/view_widget/round_button.dart';

class MineWalletPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MineWalletPage();
  }
}

class _MineWalletPage extends State<MineWalletPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          S.of(context).wodeqianbao,
          style: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold,
          ),
        ),
        centerTitle: false,
        backgroundColor: Color(0xFFF7F7F7),
        elevation: 0,
        leading: GestureDetector(
          onTap: () {
            Navigator.of(context).pop();
          },
          child: Container(
            alignment: Alignment.centerRight,
            margin: EdgeInsets.only(left: 10),
            padding: EdgeInsets.all(6),
            child: Icon(
              Icons.arrow_back_ios,
              color: Colors.black,
              size: 24,
            ),
          ),
        ),
        titleSpacing: 2,
        leadingWidth: 56,
      ),
      body: SingleChildScrollView(
        child: Container(
          color: Color(0xFFF7F7F7),
          child: Column(
            children: [
              balance(),
              rechargeWithdrawal(),
              balanceHistory(),
            ],
          ),
        ),
      ),
    );
  }

  Widget balanceHistory() {
    return Container(
      margin: EdgeInsets.fromLTRB(16, 16, 16, 0),
      padding: EdgeInsets.fromLTRB(24, 24, 24, 24),
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(8)),
          boxShadow: [
            BoxShadow(
                color: Colors.black.withAlpha(12),
                offset: Offset(0, 3),
                blurRadius: 14,
                spreadRadius: 0)
          ]),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            S.of(context).lishijilu,
            style: TextStyle(
              fontWeight: FontWeight.bold,
              color: Colors.black,
              fontSize: 16,
            ),
          ),
          SizedBox(
            height: 16,
          ),
          Row(
            children: [
              Container(
                width: 3,
                height: 15,
                color: Color(0xFF20662A),
              ),
              SizedBox(
                width: 3,
              ),
              Text(
                "09/2021",
                style: TextStyle(
                  color: Color(0xFF353535),
                  fontSize: 14,
                ),
              ),
            ],
          ),
          Container(
            margin: EdgeInsets.only(top: 14),
            child: ListView.builder(
                itemCount: 15,
                shrinkWrap: true,
                padding: EdgeInsets.only(bottom: 20),
                physics: NeverScrollableScrollPhysics(),
                itemBuilder: (context, position) {
                  return historyItem(position);
                }),
          ),
        ],
      ),
    );
  }

  Widget historyItem(position) {
    bool isRecharge = (position % 2) == 0;
    return Container(
      margin: EdgeInsets.only(top: 10, bottom: 10),
      child: Row(
        children: [
          Image.asset(
            isRecharge
                ? "assets/image/icon_wallet_recharge.png"
                : "assets/image/icon_wallet_withdrawal.png",
            width: 34,
            height: 34,
          ),
          SizedBox(
            width: 12,
          ),
          Expanded(
            flex: 1,
            child: Container(
              height: 34,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    isRecharge ? S.of(context).chongzhi : S.of(context).tixian,
                    style: TextStyle(color: Colors.black, fontSize: 12),
                  ),
                  Text(
                    "27th 13:03",
                    style: TextStyle(color: Color(0xFF727272), fontSize: 10),
                  )
                ],
              ),
            ),
          ),
          Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Text(
                  isRecharge ? "+200" : "-200",
                  style: TextStyle(color: Colors.black, fontSize: 12),
                ),
                Text(
                  S.of(context).yue_(200),
                  style: TextStyle(color: Color(0xFF727272), fontSize: 10),
                )
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget balance() {
    return Container(
      width: double.infinity,
      margin: EdgeInsets.fromLTRB(16, 16, 16, 8),
      padding: EdgeInsets.fromLTRB(24, 24, 24, 24),
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(8)),
          boxShadow: [
            BoxShadow(
                color: Colors.black.withAlpha(12),
                offset: Offset(0, 3),
                blurRadius: 14,
                spreadRadius: 0)
          ]),
      child: Column(
        children: [
          Text(
            S.of(context).zhanghuyue,
            style: TextStyle(
                fontWeight: FontWeight.bold,
                color: Color(0xFF353535),
                fontSize: 16),
          ),
          Text(
            "0",
            style: TextStyle(
                fontWeight: FontWeight.bold,
                color: Color(0xFF353535),
                fontSize: 60),
          ),
          Text(
            S.of(context).keyongyue,
            style: TextStyle(
              color: Color(0xFF20662A),
              fontSize: 16,
            ),
          ),
          SizedBox(
            height: 24,
          ),
          RoundButton(
            icons: Icon(
              Icons.refresh,
              color: Colors.white,
            ),
            text: S.of(context).shuaxinyue,
            textColor: Colors.white,
            radius: 15,
            backgroup: Color(0xFF20662A),
            fontSize: 12,
            padding: EdgeInsets.fromLTRB(12, 4, 12, 4),
          )
        ],
      ),
    );
  }

  Widget rechargeWithdrawal() {
    return Row(
      children: [
        Expanded(
          child: InkWell(
            onTap: () {
              Navigator.of(context).pushNamed('/router/recharge_page');
            },
            child: Container(
              margin: EdgeInsets.fromLTRB(16, 16, 16, 16),
              padding: EdgeInsets.fromLTRB(0, 7, 0, 7),
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(Radius.circular(8)),
                  boxShadow: [
                    BoxShadow(
                        color: Colors.black.withAlpha(12),
                        offset: Offset(0, 3),
                        blurRadius: 14,
                        spreadRadius: 0)
                  ]),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Image.asset(
                    "assets/image/icon_wallet_recharge.png",
                    width: 40,
                    height: 40,
                  ),
                  Text(
                    S.of(context).chongzhi,
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                        color: Colors.black),
                  )
                ],
              ),
            ),
          ),
          flex: 1,
        ),
        Expanded(
          child: Container(
            margin: EdgeInsets.fromLTRB(16, 16, 16, 16),
            padding: EdgeInsets.fromLTRB(0, 7, 0, 7),
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.all(Radius.circular(8)),
                boxShadow: [
                  BoxShadow(
                      color: Colors.black.withAlpha(12),
                      offset: Offset(0, 3),
                      blurRadius: 14,
                      spreadRadius: 0)
                ]),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Image.asset(
                  "assets/image/icon_wallet_withdrawal.png",
                  width: 40,
                  height: 40,
                ),
                Text(
                  S.of(context).tixian,
                  style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 16,
                      color: Colors.black),
                )
              ],
            ),
          ),
          flex: 1,
        ),
      ],
    );
  }
}