import 'package:flutter/material.dart';
import 'package:pinput/pinput.dart';
import 'package:provider/provider.dart';
import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/text_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart';
import 'package:test_sa/new_views/app_style/app_color.dart';
import 'package:test_sa/new_views/common_widgets/app_lazy_loading.dart';
import 'package:test_sa/new_views/common_widgets/default_app_bar.dart';
import 'package:test_sa/service_request_latest/request_detail_provider.dart';

class VerifyOtpView extends StatelessWidget {
  const VerifyOtpView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final defaultPinTheme = PinTheme(
      width: 51.toScreenWidth,
      height: 63.toScreenHeight,
      textStyle: const TextStyle(
        fontSize: 22,
        color: Colors.black,
      ),
      decoration: BoxDecoration(
        color: AppColor.neutral100,
        borderRadius: BorderRadius.circular(10),
      ),
    );
    return Scaffold(
      backgroundColor: AppColor.neutral100,
      appBar: DefaultAppBar(title: context.translation.askOtpFromRequester),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                context.translation.verify.heading6(context).custom(color: AppColor.black10),
                7.height,
                context.translation.otpSentToNumber.bodyText2(context).custom(color: AppColor.neutral120),
                Center(
                  child: Pinput(
                    length: 4,
                    defaultPinTheme: defaultPinTheme,
                    focusedPinTheme: defaultPinTheme.copyWith(
                      decoration: defaultPinTheme.decoration?.copyWith(
                        border: Border.all(color: AppColor.neutral100),
                      ),
                    ),
                    onCompleted: (pin) async {
                      debugPrint('pin i got is $pin');
                      RequestDetailProvider requestDetailProvider = Provider.of<RequestDetailProvider>(context, listen: false);
                      int? status;
                      //TODO add loader..
                       showDialog(context: context, barrierDismissible: false, builder: (context) => const AppLazyLoading());
                      status = await requestDetailProvider.verifyOtp(workOrderId: requestDetailProvider.currentWorkOrder!.data!.requestId!, otpCode: pin);
                      if (status == 200) {
                        await requestDetailProvider.getWorkOrderById(id: requestDetailProvider.currentWorkOrder!.data!.requestId!);
                        await requestDetailProvider.engineerConfirmArrival(
                            workOrderId: requestDetailProvider.currentWorkOrder!.data!.requestId!, verificationTypeId: 3, photoInfo: '', otp: pin, assetNo: '');
                         Navigator.pop(context);
                        requestDetailProvider.startTimer();
                        Navigator.pop(context);
                      }
                      else{
                        Navigator.pop(context);
                      }
                    },
                  ),
                ).paddingOnly(top: 24, bottom: 24),
                Row(
                  children: [
                    context.translation.resendIn.bodyText2(context).custom(color: AppColor.neutral120),
                    7.width,
                    ValueListenableBuilder<String>(
                      //add actual timer value...
                      valueListenable: ValueNotifier("0:00"),
                      builder: (context, value, _) {
                        return Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            value.bodyText2(context).custom(
                                  color: context.isDark ? AppColor.neutral10 : AppColor.neutral120,
                                ),
                          ],
                        );
                      },
                    ),
                    7.width,
                    InkWell(
                      onTap: () {},
                      child: Text(
                        context.translation.resend,
                        style: TextStyle(
                          color: AppColor.primary10,
                          fontWeight: FontWeight.w500,
                          fontSize: 12.toScreenWidth,
                          decorationColor: AppColor.primary10,
                          decoration: TextDecoration.underline,
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ).toShadowContainer(context),
            24.height,
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                context.translation.havingTroubleReceivingOtp.heading6(context).custom(color: AppColor.black10),
                3.height,
                InkWell(
                  onTap: () {
                    //other method check..
                  },
                  child: Text(
                    context.translation.checkOutOtherMethods,
                    style: TextStyle(
                      color: AppColor.primary10,
                      fontSize: 16.toScreenWidth,
                      fontWeight: FontWeight.w500,
                      decoration: TextDecoration.underline,
                      decorationColor: AppColor.primary10,
                    ),
                  ),
                ),
              ],
            )
          ],
        ).paddingOnly(start: 16, end: 16, top: 12),
      ),
    );
  }
}