import 'dart:io';

import 'package:dotted_border/dotted_border.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:image_picker/image_picker.dart';
import 'package:mohem_flutter_app/app_state/app_state.dart';
import 'package:mohem_flutter_app/classes/colors.dart';
import 'package:mohem_flutter_app/classes/utils.dart';
import 'package:mohem_flutter_app/extensions/int_extensions.dart';
import 'package:mohem_flutter_app/extensions/string_extensions.dart';
import 'package:mohem_flutter_app/extensions/widget_extensions.dart';
import 'package:mohem_flutter_app/generated/locale_keys.g.dart';
import 'package:mohem_flutter_app/models/my_documents/employee_documents_list_model.dart';
import 'package:mohem_flutter_app/widgets/app_bar_widget.dart';
import 'package:mohem_flutter_app/widgets/button/default_button.dart';
import 'package:mohem_flutter_app/widgets/dynamic_forms/dynamic_textfield_widget.dart';
import 'package:mohem_flutter_app/widgets/my_document_item.dart';
import 'package:sizer/sizer.dart';

class MyDocumentDetailScreen extends StatefulWidget {
  EmployeeDocumentsList document;
  final Color color;

  MyDocumentDetailScreen(this.document, this.color, {Key? key}) : super(key: key);

  @override
  _MyDocumentDetailScreenState createState() {
    return _MyDocumentDetailScreenState();
  }
}

class _MyDocumentDetailScreenState extends State<MyDocumentDetailScreen> {
  DateTime? expiryDate;
  List<XFile> imagesList = [];

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

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBarWidget(context, title: widget.document.dOCUMENTTYPE!, showHomeButton: true),
      body: Column(
        children: [
          ListView(
            padding: const EdgeInsets.all(21),
            children: [
              MyDocumentItem(widget.document, widget.color,isNotInDetailView: false),
              20.height,
              DynamicTextFieldWidget(
                LocaleKeys.employeeNumber.tr(),
                AppState().getUserName!,
                isInputTypeNum: true,
                isReadOnly: true,
              ),
              12.height,
              PopupMenuButton(
                  child: DynamicTextFieldWidget(
                    "Document Type*",
                    "National ID",
                    isEnable: false,
                    isPopup: true,
                    isInputTypeNum: true,
                    //   isReadOnly: true,
                  ),
                  itemBuilder: (_) => <PopupMenuItem<int>>[],
                  onSelected: (int popipIndex) async {}),
              12.height,
              DynamicTextFieldWidget(
                "Expiry Date",
                expiryDate == null ? LocaleKeys.dateRequired.tr() : Utils.getMonthNamedFormat(expiryDate!).replaceAll("-", " "),
                suffixIconData: Icons.calendar_today,
                isEnable: false,
                onTap: () async {
                  DateTime date = await Utils.selectDate(context, expiryDate ?? DateTime.now());
                  String dateString = date.toString().split(' ').first;
                  if (date != expiryDate) {
                    expiryDate = date;
                    setState(() {});
                  }
                },
              ),
              12.height,
              DottedBorder(
                borderType: BorderType.RRect,
                radius: const Radius.circular(10),
                padding: const EdgeInsets.all(12),
                dashPattern: const <double>[2, 1],
                color: MyColors.selectedBorderColor,
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Transform.rotate(
                      angle: 45,
                      child: const Icon(Icons.attach_file_rounded, size: 16, color: MyColors.selectedBorderColor),
                    ),
                    4.width,
                    "Attach Image".toText14(color: MyColors.selectedBorderColor),
                  ],
                ).center,
              ).onPress(() async {
                ImagePicker picker = ImagePicker();
                List<XFile> list = await picker.pickMultiImage();
                if (list.isNotEmpty) {
                  imagesList.addAll(list);
                  var seen = <String>{};
                  imagesList = imagesList.where((image) => seen.add(image.name)).toList();
                  setState(() {});
                }
              }),
              12.height,
              GridView.builder(
                padding: EdgeInsets.zero,
                itemCount: imagesList.length,
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                itemBuilder: (context, index) {
                  return Stack(
                    alignment: Alignment.topRight,
                    children: [
                      AspectRatio(
                        aspectRatio: 1,
                        child: Image.file(
                          File(imagesList[index].path),
                          fit: BoxFit.cover,
                          errorBuilder: (BuildContext context, Object error, StackTrace? stackTrace) {
                            return const Center(child: Text('This image type is not supported'));
                          },
                        ),
                      ).paddingOnly(top: 6, right: 6),
                      Container(
                        height: 16,
                        width: 16,
                        decoration: const BoxDecoration(
                          shape: BoxShape.circle,
                          color: Color(0xffd85323),
                        ),
                        child: const Icon(Icons.clear, color: Colors.white, size: 12),
                      ).onPress(() {
                        imagesList.removeAt(index);
                        setState(() {});
                      }),
                    ],
                  );
                },
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 4,
                  mainAxisSpacing: 8,
                  crossAxisSpacing: 8,
                  childAspectRatio: 1,
                ),
              )
            ],
          ).expanded,
          const Divider(height: 1, color: MyColors.lightGreyEFColor),
          DefaultButton(
            LocaleKeys.submit.tr(),
            widget.document.dOCUMENTSTATUS == "Exist" ? null : () {},
          ).paddingOnly(left: 21, right: 21, bottom: 21, top: 14),
        ],
      ),
    );
  }
}