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/take_picture_screen/take_picture_screen.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/viewmodel/submission_data_viewmodel.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

  @override
  Widget build(BuildContext context) {
    List listImg = [
      {
        'urlImg': PathAssets.imgSelfieBlur,
        'tag': 'Blurry and ID card is not visible'
      },
      {
        'urlImg': PathAssets.imgSelfieClear,
        'tag': 'ID card and face clearly visible'
      },
    ];
    return MultiProvider(
        providers: [
          ChangeNotifierProvider(
            create: (context) => SubmissionDataViewModel(),
          )
        ],
        builder: (context, child) {
          return SizedBox(
            height: SizeConfig.height * .75,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                const TextCaption(
                  title: 'Take a selfie with your ID card',
                  subtitle:
                      'Make sure your face and identity are clearly visible to ensure your identity is correct.',
                ),
                SizedBox(
                  height: SizeConfig.height * .42,
                  width: SizeConfig.width,
                  child: Wrap(
                    alignment: WrapAlignment.spaceBetween,
                    spacing: 2,
                    runSpacing: 2,
                    children: List.generate(listImg.length, (index) {
                      final urlList = listImg[index]['urlImg'];
                      final tag = listImg[index]['tag'];
                      return Column(
                        children: [
                          ImageView(
                            image: urlList,
                            width: SizeConfig.width * .35,
                          ),
                          const SizedBox(
                            height: 8,
                          ),
                          SizedBox(
                            width: SizeConfig.width * .42,
                            child: Text(
                              tag,
                              textAlign: TextAlign.center,
                              style: const TextStyle(
                                  color: ColorPalette.slate800,
                                  fontWeight: FontWeight.w600),
                            ),
                          ),
                        ],
                      );
                    }),
                  ),
                ),
                const Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    ImageView(
                      image: PathAssets.iconShield,
                      width: 20,
                      height: 22,
                    ),
                    SizedBox(
                      width: 8,
                    ),
                    Expanded(
                      child: Text(
                        'In accordance with OJK regulations, a selfie with ID card is required to purchase mutual funds.',
                        maxLines: 2,
                        style: TextStyle(
                          fontSize: 12,
                          fontWeight: FontWeight.w600,
                          color: ColorPalette.primary,
                        ),
                      ),
                    )
                  ],
                ),
                Consumer<SubmissionDataViewModel>(
                    builder: (context, provider, child) {
                  return ButtonView(
                    name: 'Take a Photo',
                    marginVertical: 16.0,
                    onPressed: () {
                      provider.initCamera().then((cameras) {
                        routePush(context,
                            page: TakePictureScreen(
                              camera: cameras[1],
                              takeContent: 'selfie',
                            ));
                      });
                    },
                  );
                })
              ],
            ),
          );
        });
  }
}
