import 'package:flutter/material.dart';
import 'package:pinput/pinput.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/default_app_bar.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),
        border: Border.all(color: Colors.transparent),
      ),
    );
    return Scaffold(
      backgroundColor: AppColor.neutral100,
      appBar: DefaultAppBar(title: context.translation.askOtpFromRequester),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            12.height,
            SizedBox(
              width: double.infinity,
              child: Padding(
                padding: EdgeInsets.only(left: 16.toScreenWidth, bottom: 16.toScreenHeight, top: 12.toScreenHeight),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    context.translation.verify.heading5(context),
                    12.height,
                    context.translation.otpSentToNumber.bodyText(context),
                    Padding(
                      padding: EdgeInsets.symmetric(
                        vertical: 50.toScreenHeight,
                      ),
                      child: Center(
                        child: Pinput(
                          length: 4,
                          defaultPinTheme: defaultPinTheme,
                          focusedPinTheme: defaultPinTheme.copyWith(
                            decoration: defaultPinTheme.decoration?.copyWith(
                              border: Border.all(color: AppColor.neutral100),
                            ),
                          ),
                          onCompleted: (pin) => debugPrint(pin),
                        ),
                      ),
                    ),
                    Row(
                      children: [
                        context.translation.resendIn.bodyText(context),
                        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.bodyText(context).custom(
                                  color: context.isDark ? AppColor.neutral10 : AppColor.neutral20,
                                ),
                              ],
                            );
                          },
                        ),
                        7.width,
                        InkWell(
                          onTap: (){
                            //other method check..
                          },
                          child: Text(context.translation.resend,style: const TextStyle(
                            color: AppColor.primary10,
                            decoration: TextDecoration.underline,
                          ),),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ).toShadowContainer(context).paddingOnly(start: 16, end: 16),
            Padding(
              padding: EdgeInsets.only(left: 17.toScreenWidth, top: 24.toScreenHeight),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  context.translation.havingTroubleReceivingOtp.heading6(context),
                  3.height,
                  InkWell(
                    onTap: (){
                      //other method check..
                    },
                    child: Text(context.translation.checkOutOtherMethods,style: const TextStyle(
                      color: AppColor.primary10,
                      decoration: TextDecoration.underline,
                    ),),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}