import 'package:elektronika/app/pages/auth/otp/controller.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:pin_code_fields/pin_code_fields.dart';

import '../../../app.dart';

class OTPPageNew extends StatelessWidget {
  final Map<String, dynamic> params;

  OTPPageNew({
    Key? key,
    required this.params,
  }) : super(key: key);

  final VisibilityController vc = Get.put(VisibilityController());

  @override
  Widget build(BuildContext context) {
    return GetX<OTPController>(
      init: OTPController(phone: params['phone']),
      builder: (oc) => Scaffold(
        appBar: AppBar(
          leading: IconButton(
            splashColor: Theme.of(context).splashColor,
            splashRadius: 20.h,
            onPressed: () => Navigator.of(context).pop(),
            icon: Icon(
              Icons.arrow_back,
              color: ThemeColor.black,
              size: 26.h,
            ),
          ),
        ),
        body: SingleChildScrollView(
          child: ConstrainedBox(
            constraints: BoxConstraints(
              minWidth: 1.sw,
              minHeight: 1.sh,
            ),
            child: IntrinsicHeight(
              child: Container(
                padding: EdgeInsets.only(left: 30.w, right: 30.w, top: 20.h),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // Text(
                    //   'verification'.tr,
                    //   style: new TextStyle(
                    //     color: ThemeColor.mainColor,
                    //     fontSize: 32.sp,
                    //     fontWeight: FontWeight.w700,
                    //   ),
                    // ),

                    Center(
                      child: Icon(
                        Icons.sms,
                        color: ThemeColor.mainColor.withOpacity(0.90),
                        size: 50.sp,
                      ),
                    ),
                    SizedBox(height: 30.h),
                    RichText(
                      // overflow: TextOverflow.ellipsis,
                      text: TextSpan(
                        text: 'enter_sms_code'.tr + '\n',
                        style: new TextStyle(fontWeight: FontWeight.w500, fontSize: 16.sp, color: ThemeColor.color717278),
                        children: <TextSpan>[
                          TextSpan(
                            text: '+993 ${params['phone']}',
                            style: TextStyle(fontWeight: FontWeight.normal, fontSize: 16.sp, color: Colors.black),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(height: 30.h),
                    PinCodeTextField(
                      onChanged: (String value) => oc.onOTPChange(value),
                      length: 4,
                      appContext: context,
                      cursorColor: Colors.black,
                      animationDuration: Duration(milliseconds: 300),
                      keyboardType: TextInputType.number,
                      pinTheme: PinTheme(
                        shape: PinCodeFieldShape.box,
                        borderRadius: BorderRadius.circular(8),
                        fieldHeight: 50.h,
                        fieldWidth: 50.w,
                        activeFillColor: Colors.white,
                        disabledColor: ThemeColor.grey.withOpacity(0.30),
                        activeColor: ThemeColor.grey.withOpacity(0.30),
                        inactiveColor: ThemeColor.grey.withOpacity(0.30),
                        selectedColor: ThemeColor.grey.withOpacity(0.30),
                      ),
                      animationType: AnimationType.fade,
                    ),

                    oc.isValidOtp.value
                        ? SizedBox.shrink()
                        : Container(
                            width: double.infinity,
                            padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
                            margin: const EdgeInsets.only(bottom: 16),
                            decoration: new BoxDecoration(
                              color: HexColor('#FF0800').withOpacity(0.10),
                              borderRadius: BorderRadius.circular(8),
                            ),
                            child: Text(
                              'incorrect_code'.tr,
                              textAlign: TextAlign.center,
                            ),
                          ),

                    Form(
                      key: oc.formKey,
                      child: Column(
                        children: [
                          MyTextFormField(
                            controller: oc.passwordCtrl,
                            label: 'enter_password'.tr,
                            suffix: PasswordVisibilityWidget(),
                            obscureText: vc.obscureText.value,
                            isPassword: true,
                          ),
                        ],
                      ),
                    ),

                    SizedBox(height: 30.h),
                    oc.isLoading.value
                        ? CustomLoader()
                        : ColoredButton(
                            title: 'confirm'.tr,
                            callback: oc.onConfirmButtonTapped,
                            btnColor: ThemeColor.mainColor,
                          ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
