import 'package:cims_apps/application/assets/path_assets.dart';
import 'package:cims_apps/application/component/button/button_view.dart';
import 'package:cims_apps/application/component/image/image_view.dart';
import 'package:cims_apps/application/component/text_caption/text_caption.dart';
import 'package:cims_apps/application/component/text_form/text_form_view.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/submission_data/submission_parent.dart';
import 'package:cims_apps/features/auth/registration/viewmodel/registration_viewmodel.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class RegistrationPasswordView extends StatelessWidget {
  const RegistrationPasswordView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
        create: (context) => RegistrationViewModel(),
        builder: (context, child) {
          return Scaffold(
            appBar: AppBar(
              title: const Text('Sign Up'),
            ),
            body: SingleChildScrollView(
              padding: const EdgeInsets.all(16.0),
              child: Consumer<RegistrationViewModel>(
                  builder: (context, provider, child) {
                return Form(
                  key: provider.formKey,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const TextCaption(
                        title: 'Create your password',
                        subtitle:
                            'The password you create serves as your login',
                      ),
                      TextFormView(
                        name: 'Password',
                        hintText: 'Input password',
                        ctrl: provider.passwordCtrl,
                        obscureText: !provider.showPassword,
                        validator: (value) {
                          if (value!.isEmpty) {
                            return 'Password must filled';
                          } else {
                            return null;
                          }
                        },
                        suffixIcon: GestureDetector(
                          onTap: () {
                            provider.toggleVisibility();
                          },
                          child: Icon(
                            provider.showPassword
                                ? Icons.visibility_outlined
                                : Icons.visibility_off_outlined,
                            color: ColorPalette.greyDarker,
                          ),
                        ),
                      ),
                      const SizedBox(
                        height: 32.0,
                      ),
                      TextFormView(
                        name: 'Confirm Password',
                        hintText: 'Input password',
                        ctrl: provider.confirmPasswordCtrl,
                        obscureText: !provider.showPasswordConfirm,
                        validator: (value) {
                          if (value!.isEmpty) {
                            return 'Password must filled';
                          } else if (value != provider.passwordCtrl.text) {
                            return 'Password must be same';
                          } else {
                            return null;
                          }
                        },
                        suffixIcon: GestureDetector(
                          onTap: () {
                            provider.toggleVisibilityConfirm();
                          },
                          child: Icon(
                            provider.showPasswordConfirm
                                ? Icons.visibility_outlined
                                : Icons.visibility_off_outlined,
                            color: ColorPalette.greyDarker,
                          ),
                        ),
                      ),
                      ButtonView(
                        name: 'Confirm',
                        onPressed: () {
                          if (provider.formKey.currentState!.validate()) {
                            routePush(context, page: const DialogSuccess());
                          }
                        },
                      )
                    ],
                  ),
                );
              }),
            ),
          );
        });
  }
}

class DialogSuccess extends StatelessWidget {
  const DialogSuccess({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: const EdgeInsets.all(24.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ImageView(
              image: PathAssets.imgSuccessSignup,
              width: SizeConfig.width * .8,
            ),
            const TextCaption(
              title: 'Success',
              subtitle:
                  'Congratulations, your account creation was successful!',
              crossAxisAlignment: CrossAxisAlignment.center,
              textAlignSubtitle: TextAlign.center,
            ),
            SizedBox(
              height: SizeConfig.height * .2,
            ),
            ButtonView(
              name: 'Next',
              marginVertical: 8.0,
              onPressed: () {
                routePush(context,
                    page: const SubmissionParent(),
                    routeType: RouteType.pushReplace);
              },
            )
          ],
        ),
      ),
    );
  }
}
