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

class LoginForm extends StatelessWidget {
  const LoginForm({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {

    
    return LayoutBuilder(builder: (ctx, constraints) {
          var smallScreenSize = 660;
      bool isSmallScreen = constraints.maxWidth<=smallScreenSize;
      return 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;
              },
            ),
            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;
              },
            ),
            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: () {
                    Navigator.of(context).pushNamed(HOME);
                  },
                  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')
                      ],
                    ),
                  ),
                )
              ],
            ),
          ],
        ),
      );
    });
  }
}