import '../../models/user_model.dart';
import '../../providers/auth_provider.dart';
import 'package:provider/provider.dart';

import '../../routes.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:hexcolor/hexcolor.dart';



class LoginForm extends StatelessWidget {
  LoginForm({
    Key key,
  }) : super(key: key);
  
  final loginFormKey = GlobalKey<FormState>();
  var userInfo = UserModel(
    UserID: '',
    Password: '',
    ProjectID: 15,
    LanguageID: 2,
    IPAdress: "11.11.11.11",
    VersionID: 1.2,
    Channel: 9,
    SessionID: "i1UJwCTSqt"
  );
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (ctx, constraints) {
      var smallScreenSize = 660;
      bool isSmallScreen = constraints.maxWidth <= smallScreenSize;
      return Form(
        key: loginFormKey,
              child: Container(
          width: constraints.maxWidth * 0.9,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              SizedBox(
                height: 20,
              ),
              TextFormField(
                decoration: InputDecoration(
                    prefixIcon: Image.asset('assets/images/user_id_icon.png'),
                    hintText: 'Enter ID',
                    hintStyle: TextStyle(
                        fontSize:
                            isSmallScreen ? 14 : constraints.maxWidth * 0.024),
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(20)),
                      borderSide: BorderSide(color: Hexcolor('#CCCCCC')),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(10.0)),
                      borderSide:
                          BorderSide(color: Theme.of(context).primaryColor),
                    )
                    //BorderRadius.all(Radius.circular(20));
                    ),
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Please enter some text';
                  }
                  return null;
                },
                onSaved: (value){
                  userInfo.UserID = value;
                },
              ),
              SizedBox(
                height: 20,
              ),
              TextFormField(
                obscureText: true,
                decoration: InputDecoration(
                    prefixIcon: Image.asset('assets/images/password_icon.png'),
                    hintText: 'Enter Password',
                    hintStyle: TextStyle(
                        fontSize:
                            isSmallScreen ? 14 : constraints.maxWidth * 0.024),
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(20)),
                      borderSide: BorderSide(color: Hexcolor('#CCCCCC')),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(10.0)),
                      borderSide:
                          BorderSide(color: Theme.of(context).primaryColor),
                    )
                    //BorderRadius.all(Radius.circular(20));
                    ),
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Please enter some text';
                  }
                  return null;
                },
                onSaved: (value){
                  userInfo.Password = value;
                }
              ),
              SizedBox(
                height: 20,
              ),
              TextFormField(
                decoration: InputDecoration(
                    prefixIcon: Image.asset('assets/images/hospital_icon.png'),
                    hintText: 'Select Project',
                    hintStyle: TextStyle(
                        fontSize:
                            isSmallScreen ? 14 : constraints.maxWidth * 0.024),
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(20)),
                      borderSide: BorderSide(color: Hexcolor('#CCCCCC')),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(10.0)),
                      borderSide:
                          BorderSide(color: Theme.of(context).primaryColor),
                    )
                    //BorderRadius.all(Radius.circular(20));
                    ),
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Please enter some text';
                  }
                  return null;
                },
              ),
              SizedBox(
                height: 20,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Container(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        Checkbox(
                            value: true,
                            activeColor: Theme.of(context).primaryColor,
                            onChanged: (bool newValue) {}),
                        Text("Remember me",
                            style: TextStyle(
                                fontSize: isSmallScreen
                                    ? 18
                                    : constraints.maxWidth * 0.018)),
                      ],
                    ),
                  ),
                  RaisedButton(
                    onPressed: () {
                      login(context);
                    },
                    textColor: Colors.white,
                    elevation: 0.0,
                    padding: const EdgeInsets.all(0.0),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10),
                        side: BorderSide(width: 0.5, color: Hexcolor('#CCCCCC'))),
                    child: Container(
                      padding: const EdgeInsets.all(10.0),
                      height: 50,
                      width: 140,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Text('LOG IN',
                              style: TextStyle(
                                  fontSize: isSmallScreen
                                      ? 20
                                      : constraints.maxWidth * 0.020)),
                          Image.asset('assets/images/login_btn_arrow_icon.png')
                        ],
                      ),
                    ),
                  )
                ],
              ),
            ],
          ),
        ),
      );
    });
  }

  login(context) {
    AuthProvider authProv = Provider.of<AuthProvider>(context);
    loginFormKey.currentState.validate();
    loginFormKey.currentState.save();
    // if login succses
    // set imei in shared preferanced

    authProv.login(userInfo).then((res) {
      print(res['MobileNumber']);
      Navigator.of(context).pushNamed(HOME);
    }).catchError((err) {
      print('$err');
    });
  }
}