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

class Register extends StatefulWidget {
  // static const route = '/RegisterScreen';

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

class _RegisterState extends State<Register> {
  final _passwordFocusNode = FocusNode();
  final _form = GlobalKey<FormState>();
  bool _isLoading = false;
  final cellNumberController = TextEditingController();
  bool _hidePass = true;
  Map<String, dynamic> map = Map<String, dynamic>();
  final List<String> hospitalVals = ['Shahid Beheshti', 'None'];
  String? curhospitalVal;
  @override
  void initState() {
    cellNumberController.text = map['cellNumber'];
    curhospitalVal = hospitalVals[0];
    super.initState();
  }

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

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

  void _register() async {
    if (!_form.currentState!.validate()) {
      return;
    }
    _form.currentState!.save();
    // setState(() {
    //   _isLoading = true;
    // });
    // try {
    //   // await Provider.of<Auth>(context).register(
    //   //   map['cellNumber'],
    //   //   map['password'],
    //   // );
    // } catch (error) {
    //   _showDialog('something went wrong!');
    //   setState(() {
    //     _isLoading = false;
    //   });
    // }

    // Navigator.pushReplacement(
    //   context,
    //   MaterialPageRoute(builder: (context) {
    //     return HomePage();
    //   }),
    // );
  }

  @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('Login'),
          leading: IconButton(
            icon: Icon(
              Icons.keyboard_arrow_left,
              size: 35,
            ),
            onPressed: () => Navigator.of(context).pop(),
          ),
        ),
        body: _isLoading
            ? Center(
                child: CircularProgressIndicator(
                  color: Colors.black,
                ),
              )
            : Form(
                key: _form,
                child: ListView(
                  padding: EdgeInsets.symmetric(horizontal: 20),
                  children: <Widget>[
                    Container(
                      padding: EdgeInsets.symmetric(vertical: 20),
                      child: Text(
                        'register',
                        textAlign: TextAlign.left,
                        style: TextStyle(
                          color: Colors.black,
                          fontSize: 7 * _deviceBlockSize,
                          letterSpacing: 3,
                        ),
                      ),
                    ),
                    TextFormField(
                      validator: (value) {
                        if (value!.isEmpty) {
                          return 'Cell number is required.';
                        }
                        RegExp regExp = RegExp(r'^09[0,1,2,3,9]{1}[0-9]{8}$');
                        if (!regExp.hasMatch(value)) {
                          return 'Enter a valid cell number';
                        }
                        return null;
                      },
                      style: TextStyle(fontWeight: FontWeight.w700),
                      keyboardType: TextInputType.phone,
                      textInputAction: TextInputAction.next,
                      onFieldSubmitted: (_) {
                        FocusScope.of(context).requestFocus(_passwordFocusNode);
                      },
                      controller: cellNumberController,
                      decoration: InputDecoration(
                        isDense: true,
                        icon: Icon(
                          Icons.call,
                          color: Colors.grey,
                        ),
                        border: UnderlineInputBorder(),
                        fillColor: Colors.red,
                        labelText: 'Cell Number',
                        contentPadding: EdgeInsets.symmetric(vertical: 5),
                      ),
                      onSaved: (value) {
                        map['cellNumber'] = value;
                      },
                    ),
                    SizedBox(
                      height: 10,
                    ),
                    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,
                      textInputAction: TextInputAction.done,
                      onFieldSubmitted: (_) {
                        _register();
                      },
                      style: TextStyle(fontWeight: FontWeight.w700),
                      decoration: InputDecoration(
                        isDense: true,
                        icon: Icon(
                          FontAwesomeIcons.starOfLife,
                          color: Colors.grey,
                        ),
                        border: UnderlineInputBorder(),
                        fillColor: Colors.red,
                        labelText: 'Password',
                        contentPadding: EdgeInsets.symmetric(vertical: 5),
                        suffixIcon: InkWell(
                          child: Icon(FontAwesomeIcons.eye),
                          onTap: () {
                            setState(() {
                              _hidePass = !_hidePass;
                            });
                          },
                        ),
                      ),
                      focusNode: _passwordFocusNode,
                      onSaved: (value) {
                        map['password'] = value;
                      },
                    ),
                    SizedBox(
                      height: 10,
                    ),
                    TextFormField(
                      validator: (value) {
                        if (value!.isEmpty) {
                          return 'Full Name is required.';
                        }
                        // RegExp regExp = RegExp(r'^09[0,1,2,3,9]{1}[0-9]{8}$');
                        // if (!regExp.hasMatch(value)) {
                        //   return 'Enter a valid cell number';
                        // }
                        return null;
                      },
                      // keyboardType: TextInputType.phone,
                      // textInputAction: TextInputAction.next,
                      // onFieldSubmitted: (_) {
                      //   FocusScope.of(context).requestFocus(_passwordFocusNode);
                      // },
                      // controller: cellNumberController,
                      decoration: InputDecoration(
                        isDense: true,
                        icon: Icon(
                          FontAwesomeIcons.sortNumericDown,
                          color: Colors.grey,
                        ),
                        border: UnderlineInputBorder(),
                        fillColor: Colors.red,
                        labelText: 'Full Name',
                        contentPadding: EdgeInsets.symmetric(vertical: 5),
                      ),
                      style: TextStyle(fontWeight: FontWeight.w700),
                      // onSaved: (value) {
                      //   map['cellNumber'] = value;
                      // },
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    Row(
                      // width: double.infinity,
                      children: <Widget>[
                        Icon(
                          FontAwesomeIcons.alignLeft,
                          color: Colors.grey,
                          size: 5 * _deviceBlockSize,
                        ),
                        SizedBox(
                          width: 3 * _deviceBlockSize,
                        ),
                        Expanded(
                          // width: MediaQuery.of(context).size.width - 70,
                          child: DropdownButton(
                            focusColor: Colors.red,
                            icon: Icon(FontAwesomeIcons.angleDown),
                            isExpanded: true,
                            hint: Padding(
                              padding:
                                  const EdgeInsets.symmetric(horizontal: 4),
                              child: Text(
                                curhospitalVal!,
                                style: TextStyle(
                                  fontWeight: FontWeight.w700,
                                  color: Colors.black,
                                  // color: _mainFontColor,
                                  // fontSize: 5 * _deviceBlockSize,
                                ),
                              ),
                            ),
                            isDense: true,
                            items: hospitalVals.map((String value) {
                              return new DropdownMenuItem<String>(
                                value: value,
                                child: Container(
                                  child: Text(
                                    value,
                                    style: TextStyle(
                                      // color: _mainFontColor,
                                      fontSize: 4 * _deviceBlockSize,
                                    ),
                                  ),
                                ),
                              );
                            }).toList(),
                            onChanged: (val) {
                              setState(() {
                                curhospitalVal = val;
                              });
                            },
                          ),
                        ),
                      ],
                    ),
                    SizedBox(height: 40),
                    Row(
                      children: <Widget>[
                        InkWell(
                          onTap: () => _register(),
                          child: Container(
                              width: 40 * _deviceBlockSize,
                              padding: EdgeInsets.symmetric(
                                horizontal: 5 * _deviceBlockSize,
                                vertical: 5,
                              ),
                              // margin:
                              //     EdgeInsets.symmetric(horizontal: 35, vertical: 15),
                              decoration: BoxDecoration(
                                gradient: LinearGradient(
                                  colors: [Colors.blue, Colors.green],
                                ),
                                borderRadius: BorderRadius.circular(7),
                              ),
                              child: Row(
                                mainAxisSize: MainAxisSize.min,
                                children: <Widget>[
                                  Spacer(),
                                  Icon(
                                    Icons.add,
                                    color: Colors.white,
                                  ),
                                  Text(
                                    'register',
                                    style: TextStyle(color: Colors.white),
                                  ),
                                  Spacer()
                                ],
                              )
                              // TextButton.icon(
                              //   padding: EdgeInsets.all(0),
                              //   onPressed: () {
                              //     _register();
                              //   },
                              //   icon: Icon(Icons.exit_to_app,
                              //       color: Colors.white, size: 17),
                              //   label: Text('register',
                              //       style: TextStyle(color: Colors.white)),
                              // ),
                              ),
                        ),
                        Spacer(),
                        InkWell(
                          onTap: () {
                            Navigator.of(context).pop();
                          },
                          child: Container(
                            width: 40 * _deviceBlockSize,
                            padding: EdgeInsets.symmetric(
                              horizontal: 5 * _deviceBlockSize,
                              vertical: 5,
                            ),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(5),
                              border: Border.all(
                                color: Colors.black,
                              ),
                            ),
                            child: Row(
                              children: <Widget>[
                                Spacer(),
                                Icon(
                                  Icons.exit_to_app,
                                  // size: 6 * _pixelRatio,
                                ),
                                Text(
                                  'Login',
                                  style: TextStyle(
                                      // fontSize: 5.5,
                                      ),
                                ),
                                Spacer(),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
      ),
    );
  }
}