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),
                ),
              ),
              onCompleted: (pin) => provider.enableButton(),
              onChanged: (value) {
                if (provider.ctrlPin.length != 4) {
                  provider.enableButton(isActive: false);
                }
              },
            ),
            Container(
              margin: const EdgeInsets.symmetric(vertical: 32.0),
              width: SizeConfig.width,
              height: SizeConfig.height * .07,
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                  elevation: 0,
                  backgroundColor: ColorPalette.primary,
                ),
                onPressed: !provider.buttonIsActive
                    ? null
                    : () {
                        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();
                            }
                          });
                        }
                      },
                child: const Text(
                  'Verify',
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ],
        ));
  }

  @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: () {
                          provider.ctrlPin.clear();
                        },
                        child: const Text(
                          'Resend Code',
                          style: TextStyle(
                            fontWeight: FontWeight.w700,
                          ),
                        ))
                  ],
                );
              }),
            ),
          );
        });
  }
}
