import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import '../Login/login_screen.dart';
import '../Settings/inputWidget.dart';

class SettingsScreen extends StatefulWidget {
  const SettingsScreen({Key? key}) : super(key: key);

  @override
  State<SettingsScreen> createState() => _SettingsScreenState();
}

class _SettingsScreenState extends State<SettingsScreen> {
  bool visible = false;

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return Scaffold(
        body: SingleChildScrollView(
      child: Stack(
        children: <Widget>[
          Container(
            height: size.height * 0.3,
            decoration: BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.topRight,
                    end: Alignment.bottomRight,
                    colors: [
                  Color(0xFFD21404),
                  Color(0xFFFD7267),
                ])),
          ),
          SafeArea(
            child: Padding(
              padding: EdgeInsets.all(20),
              child: Column(
                children: <Widget>[
                  Stack(
                    alignment: Alignment.topCenter,
                    children: [
                      Container(
                        margin: EdgeInsets.only(
                            top: (((size.width - 20) * 0.33) * 0.5)),
                        child: Card(
                          elevation: 15,
                          child: Container(
                              height: (size.height * 0.28) * .7,
                              width: size.width - 20,
                              padding: EdgeInsets.all(15),
                              decoration: BoxDecoration(
                                  color: Colors.white,
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(10))),
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.end,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: <Widget>[
                                  Text(
                                    'Dieni Anindyasarathi',
                                    maxLines: 2,
                                    overflow: TextOverflow.ellipsis,
                                    textAlign: TextAlign.center,
                                    style: GoogleFonts.inter(
                                        fontSize: 17,
                                        color: Colors.black,
                                        fontWeight: FontWeight.bold),
                                  ),
                                  Text(
                                    'IT Developer',
                                    textAlign: TextAlign.center,
                                    style: GoogleFonts.inter(
                                        fontSize: 16, color: Colors.black),
                                  ),
                                ],
                              )),
                        ),
                      ),
                      Container(
                          height: (size.width - 20) * 0.33,
                          width: (size.width - 20) * 0.33,
                          decoration: BoxDecoration(
                            color: Colors.black,
                            image: DecorationImage(
                              image: AssetImage(
                                  'assets/images/ic_administrator.png'),
                              fit: BoxFit.fill,
                            ),
                            shape: BoxShape.circle,
                          ),
                          ),
                      Container(
                        height: ((size.width - 20) * 0.33) * 0.25,
                        width: ((size.width - 20) * 0.33) * 0.25,
                        margin: EdgeInsets.only(
                            top: (((size.width - 20) * 0.33) - 20),
                            left: ((size.width - 20) * 0.33) - 10),
                        decoration: BoxDecoration(
                          color: Colors.yellow,
                          image: DecorationImage(
                            image: AssetImage('assets/images/ic_camera.png'),
                            fit: BoxFit.scaleDown,
                          ),
                          shape: BoxShape.circle,
                        ),
                      ),
                    ],
                  ),
                  InkWell(
                    child:
                        roundedRectButton("Edit Password", Gradients1, 20, 5),
                    onTap: () {
                      setState(() {
                        visible = !visible;
                      });
                    },
                  ),
                  Visibility(
                    visible: visible,
                    child: Container(
                      margin: EdgeInsets.only(top: 10),
                      width: size.width - 50,
                      padding: EdgeInsets.all(15),
                      decoration: BoxDecoration(
                          color: Color(0xFFD9D9D9),
                          borderRadius: BorderRadius.all(Radius.circular(5))),
                      child: Column(
                        children: [
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Padding(
                                padding: EdgeInsets.only(bottom: 5),
                                child: Text(
                                  "Type your current Password",
                                  style: TextStyle(
                                      fontSize: 16, color: Colors.black87),
                                ),
                              ),
                              Stack(
                                alignment: Alignment.bottomRight,
                                children: <Widget>[
                                  InputWidgetPassword("Current Password"),
                                ],
                              ),
                            ],
                          ),
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Padding(
                                padding: EdgeInsets.only(bottom: 5),
                                child: Text(
                                  "Type your New Password",
                                  style: TextStyle(
                                      fontSize: 16, color: Colors.black87),
                                ),
                              ),
                              Stack(
                                alignment: Alignment.bottomRight,
                                children: <Widget>[
                                  InputWidgetPassword("New Password"),
                                ],
                              ),
                            ],
                          ),
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Padding(
                                padding: EdgeInsets.only(bottom: 5),
                                child: Text(
                                  "Re-type your New Password",
                                  style: TextStyle(
                                      fontSize: 16, color: Colors.black87),
                                ),
                              ),
                              Stack(
                                alignment: Alignment.bottomRight,
                                children: <Widget>[
                                  InputWidgetPassword("Re-type New Password"),
                                ],
                              ),
                            ],
                          ),
                          InkWell(
                              child: roundedRectButton(
                                  "Save Password", Gradients2, 10, 10),
                              onTap: () {
                                showAlertDialog(context);
                              }),
                        ],
                      ),
                    ),
                  ),
                  InkWell(
                      child: roundedRectButton("Logout", Gradients1, 10, 5),
                      onTap: () {
                        showAlertDialog(context);
                      }),
                ],
              ),
            ),
          ),
        ],
      ),
    ));
  }
}

Widget roundedRectButton(String title, List<Color> gradient, double marginTop,
    double radiusCircular) {
  return Builder(builder: (BuildContext mContext) {
    return Align(
      alignment: Alignment.center,
      child: Stack(
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(top: marginTop),
            alignment: Alignment.center,
            height: 55,
            width: MediaQuery.of(mContext).size.width - 50,
            decoration: ShapeDecoration(
              shape: RoundedRectangleBorder(
                  borderRadius:
                      BorderRadius.all(Radius.circular(radiusCircular))),
              gradient: LinearGradient(
                  colors: gradient,
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight),
            ),
            child: Text(title,
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 19,
                    fontWeight: FontWeight.w500)),
            padding: EdgeInsets.all(10),
          )
        ],
      ),
    );
  });
}

const List<Color> Gradients1 = [
  Color(0xFF0EDED2),
  Color(0xFF03A0FE),
];

const List<Color> Gradients2 = [
  Color(0xFFFF9945),
  Color(0xFFFc6076),
];

showAlertDialog(BuildContext context) {
  // set up the button
  Widget okButton = TextButton(
    child: Text("Yes"),
    onPressed: () {
      Navigator.of(context, rootNavigator: true).pop();
      Navigator.pushAndRemoveUntil(
          context,
          MaterialPageRoute(builder: (context) => LoginView()),
          (route) => false);
    },
  );

  Widget noButton = TextButton(
    child: Text("No"),
    onPressed: () {
      Navigator.of(context, rootNavigator: true).pop();
    },
  );

  // set up the AlertDialog
  AlertDialog alert = AlertDialog(
    title: Text("HRIS Self Service"),
    content: Text("Are you sure you want to logout from this Application?"),
    actions: [noButton, okButton],
  );

  // show the dialog
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return alert;
    },
  );
}
