import 'package:cims_apps/application/component/button/button_view.dart';
import 'package:cims_apps/application/component/otp/otp_viewmodel.dart';
import 'package:cims_apps/application/component/text_caption/text_caption.dart';
import 'package:cims_apps/application/theme/color_palette.dart';
import 'package:cims_apps/core/route/route.dart';
import 'package:cims_apps/core/utils/size_config.dart';
import 'package:cims_apps/features/auth/registration/view/registration_password_view.dart';
import 'package:flutter/material.dart';
import 'package:pinput/pinput.dart';
import 'package:provider/provider.dart';

class OtpView extends StatelessWidget {
  final String title;
  final String? contentTitle, contentSubtitle;
  const OtpView({
    Key? key,
    required this.title,
    this.contentTitle,
    this.contentSubtitle,
  }) : super(key: key);

  Widget _otpContent(BuildContext context, OtpViewModel provider) {
    return Form(
        key: provider.formKey,
        child: Column(
          children: [
            Pinput(
              length: 4,
              controller: provider.ctrlPin,
              focusNode: provider.focusNode,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              validator: (value) {
                if (value!.isEmpty) {
                  return 'Pin must be complete';
                }
                return null;
              },
              defaultPinTheme: PinTheme(
                textStyle: const TextStyle(
                  color: ColorPalette.slate800,
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
                width: SizeConfig.width * .19,
                height: SizeConfig.height * .08,
                decoration: BoxDecoration(
                  border: Border.all(color: const Color(0xFFE2E8F0)),
                  borderRadius: BorderRadius.circular(8),
                ),
              ),
              errorPinTheme: PinTheme(
                textStyle: const TextStyle(
                  color: ColorPalette.slate800,
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
                width: SizeConfig.width * .19,
                height: SizeConfig.height * .08,
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.redAccent),
                  borderRadius: BorderRadius.circular(8),
                ),
              ),
            ),
            ButtonView(
              name: 'Verify',
              // disabled: !provider.buttonIsActive,
              // backgroundColor: ColorPalette.grey,
              onPressed: () {
                if (provider.formKey.currentState!.validate()) {
                  final pin = provider.ctrlPin.text;
                  provider.validateOtp(pin).then((value) {
                    if (value) {
                      routePush(context,
                          page: const RegistrationPasswordView(),
                          routeType: RouteType.pushReplace);
                    } else {
                      provider.ctrlPin.clear();
                    }
                  });
                }
              },
            ),
          ],
        ));
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
        create: (context) => OtpViewModel(),
        builder: (context, child) {
          return Scaffold(
            appBar: AppBar(
              title: Text(title),
            ),
            body: Container(
              padding: const EdgeInsets.all(16.0),
              child:
                  Consumer<OtpViewModel>(builder: (context, provider, child) {
                return Column(
                  children: [
                    TextCaption(
                      title: contentTitle ?? '',
                      subtitle: contentSubtitle ?? '',
                    ),
                    _otpContent(context, provider),
                    TextButton(
                        onPressed: () {},
                        child: const Text(
                          'Resend Code',
                          style: TextStyle(
                            fontWeight: FontWeight.w700,
                          ),
                        ))
                  ],
                );
              }),
            ),
          );
        });
  }
}