import 'package:fcs/domain/entities/user.dart';
import 'package:fcs/helpers/theme.dart';
import 'package:fcs/pages/widgets/local_app_bar.dart';
import 'package:fcs/pages/widgets/progress.dart';
import 'package:flutter/material.dart';
import 'package:pin_input_text_field/pin_input_text_field.dart';

import '../main/util.dart';
import '../widgets/local_text.dart';

class StaffPinEditor extends StatefulWidget {
  final User staff;
  const StaffPinEditor({required this.staff});
  @override
  _StaffPinEditorState createState() => _StaffPinEditorState();
}

class _StaffPinEditorState extends State<StaffPinEditor> {
  bool _isLoading = false;
  late User _staff;
  bool _enablePinLogin = false;
  String _newPin = "";
  String _confirmPin = "";

  @override
  void initState() {
    _staff = widget.staff;
    _enablePinLogin = _staff.enablePinLogin;
    _newPin = _staff.pinDigit ?? "";
    _confirmPin = _staff.confirmPinDigit ?? "";
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final enablePinBox = Row(
      children: [
        Checkbox(
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
          visualDensity: const VisualDensity(
              horizontal: VisualDensity.minimumDensity,
              vertical: VisualDensity.minimumDensity),
          activeColor: primaryColor,
          side: BorderSide(color: Colors.black38, width: 2),
          value: _enablePinLogin,
          onChanged: (value) {
            setState(() {
              _enablePinLogin = value ?? false;
            });
          },
        ),
        const SizedBox(width: 15),
        LocalText(context, 'staff.enable_pin',
            fontSize: 15, color: Colors.black)
      ],
    );

    final newPinBox = Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        LocalText(context, 'staff.new_pin',
            color: Colors.black54, fontSize: 15),
        const SizedBox(height: 8),
        PinInputTextField(
            cursor: Cursor(
                color: primaryColor, enabled: true, width: 2, height: 30),
            pinLength: 6,
            decoration: BoxLooseDecoration(
                strokeColorBuilder:
                    PinListenColorBuilder(primaryColor, Colors.grey.shade400)),
            textInputAction: TextInputAction.done,
            autoFocus: true,
            onChanged: _newPinChange),
      ],
    );

    final confirmPinBox = Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        LocalText(context, 'staff.confirm_pin',
            color: Colors.black54, fontSize: 15),
        const SizedBox(height: 8),
        PinInputTextField(
            pinLength: 6,
             cursor: Cursor(
                color: primaryColor, enabled: true, width: 2, height: 30),
            decoration: BoxLooseDecoration(
                strokeColorBuilder:
                    PinListenColorBuilder(primaryColor, Colors.grey.shade400)),
            textInputAction: TextInputAction.done,
            autoFocus: false,
            onChanged: _confirmPinChange),
      ],
    );

    final saveButton = Padding(
      padding: const EdgeInsets.symmetric(horizontal: 30),
      child: fcsButton(
        context,
        getLocalString(context, 'btn.save'),
        callack: _save,
      ),
    );

    return LocalProgress(
        inAsyncCall: _isLoading,
        child: Scaffold(
          appBar: LocalAppBar(
              labelKey: "staff.pin.title",
              backgroundColor: Colors.white,
              labelColor: primaryColor,
              arrowColor: primaryColor),
          body: Padding(
            padding: const EdgeInsets.only(left: 15.0, right: 15),
            child: ListView(
              children: <Widget>[
                Column(
                  children: [
                    Text(_staff.name ?? "",
                        style: TextStyle(color: Colors.black, fontSize: 18)),
                    Text(_staff.fcsID ?? "",
                        style: TextStyle(color: Colors.black, fontSize: 15)),
                  ],
                ),
                const SizedBox(height: 20),
                enablePinBox,
                const SizedBox(height: 30),
                newPinBox,
                SizedBox(height: 30),
                confirmPinBox,
                SizedBox(height: 30),
                saveButton,
                SizedBox(height: 30)
              ],
            ),
          ),
        ));
  }

  _newPinChange(pin) {
    setState(() {
      this._newPin = pin;
    });
  }

  _confirmPinChange(pin) {
    setState(() {
      this._confirmPin = pin;
    });
  }

  _save() async {
    if (_newPin == "") {
      showMsgDialog(context, "Error", "Invalid new PIN");
      return;
    }

    if (_newPin.length < 6) {
      showMsgDialog(context, "Error", "New PIN must be 6 digits");
      return;
    }

    if (_confirmPin == "") {
      showMsgDialog(context, "Error", "Invalid confirm PIN");
      return;
    }

    if (_confirmPin.length < 6) {
      showMsgDialog(context, "Error", "Confirm PIN must be 6 digits");
      return;
    }

    if (_confirmPin != _newPin) {
      showMsgDialog(context, "Error", "Those pins didn’t match. Try again.");
      return;
    }

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

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