import 'package:flutter/material.dart';
import 'package:pin_input_text_field/pin_input_text_field.dart';
import 'package:provider/provider.dart';

import '../../helpers/theme.dart';
import '../../localization/app_translations.dart';
import '../main/model/language_model.dart';
import '../main/util.dart';
import '../widgets/local_app_bar.dart';
import '../widgets/local_text.dart';
import '../widgets/progress.dart';

class ConfirmRecoveryEmail extends StatefulWidget {
  final String email;
  const ConfirmRecoveryEmail({super.key, required this.email});

  @override
  State<ConfirmRecoveryEmail> createState() => _ConfirmRecoveryEmailState();
}

class _ConfirmRecoveryEmailState extends State<ConfirmRecoveryEmail> {
  bool _isLoading = false;
  late String pin;
  late bool allNumberEntered;

  @override
  void initState() {
    pin = "";
    allNumberEntered = false;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    var isEng = context.watch<LanguageModel>().isEng;

    return LocalProgress(
      inAsyncCall: _isLoading,
      child: Scaffold(
        appBar: const LocalAppBar(
            labelKey: 'profile.comfirm_email.title',
            backgroundColor: Colors.white,
            labelColor: primaryColor,
            arrowColor: primaryColor),
        body: ListView(
          padding: const EdgeInsets.only(left: 15, right: 15, top: 20),
          children: [
            RichText(
              text: TextSpan(children: [
                TextSpan(
                    text: AppTranslations.of(context)!
                        .text("profile.confirm_email.send_to"),
                    style: isEng
                        ? newLabelStyle(
                          fontWeight: FontWeight.normal,
                            color:
                                labelColor,
                            fontSize: 16)
                        : newLabelStyleMM(
                          fontWeight: FontWeight.normal,
                            color:
                                labelColor,
                            fontSize: 16)),
                TextSpan(
                    text: " ${widget.email}",
                    style: const TextStyle(fontSize: 16, color: primaryColor))
              ]),
            ),
            const SizedBox(height: 40),
            LocalText(
              context,
              'profile.confirm_email.insruction',
              fontSize: 16,
              color: labelColor,
              fontWeight: FontWeight.normal,
            ),
            const SizedBox(height: 40),
            LocalText(context, "profile.confirm_email_code",
                color: labelColor, fontSize: 16),
            Container(
              padding: const EdgeInsets.only(top: 10),
              child: PinInputTextField(
                pinLength: 6,
                cursor: Cursor(
                    color: primaryColor, enabled: true, width: 2, height: 23),
                decoration: BoxLooseDecoration(
                    textStyle: TextStyle(
                        color: Theme.of(context).textTheme.labelMedium!.color,
                        fontSize: 20),
                    strokeColorBuilder: const FixedColorBuilder(labelColor)),
                textInputAction: TextInputAction.done,
                autoFocus: true,
                onChanged: _pinChange,
              ),
            ),
            const SizedBox(height: 40),
             Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 30),
                  child: fcsButton(
                    context,
                    getLocalString(context, 'btn.confirm'),
                    callack: allNumberEntered
                        ? () {
                            _confirm();
                          }
                        : null,
                  ),
                )
          ],
        ),
      ),
    );
  }

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

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

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