import 'dart:io';

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

class DisplayPictureScreen extends StatelessWidget {
  final String imagePath, content;

  const DisplayPictureScreen(
      {super.key, required this.imagePath, required this.content});

  @override
  Widget build(BuildContext context) {
    List listIcons = [
      {
        'key': 'ktp',
        'urlImg': PathAssets.iconKtp1,
        'tag': 'ID card that matches your identity'
      },
      {
        'key': 'ktp',
        'urlImg': PathAssets.iconKtp2,
        'tag': 'ID card is not glare & blurry'
      },
      {
        'key': 'ktp',
        'urlImg': PathAssets.iconKtp3,
        'tag': 'ID card is clearly legible and not cut'
      },
      {
        'key': 'ktp',
        'urlImg': PathAssets.iconKtp4,
        'tag': 'No objects other than ID cards in the photo'
      },
      {
        'key': 'selfie',
        'urlImg': PathAssets.iconSelfie1,
        'tag': 'Good lighting, not dark and no reflections',
      },
      {
        'key': 'selfie',
        'urlImg': PathAssets.iconSelfie2,
        'tag': 'ID card does not cover the face',
      },
      {
        'key': 'selfie',
        'urlImg': PathAssets.iconSelfie3,
        'tag': 'Face not covered by mask, hat or glasses'
      },
      {
        'key': 'selfie',
        'urlImg': PathAssets.iconSelfie4,
        'tag': 'Face and ID card are clear and not blurry'
      },
    ];
    return MultiProvider(
        providers: [
          ChangeNotifierProvider(
            create: (context) => SubmissionDataViewModel(),
          )
        ],
        builder: (context, child) {
          return Consumer<SubmissionDataViewModel>(
              builder: (context, provider, child) {
            return Scaffold(
              appBar: AppBar(
                title: const Text('Preview'),
                automaticallyImplyLeading: false,
              ),
              body: Container(
                  padding: const EdgeInsets.symmetric(horizontal: 24.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      SizedBox(
                          width: SizeConfig.width,
                          height: SizeConfig.height * .4,
                          child: Image.file(File(imagePath))),
                      const Padding(
                        padding: EdgeInsets.symmetric(vertical: 16.0),
                        child: Text(
                          'Make sure the photo meets the requirements:',
                          style: TextStyle(
                            fontSize: 14,
                            fontWeight: FontWeight.w700,
                            color: ColorPalette.slate800,
                          ),
                        ),
                      ),
                      Wrap(
                        alignment: WrapAlignment.spaceBetween,
                        spacing: 8,
                        runSpacing: 8,
                        children: List.generate(4, (index) {
                          List filteredList = listIcons
                              .where((element) => element['key'] == content)
                              .toList();
                          final urlImg = filteredList[index]['urlImg'];
                          final tag = filteredList[index]['tag'];

                          return Column(
                            children: [
                              Container(
                                width: SizeConfig.width * .42,
                                height: SizeConfig.height * .15,
                                padding: const EdgeInsets.symmetric(
                                    vertical: 8.0, horizontal: 8.0),
                                decoration: BoxDecoration(
                                    color: ColorPalette.blue50,
                                    borderRadius: BorderRadius.circular(6.0)),
                                child: Column(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Padding(
                                      padding:
                                          const EdgeInsets.only(bottom: 8.0),
                                      child: ImageView(
                                        image: urlImg,
                                        width: SizeConfig.width * .1,
                                      ),
                                    ),
                                    Expanded(
                                      child: Text(
                                        tag,
                                        maxLines: 2,
                                        overflow: TextOverflow.ellipsis,
                                        style: const TextStyle(
                                            fontSize: 14,
                                            color: ColorPalette.slate800,
                                            fontWeight: FontWeight.normal),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          );
                        }),
                      ),
                      const Spacer(),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          SizedBox(
                            width: SizeConfig.width * .42,
                            child: ButtonView(
                              name: 'Retake',
                              isOutlined: true,
                              marginVertical: 8.0,
                              onPressed: () {
                                provider.initCamera().then((cameras) {
                                  routePush(context,
                                      page: TakePictureScreen(
                                        camera: cameras.first,
                                        takeContent: content,
                                      ));
                                });
                              },
                            ),
                          ),
                          SizedBox(
                            width: SizeConfig.width * .42,
                            child: ButtonView(
                              marginVertical: 8.0,
                              name: 'Next',
                              onPressed: () {
                                routePush(context, page: SubmissionParent());
                              },
                            ),
                          ),
                        ],
                      )
                    ],
                  )),
            );
          });
        });
  }
}