import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../../config/routes.dart';
import '../../providers/auth.dart';
import '../../providers/connectivity.dart';
import '../../widgets/Global/internet_error.dart';

class RePassScreen extends StatefulWidget {
  // static const route = '/HomeScreen';

  @override
  State<StatefulWidget> createState() {
    return _RePassScreenState();
  }
}

class _RePassScreenState extends State<RePassScreen> {
  final _form = GlobalKey<FormState>();
  bool _isLoading = false;

  // final cellNumberController = TextEditingController();
  final passwordController = new TextEditingController();
  final rePasswordController = new TextEditingController();
  String token = 'Bearer ';

  // String token = 'Bearer ';

  bool _hidePass = true;
  bool _hideRePass = true;
  bool isInit = true;

  @override
  void didChangeDependencies() {
    if (isInit) {
      token += ModalRoute.of(context)!.settings.arguments.toString();
      isInit = false;
    }
    super.didChangeDependencies();
  }

  Future<void> _showDialog(String message) async {
    await showDialog(
      context: context,
      builder: (ctx) => AlertDialog(
        content: Text(message),
        actions: <Widget>[
          TextButton(
            child: Text('Ok'),
            onPressed: () {
              Navigator.of(ctx).pop();
            },
          ),
        ],
      ),
    );
  }

  void _sendRePass() async {
    if (!_form.currentState!.validate()) {
      return;
    }
    _form.currentState!.save();
    setState(() {
      _isLoading = true;
    });
    await Provider.of<Auth>(context, listen: false)
        .sendRePass(passwordController.text, rePasswordController.text, token)
        .then((value) async {
      if (value == 'done') {
        await _showDialog('Password changed successfully.');
        Navigator.of(context).pop();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    final _media = MediaQuery.of(context);
    // final double _pixelRatio = (_media.size.height / _media.size.width * 7 / 5);
    final double _devicewidth = _media.size.width;
    final double _deviceBlockSize = _devicewidth / 100;
    return SafeArea(
      child: Scaffold(
          appBar: AppBar(
            titleSpacing: -10,
            title: Text(
              'Home',
              style: TextStyle(
                color: Colors.white,
              ),
            ),
            backgroundColor: Colors.black,
            leading: IconButton(
              icon: Icon(
                Icons.keyboard_arrow_left,
                color: Colors.white,
                size: 35,
              ),
              onPressed: () => Navigator.of(context).pushNamed(Routes.homePage),
            ),
          ),
          body: Selector<ConnectivityProvider, String>(
            builder: (ctx, value, _) => value != 'offline'
                ? _isLoading
                    ? Center(
                        child: CircularProgressIndicator(
                          color: Colors.black,
                        ),
                      )
                    : Form(
                        key: _form,
                        child: ListView(
                          padding: EdgeInsets.symmetric(horizontal: 15),
                          children: <Widget>[
                            Container(
                              padding: EdgeInsets.only(top: 20, bottom: 5),
                              child: Text(
                                'CHANGE PASSWORD',
                                textAlign: TextAlign.left,
                                style: TextStyle(
                                  color: Colors.black,
                                  fontSize: 6 * _deviceBlockSize,
                                  // letterSpacing: 3,
                                  fontWeight: FontWeight.w700,
                                ),
                              ),
                            ),
                            Container(
                              padding: EdgeInsets.symmetric(horizontal: 5),
                              child: Column(
                                children: [
                                  TextFormField(
                                    validator: (value) {
                                      if (value!.isEmpty) {
                                        return 'Password is required.';
                                      }
                                      if (value.length < 8) {
                                        return 'Password at least is 8 characters.';
                                      }
                                      return null;
                                    },
                                    obscureText: _hidePass,
                                    controller: passwordController,
                                    decoration: InputDecoration(
                                      // icon: Icon(
                                      //   FontAwesomeIcons.starOfLife,
                                      //   size: 6 * _deviceBlockSize,
                                      // ),
                                      labelStyle: TextStyle(
                                        fontWeight: FontWeight.w100,
                                        fontSize: 4 * _deviceBlockSize,
                                      ),
                                      labelText: 'Password',
                                      isDense: true,
                                      contentPadding: EdgeInsets.symmetric(
                                          vertical: 2, horizontal: 3),
                                      // suffixIcon: InkWell(
                                      //   child: Icon(FontAwesomeIcons.eye),
                                      //   onTap: () {
                                      //     setState(() {
                                      //       _hidePass = !_hidePass;
                                      //     });
                                      //   },
                                      // ),
                                    ),
                                    style: TextStyle(
                                      fontWeight: FontWeight.w700,
                                      fontSize: 5 * _deviceBlockSize,
                                    ),
                                    textInputAction: TextInputAction.done,
                                    onFieldSubmitted: (_) {
                                      _sendRePass();
                                    },
                                    keyboardType: TextInputType.visiblePassword,
                                  ),
                                  SizedBox(
                                    height: 30,
                                  ),
                                  TextFormField(
                                    validator: (value) {
                                      if (value!.length < 8) {
                                        return 'Password at least is 8 characters.';
                                      }
                                      if (value != passwordController.text) {
                                        return 'Password doesnt match!';
                                      }
                                      return null;
                                    },
                                    obscureText: _hideRePass,
                                    controller: rePasswordController,
                                    decoration: InputDecoration(
                                      // icon: Icon(
                                      //   FontAwesomeIcons.starOfLife,
                                      //   size: 6 * _deviceBlockSize,
                                      // ),
                                      labelStyle: TextStyle(
                                        fontWeight: FontWeight.w100,
                                        fontSize: 4 * _deviceBlockSize,
                                      ),
                                      labelText: 'retype your new password',
                                      isDense: true,
                                      contentPadding: EdgeInsets.symmetric(
                                          vertical: 2, horizontal: 3),
                                      // suffixIcon: InkWell(
                                      //   child: Icon(FontAwesomeIcons.eye),
                                      //   onTap: () {
                                      //     setState(() {
                                      //       _hideRePass = !_hideRePass;
                                      //     });
                                      //   },
                                      // ),
                                    ),
                                    style: TextStyle(
                                      fontWeight: FontWeight.w700,
                                      fontSize: 5 * _deviceBlockSize,
                                    ),
                                    textInputAction: TextInputAction.done,
                                    onFieldSubmitted: (_) {
                                      _sendRePass();
                                    },
                                    keyboardType: TextInputType.visiblePassword,
                                  ),
                                  SizedBox(height: 40),
                                  Row(
                                    children: <Widget>[
                                      InkWell(
                                        onTap: () => _sendRePass(),
                                        child: Container(
                                          width: 88 * _deviceBlockSize,
                                          padding: EdgeInsets.all(10),
                                          decoration: BoxDecoration(
                                            color: Colors.black,
                                            borderRadius:
                                                BorderRadius.circular(7),
                                          ),
                                          child: Text(
                                            'Save New Password',
                                            style: TextStyle(
                                              color: Colors.white,
                                              fontSize: 5 * _deviceBlockSize,
                                            ),
                                            textAlign: TextAlign.center,
                                          ),
                                        ),
                                      ),
                                      Spacer(),
                                    ],
                                  ),
                                  SizedBox(height: 10),
                                ],
                              ),
                            ),
                          ],
                        ),
                      )
                : ConnectionErrorBox(),
            selector: (_, connectivity) => connectivity.conStatus,
          )),
    );
  }
}