import 'package:cims_apps/application/assets/path_assets.dart';
import 'package:cims_apps/application/component/custom_app_bar/custom_app_bar.dart';
import 'package:cims_apps/application/component/image/image_view.dart';
import 'package:cims_apps/application/component/set_pin_view/set_pin_viewmodel.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_success_view.dart';
import 'package:flutter/material.dart';
import 'package:pinput/pinput.dart';
import 'package:provider/provider.dart';

class SetPinView extends StatelessWidget {
  final String currentPin;
  final void Function(BuildContext context, String pin) submitPin;

  const SetPinView({
    Key? key,
    required this.currentPin,
    required this.submitPin,
  }) : super(key: key);

  Widget _stepItem({bool isCurrentStep = false, bool isDone = false}) {
    return Container(
      margin:
          const EdgeInsets.only(right: 4.0, left: 4.0, top: 16.0, bottom: 40.0),
      height: 6,
      width: SizeConfig.width * .08,
      decoration: BoxDecoration(
        color: isCurrentStep || isDone
            ? ColorPalette.primary
            : ColorPalette.greyBorderNeutrals,
        borderRadius: BorderRadius.circular(50),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context).textTheme;
    final pinInputController = TextEditingController();
    const pinInputLength = 6;
    const defaultPinTheme = PinTheme(
      margin: EdgeInsets.symmetric(horizontal: 4.0, vertical: 16.0),
      textStyle: TextStyle(
        fontSize: 22,
        color: Colors.black,
        fontWeight: FontWeight.w600,
      ),
      decoration: BoxDecoration(),
    );

    final pInputFocusNode = FocusNode();

    final focusedPinTheme = defaultPinTheme.copyWith(
      decoration: defaultPinTheme.decoration?.copyWith(),
    );

    final submittedPinTheme = defaultPinTheme.copyWith(
      decoration: defaultPinTheme.decoration?.copyWith(),
    );
    final followingPinTheme = defaultPinTheme.copyWith(
      width: 13,
      height: 13,
      textStyle: const TextStyle(
        fontSize: 16,
        color: Color.fromRGBO(30, 60, 87, 1),
        fontWeight: FontWeight.w600,
      ),
      decoration: defaultPinTheme.decoration?.copyWith(
        color: ColorPalette.white,
        border: Border.all(color: ColorPalette.slate300),
        borderRadius: BorderRadius.circular(100),
      ),
    );
    return ChangeNotifierProvider(
        create: (context) => SetPinViewModel(),
        builder: (context, child) {
          return Scaffold(
            appBar: CustomAppBar(
                height: SizeConfig.height * .1, title: 'Registration'),
            body: SingleChildScrollView(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: Consumer<SetPinViewModel>(
                  builder: (context, provider, child) {
                return Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Row(
                      children: List.generate(
                        9,
                        (index) => _stepItem(isCurrentStep: true, isDone: true),
                      ),
                    ),
                    ImageView(
                      image: PathAssets.iconLock,
                      width: SizeConfig.width * .15,
                    ),
                    Text(
                      !provider.isPinCompleted
                          ? 'Set your PIN'
                          : 'Confirm your PIN',
                      style: textTheme.headlineLarge,
                    ),
                    Pinput(
                      onCompleted: (pin) {
                        if (!provider.isPinCompleted) {
                          provider.changePin();
                          pinInputController.clear();
                        } else {
                          routePush(context,
                              routeType: RouteType.pushReplace,
                              page: const RegistrationSuccessView());
                        }
                      },
                      keyboardType: TextInputType.number,
                      obscureText: true,
                      autofocus: true,
                      isCursorAnimationEnabled: false,
                      length: pinInputLength,
                      controller: pinInputController,
                      defaultPinTheme: defaultPinTheme,
                      focusNode: pInputFocusNode,
                      focusedPinTheme: focusedPinTheme,
                      submittedPinTheme: submittedPinTheme,
                      followingPinTheme: followingPinTheme,
                    ),
                  ],
                );
              }),
            ),
          );
        });
  }
}
