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/custom_app_bar/custom_app_bar.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';
import 'package:shared_preferences/shared_preferences.dart';
import 'dart:math' as math;

class DisplayPictureScreen extends StatefulWidget {
  final String imagePath, content;

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

  @override
  State<DisplayPictureScreen> createState() => _DisplayPictureScreenState();
}

class _DisplayPictureScreenState extends State<DisplayPictureScreen> {
  Future<void> saveData() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    if (widget.content == 'ktp') {
      prefs.setString('imagePath', widget.imagePath);
    } else {
      prefs.setString('imagePathSelfie', widget.imagePath);
    }
  }

  @override
  void initState() {
    saveData();
    super.initState();
  }

  @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: CustomAppBar(
                  height: SizeConfig.height * .08, title: 'Preview'),
              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: Transform(
                              alignment: Alignment.center,
                              transform: widget.content == 'selfie'
                                  ? Matrix4.rotationY(math.pi)
                                  : Matrix4.rotationY(0),
                              child: Image.file(
                                File(widget.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'] == widget.content)
                              .toList();
                          final urlImg = filteredList[index]['urlImg'];
                          final tag = filteredList[index]['tag'];

                          return Column(
                            children: [
                              Container(
                                width: SizeConfig.width * .42,
                                height: SizeConfig.height * .13,
                                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: widget.content == 'ktp'
                                            ? cameras[0]
                                            : cameras[1],
                                        takeContent: widget.content,
                                      ));
                                });
                              },
                            ),
                          ),
                          SizedBox(
                            width: SizeConfig.width * .4,
                            child: ButtonView(
                              marginVertical: 0.0,
                              name: 'Next',
                              onPressed: () {
                                provider.nextSubmission(context);
                                routePush(context,
                                    page: const SubmissionParent());
                              },
                            ),
                          ),
                        ],
                      )
                    ],
                  )),
            );
          });
        });
  }
}
