import 'package:flutter/material.dart';
import 'package:teso/Pages/PageWidgets/CoinPurchase/SilverAmountInput.dart';
import 'package:teso/Pages/PageWidgets/CoinPurchase/MomoType.dart';
import 'package:teso/Pages/PageWidgets/CoinPurchase/PayGold.dart';
import 'package:teso/Pages/PageWidgets/CoinPurchase/phonenumber.dart';

class SilverPurchase extends StatefulWidget {
  @override
  _SilverPurchaseState createState() => _SilverPurchaseState();
}

class _SilverPurchaseState extends State<SilverPurchase> {
  TextEditingController amount;
  TextEditingController momoNumber;
  String tapped;

  @override
  void initState() {
    amount = new TextEditingController();
    momoNumber = new TextEditingController();
    super.initState();
    amount.addListener(() {
      setState(() {});
    });
  }

  void selectTransfer(String type) {
    setState(() {
      tapped = type;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(
        horizontal: (MediaQuery.of(context).size.width) * 0.030,
        vertical: (MediaQuery.of(context).size.width) * 0.040,
      ),
      child: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Container(
          child: new Wrap(
            children: <Widget>[
              new Container(
                  width: double.infinity,
                  margin: EdgeInsets.only(
                    top: 5.0,
                    bottom: 10.0,
                  ),
                  child: Center(
                    child: Text(
                      "Purchase Silver Coins",
                      style: TextStyle(
                        fontSize: 18.0,
                      ),
                    ),
                  )),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20.0),
                child: Divider(),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 30.0),
                child: Container(
                  width: double.infinity,
                  margin: EdgeInsets.symmetric(vertical: 10),
                  child: new Wrap(
                    spacing: 10,
                    direction: Axis.horizontal,
                    children: [
                      Container(
                        height: 70,
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text(
                            "Amount",
                            style: TextStyle(
                              fontSize: 18,
                            ),
                          ),
                        ),
                      ),
                      buildAmount(context, amount),
                    ],
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 30.0),
                child: Container(
                  width: double.infinity,
                  margin: EdgeInsets.symmetric(vertical: 5),
                  child: Text(
                    "Payment Method",
                    style: TextStyle(
                      fontSize: 18,
                    ),
                  ),
                ),
              ),
              SizedBox(height: 14.0),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20.0),
                child: SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child: Row(
                    children: [
                      payWithGold(context, "goldcoins", selectTransfer, tapped),
                      buildType(context, "assets/images/MTN.png", "mtn",
                          selectTransfer, tapped),
                      buildType(context, "assets/images/Vodafone.png",
                          "vodafone", selectTransfer, tapped),
                      buildType(context, "assets/images/AirtelTigo.png",
                          "airteltigo", selectTransfer, tapped),
                    ],
                  ),
                ),
              ),
              SizedBox(height: 10.0),
              Visibility(
                visible: tapped != null &&
                        tapped != "goldcoins" &&
                        amount.text.isNotEmpty
                    ? true
                    : false,
                child: Container(
                  width: double.infinity,
                  padding: const EdgeInsets.symmetric(horizontal: 30.0),
                  child: Text(
                    "Phone number",
                    style: TextStyle(
                      fontSize: 17,
                    ),
                  ),
                ),
              ),
              Visibility(
                  visible: tapped != null &&
                          tapped != "goldcoins" &&
                          amount.text.isNotEmpty
                      ? true
                      : false,
                  child: SizedBox(height: 10.0)),
              Visibility(
                visible: tapped != null &&
                        tapped != "goldcoins" &&
                        amount.text.isNotEmpty
                    ? true
                    : false,
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 30.0),
                  child: inputTelNumber(context, momoNumber),
                ),
              ),
              Visibility(
                visible:
                    tapped != null && amount.text.isNotEmpty ? true : false,
                child: new Container(
                  margin: EdgeInsets.symmetric(
                    vertical: 20.0,
                  ),
                  child: new Center(
                    child: ElevatedButton(
                      style: ElevatedButton.styleFrom(
                        primary: Theme.of(context).colorScheme.secondary,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.all(
                            Radius.circular(25.0),
                          ),
                        ),
                      ),
                      onPressed: () => Navigator.pop(context),
                      child: Text(
                        "Confirm",
                        style: TextStyle(
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}