import 'package:fcs/helpers/theme.dart';
import 'package:fcs/pages/widgets/local_app_bar.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 {
  const PinLoginPage({super.key});

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

class _PinLoginPageState extends State<PinLoginPage> {
  bool _isLoading = false;
  late String pin;
  late bool allNumberEntered;
  @override
  void initState() {
    pin = "";
    allNumberEntered = false;
    super.initState();
  }

  Widget build(BuildContext context) {
    return LocalProgress(
      inAsyncCall: _isLoading,
      child: new Scaffold(
          appBar: LocalAppBar(
            backgroundColor: null,
            arrowColor: Colors.black,
          ),
          body: _buildLogin(context)),
    );
  }

  Widget _buildLogin(BuildContext context) {
    return ListView(
        padding: EdgeInsets.only(top: 20, left: 15, right: 15, bottom: 20),
        children: <Widget>[
          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.grey,
          ),
          fcsIdBox,
          Padding(
              padding: EdgeInsets.only(top: 20, bottom: 20),
              child: LocalText(
                context,
                "welcome.pinlogin.pin",
                color: Colors.grey,
              )),
          Container(
            child: PinInputTextField(
              pinLength: 6,
              decoration: BoxLooseDecoration(
                  strokeColorBuilder: PinListenColorBuilder(
                      primaryColor, Colors.grey.shade400)),
              textInputAction: TextInputAction.done,
              autoFocus: true,
              onChanged: _pinChange,
            ),
          ),
          loginBtn,
        ]);
  }

  final pinLoginLogo = Container(
    width: 70,
    height: 70,
    child: FittedBox(
      child: Image.asset(
        "assets/logo.jpg",
      ),
      fit: BoxFit.fitHeight,
    ),
  );
  final fcsIdBox = Column(
    children: <Widget>[
      TextFormField(
        // controller: controller,
        style: textStyle,
        cursorColor: primaryColor,
        keyboardType: TextInputType.text,
        decoration: new InputDecoration(
          contentPadding: EdgeInsets.all(0),
          labelStyle: newLabelStyle(color: Colors.black54, fontSize: 17),
          enabledBorder: 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)),
        ),
      ),
    ],
  );
  final loginBtn = Padding(
    padding: EdgeInsets.only(top: 30),
    child: LocalButton(
      textKey: "welcome.pinlogin",
      callBack: () {},
    ),
  );

  _pinChange(pin) {
    setState(() {
      this.pin = pin;
      this.allNumberEntered = this.pin.length == 6;
    });
  }
}