import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:tangheem/classes/colors.dart';
import 'package:tangheem/classes/utils.dart';
import 'package:tangheem/widgets/otp_widget.dart';

class OTPDialog extends StatefulWidget {
  final Function(int) onOTP;

  OTPDialog({Key key, this.onOTP}) : super(key: key);

  @override
  _OTPDialogState createState() {
    return _OTPDialogState();
  }
}

class _OTPDialogState extends State<OTPDialog> {
  final TextEditingController _pinPutController = TextEditingController();

  bool hasError = false;
  String errorMessage;
  String otpMessage = "";

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Dialog(
      insetPadding: EdgeInsets.symmetric(horizontal: 60.0, vertical: 24.0),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
      ),
      elevation: 0,
      backgroundColor: Colors.transparent,
      child: Container(
        width: double.infinity,
        decoration: BoxDecoration(
          color: ColorConsts.primaryBlue,
          borderRadius: BorderRadius.circular(16),
        ),
        padding: EdgeInsets.symmetric(vertical: 32, horizontal: 16),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              "الرجاء إدخال الرقم المرسل إلى جوالك",
              textAlign: TextAlign.center,
              style: TextStyle(color: Colors.white),
            ),
            Container(
              margin: EdgeInsets.only(top: 8, bottom: 8),
              padding: EdgeInsets.all(6),
              decoration: BoxDecoration(
                border: Border.all(width: 1, color: Colors.white),
              ),
              child: OTPWidget(
                autoFocus: true,
                controller: _pinPutController,
                defaultBorderColor: Colors.transparent,
                maxLength: 4,
                hasError: hasError,
                onTextChanged: (text) {
                  setState(() {
                    hasError = false;
                  });
                },
                pinBoxColor: ColorConsts.secondaryWhite.withOpacity(0.2),
                onDone: (text) => otpMessage = text,
                textBorderColor: Colors.transparent,
                pinBoxWidth: 40,
                pinBoxHeight: 40,
                pinTextStyle: TextStyle(fontSize: 20.0, color: Colors.white),
                pinTextAnimatedSwitcherTransition: ProvidedPinBoxTextAnimation.scalingTransition,
                pinTextAnimatedSwitcherDuration: Duration(milliseconds: 300),
                keyboardType: TextInputType.number,
              ),
            ),
            SizedBox(
              width: double.infinity,
              height: 40,
              child: TextButton(
                onPressed: () {
                  if (otpMessage.length < 4) {
                    Utils.showToast("الرقم الذي قمت بإدخاله غير صحيح");
                    return;
                  }
                  widget.onOTP(int.parse(otpMessage));
                },
                style: TextButton.styleFrom(
                  primary: Colors.white,
                  padding: EdgeInsets.all(2),
                  backgroundColor: ColorConsts.secondaryPink,
                  textStyle: TextStyle(fontSize: 14, fontFamily: "DroidKufi"),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(6.0),
                  ),
                ),
                child: Text("تحقق من الرقم"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
