import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.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 VerifyPassScreen extends StatefulWidget {
  // static const route = '/HomeScreen';

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

class _VerifyPassScreenState extends State<VerifyPassScreen> {
  final _form = GlobalKey<FormState>();
  bool _isLoading = false;
  final codeCTRL = TextEditingController();

  @override
  void initState() {
    codeCTRL.text = '';
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

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

  void _sendCode() async {
    if (!_form.currentState.validate()) {
      return;
    }
    _form.currentState.save();
    setState(() {
      _isLoading = true;
    });
    // try {
    await Provider.of<Auth>(context, listen: false)
        .sendCode(
      codeCTRL.text,
    )
        .then(
      (result) {
        if (result == 'wrong') {
          _showDialog('Code is wrong!!!');
          setState(
            () {
              _isLoading = false;
            },
          );
        } else {
          Navigator.of(context)
              .popAndPushNamed(Routes.rePassScreen, arguments: result);
        }
      },
    );
  }

  @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(
          centerTitle: true,
          title: Text('CSSD'),
        ),
        body: Selector<ConnectivityProvider, String>(
          builder: (ctx, value, _) => value != 'offline'
              ? _isLoading
                  ? Center(
                      child: CircularProgressIndicator(),
                    )
                  : Form(
                      key: _form,
                      child: ListView(
                        padding: EdgeInsets.symmetric(horizontal: 20),
                        children: <Widget>[
                          Container(
                            padding: EdgeInsets.symmetric(vertical: 20),
                            child: Text(
                              'Send Verification Code',
                              textAlign: TextAlign.left,
                              style: TextStyle(
                                color: Colors.black,
                                fontSize: 5 * _deviceBlockSize,
                                letterSpacing: 3,
                                fontWeight: FontWeight.w700,
                              ),
                            ),
                          ),
                          TextFormField(
                            validator: (value) {
                              if (value.isEmpty) {
                                return 'Code is required.';
                              }
                              if (value.length != 6) {
                                return 'Code most be 6 characters';
                              }
                              return null;
                            },
                            controller: codeCTRL,
                            decoration: InputDecoration(
                              icon: Icon(
                                FontAwesomeIcons.starOfLife,
                                size: 6 * _deviceBlockSize,
                              ),
                              labelStyle: TextStyle(
                                fontWeight: FontWeight.w100,
                                fontSize: 4 * _deviceBlockSize,
                              ),
                              labelText: 'Code',
                              isDense: true,
                              contentPadding: EdgeInsets.symmetric(
                                vertical: 2,
                                horizontal: 3,
                              ),
                            ),
                            style: TextStyle(
                              fontWeight: FontWeight.w700,
                              fontSize: 5 * _deviceBlockSize,
                              letterSpacing: 3,
                            ),
                            keyboardType: TextInputType.number,
                            onSaved: (value) {
                              codeCTRL.text = value;
                            },
                            maxLength: 6,
                          ),
                          SizedBox(height: 40),
                          Row(
                            children: <Widget>[
                              InkWell(
                                onTap: () => _sendCode(),
                                child: Container(
                                  width: 40 * _deviceBlockSize,
                                  padding: EdgeInsets.symmetric(
                                    horizontal: 5 * _deviceBlockSize,
                                    vertical: 10,
                                  ),
                                  // margin:
                                  //     EdgeInsets.symmetric(horizontal: 35, vertical: 15),
                                  decoration: BoxDecoration(
                                    gradient: LinearGradient(
                                      colors: [Colors.blue, Colors.green],
                                    ),
                                    borderRadius: BorderRadius.circular(7),
                                  ),
                                  child: Text(
                                    'Send Code',
                                    textAlign: TextAlign.center,
                                    style: TextStyle(color: Colors.white),
                                  ),
                                ),
                              ),
                              Spacer(),
                            ],
                          ),
                          SizedBox(height: 10),
                        ],
                      ),
                    )
              : ConnectionErrorBox(),
          selector: (_, connectivity) => connectivity.conStatus,
        ),
      ),
    );
  }
}