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/modules/cm_module/cm_detail_provider.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/views/widgets/item_views/info_header_widget.dart';
import 'package:test_sa/views/widgets/item_views/info_text_widget.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: TextStyle(fontSize: 24, color: AppColor.headingTextColor(context)),
      decoration: BoxDecoration(
        color: AppColor.background(context),
        borderRadius: BorderRadius.circular(10),
        border: Border.all(color: AppColor.border2Color(context)),
      ),
    );
    return Scaffold(
      appBar: DefaultAppBar(title: context.translation.askOtpFromRequester),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                InfoHeader16Widget(context.translation.verify),
                6.height,
                InfoTextWidget(label: context.translation.otpSentToNumber, isMsg: true, showEmptyValue: true),
                Center(
                  child: Pinput(
                    length: 4,
                    defaultPinTheme: defaultPinTheme,
                    focusedPinTheme: defaultPinTheme.copyWith(
                      decoration: defaultPinTheme.decoration?.copyWith(
                        border: Border.all(color: AppColor.primary10),
                      ),
                    ),
                    onCompleted: (pin) async {
                      CMDetailProvider requestDetailProvider = Provider.of<CMDetailProvider>(context, listen: false);
                      int? status;
                      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);
                        Navigator.pop(context);
                        requestDetailProvider.startTimer();
                        Navigator.pop(context);
                      } else {
                        Navigator.pop(context);
                      }
                    },
                  ),
                ).paddingOnly(top: 24, bottom: 24),
                Row(
                  children: [
                    InfoTextWidget(label: context.translation.resendIn, isMsg: true, showEmptyValue: true),
                    6.width,
                    ValueListenableBuilder<String>(
                      //add actual timer value...
                      valueListenable: ValueNotifier("0:00"),
                      builder: (context, value, _) {
                        return InfoTextWidget(label: value, isMsg: true, showEmptyValue: true);
                      },
                    ),
                    6.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,
              spacing: 4,
              children: [
                InfoHeader16Widget(context.translation.havingTroubleReceivingOtp),
                InkWell(
                  onTap: () {
                    Navigator.pop(context);
                  },
                  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),
      ),
    );
  }
}
