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 InitialTakePhoto extends StatelessWidget {
  const InitialTakePhoto({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List listImg = [
      {'urlImg': PathAssets.imgKtpBlur, 'tag': 'Blurry Photo'},
      {'urlImg': PathAssets.imgKtpLight, 'tag': 'Light Reflection'},
      {'urlImg': PathAssets.imgKtpCropped, 'tag': 'Cropped Photo'},
      {'urlImg': PathAssets.imgKtpClear, 'tag': 'Clear Photo'},
    ];
    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 photo your ID card',
                  subtitle:
                      'Make sure your photo is clearly legible for identity verification purposes',
                ),
                SizedBox(
                  width: SizeConfig.height,
                  child: Wrap(
                    alignment: WrapAlignment.spaceBetween,
                    spacing: 10,
                    runSpacing: 10,
                    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 * .42,
                          ),
                          const SizedBox(
                            height: 8,
                          ),
                          Text(
                            tag,
                            style: const TextStyle(
                                color: ColorPalette.slate800,
                                fontWeight: FontWeight.w600),
                          ),
                        ],
                      );
                    }),
                  ),
                ),
                // const Spacer(),
                const Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    ImageView(
                      image: PathAssets.iconShield,
                      width: 20,
                      height: 22,
                    ),
                    SizedBox(
                      width: 8,
                    ),
                    Expanded(
                      child: Text(
                        'In accordance with OJK regulations, an ID card is required to purchase mutual funds.',
                        style: TextStyle(
                          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.first,
                              takeContent: 'selfie',
                            ));
                      });
                    },
                  );
                })
              ],
            ),
          );
        });
  }
}
