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

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

  @override
  Widget build(BuildContext context) {
    bottomSheet() {
      showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return StatefulBuilder(
            builder: (context, setState) {
              return Container(
                decoration: const BoxDecoration(
                    color: Colors.white,
                    borderRadius:
                        BorderRadius.vertical(top: Radius.circular(18))),
                height: SizeConfig.height * .35,
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        const ImageView(
                          image: PathAssets.iconShield,
                          width: 20,
                          height: 22,
                        ),
                        const SizedBox(
                          width: 8,
                        ),
                        const Expanded(
                          child: Text(
                            'Will my data be safe?',
                            style: TextStyle(
                              fontWeight: FontWeight.w600,
                              color: ColorPalette.primary,
                            ),
                          ),
                        ),
                        IconButton(
                          onPressed: () => Navigator.pop(context),
                          icon: const Icon(
                            Icons.close,
                            color: ColorPalette.slate400,
                          ),
                        )
                      ],
                    ),
                    const Text(
                      'We only request data in accordance with OJK regulations. Your data is encrypted and will not be shared with third parties without your consent.',
                      style: TextStyle(
                        color: ColorPalette.slate400,
                      ),
                    ),
                    ButtonView(
                      name: 'OK',
                      isOutlined: true,
                      onPressed: () {
                        Navigator.pop(context);
                      },
                    )
                  ],
                ),
              );
            },
          );
        },
      );
    }

    Widget photoDocument(SubmissionDataViewModel provider) {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Padding(
            padding: EdgeInsets.symmetric(vertical: 8.0),
            child: Text(
              'Photo Document',
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.w600,
                color: ColorPalette.slate800,
              ),
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: provider.listImg.map((e) {
              return Column(
                children: [
                  SizedBox(
                    height: SizeConfig.height * .18,
                    width: SizeConfig.width * .45,
                    child: Transform(
                      alignment: Alignment.center,
                      transform: e.key == 'selfie'
                          ? Matrix4.rotationY(math.pi)
                          : Matrix4.rotationY(0),
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(8),
                        child: Image.file(
                          File(e.image),
                          fit: BoxFit.fill,
                          errorBuilder: (context, error, stackTrace) {
                            return const Icon(
                                Icons.image_not_supported_outlined);
                          },
                        ),
                      ),
                    ),
                  ),
                  SizedBox(
                    width: SizeConfig.width * .43,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          e.text,
                          overflow: TextOverflow.ellipsis,
                          maxLines: 1,
                          style: const TextStyle(
                            fontWeight: FontWeight.w600,
                            color: ColorPalette.slate800,
                          ),
                        ),
                        SizedBox(
                          width: 38,
                          child: IconButton(
                              style: IconButton.styleFrom(
                                  backgroundColor: Colors.white,
                                  shape: const CircleBorder(
                                      side: BorderSide(
                                          color: ColorPalette.slate200))),
                              onPressed: () {},
                              icon: const Icon(
                                Icons.camera_alt_outlined,
                                color: ColorPalette.slate500,
                              )),
                        ),
                      ],
                    ),
                  )
                ],
              );
            }).toList(),
          )
        ],
      );
    }

    return MultiProvider(
        providers: [
          ChangeNotifierProvider(
            create: (context) => SubmissionDataViewModel(),
          )
        ],
        builder: (context, child) {
          return SingleChildScrollView(
            child: Consumer<SubmissionDataViewModel>(
                builder: (context, provider, child) {
              return Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const TextCaption(
                      title: 'Check your ID card data for accuracy'),
                  TextFormView(
                    name: 'NIK',
                    keyboardType: TextInputType.number,
                  ),
                  TextFormView(name: 'Full Name'),
                  DatePickerView(
                      name: 'Birth Date',
                      ctrl: provider.ctrlBirthDate,
                      maxDate: DateTime.now(),
                      isMultipleSelection: false,
                      enabled: true),
                  photoDocument(provider),
                  Container(
                    width: SizeConfig.width,
                    padding: const EdgeInsets.symmetric(horizontal: 16.0),
                    margin: const EdgeInsets.symmetric(vertical: 16.0),
                    decoration: BoxDecoration(
                      color: ColorPalette.blue50,
                      borderRadius: BorderRadius.circular(10),
                      border: Border.all(
                        color: ColorPalette.greyLights,
                        width: 1,
                      ),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        const ImageView(
                          image: PathAssets.iconShield,
                          width: 20,
                          height: 22,
                        ),
                        const SizedBox(
                          width: 8,
                        ),
                        const Expanded(
                          child: Text(
                            'Will my data be safe?',
                            style: TextStyle(
                              fontWeight: FontWeight.w600,
                              color: ColorPalette.primary,
                            ),
                          ),
                        ),
                        IconButton(
                          onPressed: () {
                            bottomSheet();
                          },
                          icon: const Icon(
                            Icons.arrow_forward_ios,
                            color: ColorPalette.primary,
                            size: 20,
                          ),
                        )
                      ],
                    ),
                  ),
                  ButtonView(
                    name: 'Next',
                    onPressed: () async {
                      await provider.next(context).then((value) {
                        if (value) {
                          routePush(context, page: const SubmissionParent());
                        }
                      });
                    },
                  )
                ],
              );
            }),
          );
        });
  }
}
