import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:go_router/go_router.dart';
import 'package:oc_front/core/services/auth.service.dart';
import 'package:oc_front/main.dart';

class LoginWidget extends StatefulWidget {
  LoginWidget ({ Key? key }): super(key: key);
  @override LoginWidgetState createState() => LoginWidgetState();
}
class LoginWidgetState extends State<LoginWidget> {
  TextEditingController usernameCtrl = TextEditingController();
  TextEditingController passwordCtrl = TextEditingController();

  String? error;
  bool loading = false;

  @override Widget build(BuildContext context) {
    return Padding(padding: const EdgeInsets.all(50), child: Column(mainAxisSize: MainAxisSize.min, children: [
      const Center(child: Icon(Icons.person_search, size: 150, color: Colors.grey,)),
      Center(child: Padding( padding: const EdgeInsets.only(top: 5, bottom: 20), 
        child: Text("WELCOME ON OPENCLOUD", style: TextStyle(fontSize: 25, fontWeight: FontWeight.w600,
        color: lightColor ) ))),
      Container( margin: const EdgeInsets.only(bottom: 10), child: Center(child: Row( mainAxisAlignment: MainAxisAlignment.center,
        children: [ 
        Container( 
          width: getMainWidth(context) / 3,
          alignment : Alignment.center,  
          child: TextField(
          controller: usernameCtrl,
          onChanged: (v) => setState(() {}),
          decoration: InputDecoration(
            enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: midColor), borderRadius: BorderRadius.zero),
            border: OutlineInputBorder(borderSide: BorderSide(color: midColor), borderRadius: BorderRadius.zero),
            focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: midColor), borderRadius: BorderRadius.zero),
            hintText: "username...",
            contentPadding: const EdgeInsets.symmetric(horizontal: 20),
            fillColor: midColor,
            filled: true,
            hintStyle: const TextStyle(fontSize: 12.5, color: Colors.grey)),
          style: const TextStyle(fontSize: 12.5, color: Colors.black)),),
        Container(width: 50, height: 50, color: Colors.black, child: const Icon(Icons.person, color: Colors.white))
      ]))),
      Center(child: Row( mainAxisAlignment: MainAxisAlignment.center,
        children: [ 
        Container( 
          width: getMainWidth(context) / 3,
          alignment : Alignment.center,  
          child: TextField(
          controller: passwordCtrl,
          obscureText: true,
          onChanged: (value) {
            setState(() {});
          },
          decoration: InputDecoration(
            focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: midColor), borderRadius: BorderRadius.zero),
            enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: midColor), borderRadius: BorderRadius.zero),
            border: OutlineInputBorder(borderSide: BorderSide(color: midColor), borderRadius: BorderRadius.zero),
            hintText: "password...",
            contentPadding: const EdgeInsets.symmetric(horizontal: 20),
            fillColor: midColor,
            filled: true,
            hintStyle: const TextStyle(fontSize: 12.5, color: Colors.grey)),
          style: const TextStyle(fontSize: 12.5, color: Colors.black)),),
        Container(width: 50, height: 50, color: Colors.black, child: const Icon(Icons.password, color: Colors.white))
      ])),
      Column( children: [
        Center( child: Padding( padding: EdgeInsets.only(bottom: 10, top: error == null ? 27 : 10), child: 
          error == null ? Container() : Text(error ?? "", style: TextStyle(color: redColor, fontSize: 12.5)))),
        Row( mainAxisAlignment: MainAxisAlignment.center, children: [
          Padding( padding: const EdgeInsets.only(right: 10, bottom: 30), child: 
            InkWell(onTap: () async { 
              if (usernameCtrl.text == "" || passwordCtrl.text == "") { return; }
              error = null;
              setState(() {
                loading = true;
              });
              await AuthService.login(usernameCtrl.text, passwordCtrl.text).catchError( (e) {
                setState(() {
                  loading = false;
                  error = "Invalid username or password";
                });
              });
              
              if (error == null) {
                // ignore: use_build_context_synchronously
                setState(() {
                  loading = true;
                });
                context.pop();
              }
            },
            mouseCursor: SystemMouseCursors.click,
            child: Container(
              width: getMainWidth(context) / 3,
              padding: const EdgeInsets.symmetric(vertical: 20),
              color: usernameCtrl.text == "" || passwordCtrl.text == "" ? Colors.grey : lightColor, 
          child: Center( child: loading ? SpinKitWave(color: Colors.white, size: 20) : Text("LOGIN", style: TextStyle(
            color: usernameCtrl.text == "" || passwordCtrl.text == "" ? midColor :Colors.white, 
            fontSize: 15) ))))),
        ])
      ]),
    ],));
  }
}