import 'package:fcs/helpers/theme.dart';
import 'package:fcs/pages/main/util.dart';
import 'package:fcs/pages/widgets/local_button.dart';
import 'package:fcs/pages/widgets/local_text.dart';
import 'package:fcs/pages/widgets/progress.dart';
import 'package:flutter/material.dart';
import 'package:pin_input_text_field/pin_input_text_field.dart';

class PinLoginPage extends StatefulWidget {
  //final User user;
  const PinLoginPage({super.key});

  @override
  State<PinLoginPage> createState() => _PinLoginPageState();
}

class _PinLoginPageState extends State<PinLoginPage> {
  bool _isLoading = false;
  String pin = "";
  String prefixText = "FCS-";
  //late User _user;
  final _formKey = GlobalKey<FormState>();
  TextEditingController _fcsIdCtl = new TextEditingController();

  Widget build(BuildContext context) {
    final fcsIdBox = TextFormField(
      controller: _fcsIdCtl,
      onChanged: (value) {
        _fcsIdCtl.value = TextEditingValue(
          text: value.toUpperCase(),
          selection: _fcsIdCtl.selection,
        );
      },
      autofocus: true,
      autovalidateMode: AutovalidateMode.onUserInteraction,
      validator: (value) {
        if (value == null || value.isEmpty) {
          return 'Please enter FCS ID';
        }
        return null;
      },
      style: TextStyle(
          fontSize: 15, color: Colors.black87, fontWeight: FontWeight.w500),
      cursorColor: primaryColor,
      keyboardType: TextInputType.text,
      decoration: new InputDecoration(
        prefixIcon: Text(
          prefixText,
          style: TextStyle(color: Colors.black),
        ),
         prefixIconConstraints: BoxConstraints(minWidth: 0, minHeight: 0),
        contentPadding: EdgeInsets.all(0),
        labelStyle: newLabelStyle(color: Colors.black54, fontSize: 17),
        enabledBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: primaryColor, width: 1.0)),
        border: UnderlineInputBorder(
            borderSide: BorderSide(color: primaryColor, width: 1.0)),
        focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: primaryColor, width: 1.0)),
        disabledBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: primaryColor, width: 1.0)),
        errorStyle: TextStyle(color: dangerColor),
      ),
    );

    final pinLoginLogo = Container(
      width: 70,
      height: 70,
      child: FittedBox(
        child: Image.asset(
          "assets/logo.jpg",
        ),
        fit: BoxFit.fitHeight,
      ),
    );
    final pinInputBox = FormField(
        validator: (value) {
          if (pin == "") {
            return "Please enter PIN";
          }
          if (pin.length < 6) {
            return "PIN must be 6 digit";
          }
          return null;
        },
        autovalidateMode: AutovalidateMode.onUserInteraction,
        builder: (state) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              PinInputTextField(
                cursor: Cursor(
                    color: primaryColor, enabled: true, width: 2, height: 23),
                pinLength: 6,
                decoration: BoxLooseDecoration(
                    strokeColorBuilder: PinListenColorBuilder(
                        primaryColor, Colors.grey.shade400),
                    errorTextStyle: TextStyle(color: dangerColor)),
                textInputAction: TextInputAction.done,
                autoFocus: false,
                onChanged: _pinChange,
              ),
              Padding(
                padding: const EdgeInsets.only(top: 8),
                child: pin == "" || pin.length < 6
                    ? SizedBox(
                        height: 20,
                        child: Text(state.errorText ?? "",
                            style: TextStyle(color: dangerColor, fontSize: 12)),
                      )
                    : const SizedBox(height: 20),
              )
            ],
          );
        });

    final loginBtn = Padding(
      padding: EdgeInsets.only(top: 30),
      child: LocalButton(
        textKey: "welcome.pinlogin",
        callBack: _login,
      ),
    );
    return LocalProgress(
      inAsyncCall: _isLoading,
      child: new Scaffold(
          body: Form(
        key: _formKey,
        child: ListView(
          padding: EdgeInsets.only(top: 80, left: 15, right: 15, bottom: 20),
          children: [
            pinLoginLogo,
            Padding(
              padding: EdgeInsets.only(top: 20, bottom: 20),
              child: Center(
                child: LocalText(context, "welcome.pinlogin",
                    color: Colors.black, fontSize: 18),
              ),
            ),
            LocalText(
              context,
              "welcome.pinlogin.fcsid",
              color: Colors.black54,
              fontSize: 15,
            ),
            fcsIdBox,
            Padding(
                padding: EdgeInsets.only(top: 25, bottom: 20),
                child: LocalText(
                  context,
                  "welcome.pinlogin.pin",
                  color: Colors.black54,
                  fontSize: 15,
                )),
            pinInputBox,
            loginBtn,
          ],
        ),
      )),
    );
  }

  _pinChange(pin) {
    setState(() {
      this.pin = pin;
    });
  }

  _login() async {
    if (!_formKey.currentState!.validate()) {
      return;
    }
    String fcsId = "$prefixText${_fcsIdCtl.text}";
    print(fcsId);

    setState(() {
      _isLoading = true;
    });

    try {
      Navigator.pop(context, true);
    } catch (e) {
      showMsgDialog(context, "Error", e.toString());
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }
}