import 'dart:async';
import 'dart:developer';

import 'package:easy_localization/easy_localization.dart';
import 'package:mc_common_app/config/routes.dart';
import 'package:mc_common_app/generated/locale_keys.g.dart';
import 'package:mc_common_app/models/advertisment_models/ad_details_model.dart';
import 'package:mc_common_app/models/chat_models/chat_message_model.dart';
import 'package:mc_common_app/models/general_models/widgets_models.dart';
import 'package:mc_common_app/utils/navigator.dart';
import 'package:mc_common_app/view_models/ad_view_model.dart';
import 'package:flutter/material.dart';
import 'package:mc_common_app/extensions/int_extensions.dart';
import 'package:mc_common_app/extensions/string_extensions.dart';
import 'package:mc_common_app/theme/colors.dart';
import 'package:mc_common_app/views/advertisement/components/picked_images_container_widget.dart';
import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';

class AdDamagePartPicturesSheet extends StatefulWidget {
  final List<DamageReport> adDamageReportList;

  const AdDamagePartPicturesSheet({super.key, required this.adDamageReportList});

  @override
  State<AdDamagePartPicturesSheet> createState() => _AdDamagePartPicturesSheetState();
}

class _AdDamagePartPicturesSheetState extends State<AdDamagePartPicturesSheet> {
  List<VehicleDamageCard> vehicleDamageCards = [];

  @override
  void initState() {
    scheduleMicrotask(() => populateDamagePartPictures());
    super.initState();
  }

  void populateDamagePartPictures() {
    for (var element in widget.adDamageReportList) {
      ImageModel imageModel = ImageModel(id: element.id!, filePath: element.imageUrl!, isFromNetwork: true);

      VehicleDamageCard vehicleDamageCard = VehicleDamageCard(
        partSelectedId: SelectionModel(
          selectedId: element.vehicleDamagePartID!,
          selectedOption: element.partName ?? "",
        ),
        damagePartDescription: element.comment ?? "",
        partImages: [imageModel],
      );
      vehicleDamageCards.add(vehicleDamageCard);
    }
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: MediaQuery.of(context).size.height / 1.2,
      child: ListView.builder(
        physics: const NeverScrollableScrollPhysics(),
        shrinkWrap: true,
        itemCount: vehicleDamageCards.length,
        itemBuilder: (BuildContext context, int index) {
          VehicleDamageCard vehicleDamageCard = vehicleDamageCards[index];
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              vehicleDamageCard.partSelectedId!.selectedOption.toText(fontSize: 18, color: MyColors.darkTextColor),
              if (vehicleDamageCard.damagePartDescription!.isNotEmpty) ...[
                vehicleDamageCard.damagePartDescription!.toText(fontSize: 14, color: MyColors.lightTextColor),
              ],
              PickedFilesContainer(
                pickedFiles: vehicleDamageCard.partImages ?? [],
                isReview: true,
                onCrossPressedSecondary: (imageIndex, filePath) {},
                index: index,
                onAddFilePressed: () {},
              ).onPress(() {
                if (vehicleDamageCard.partImages == null) {
                  return;
                }
                List<MessageImageModel> images = [];
                for (var image in vehicleDamageCard.partImages!) {
                  images.add(MessageImageModel(
                    id: image.id,
                    isFromNetwork: true,
                    imageUrl: image.filePath,
                  ));
                }
                navigateWithName(context, AppRoutes.mediaViewerScreen, arguments: images);
              }),
            ],
          ).toWhiteContainer(
            width: double.infinity,
            allPading: 12,
            margin: const EdgeInsets.symmetric(horizontal: 21, vertical: 4),
          );
        },
      ).paddingOnly(top: 10),
    );
  }

  Widget showItem(String item, String value, {Color valueColor = Colors.black}) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        item.toText(fontSize: 12, color: MyColors.lightTextColor, isBold: true),
        4.width,
        value.toText(fontSize: 12, color: valueColor, isBold: true),
      ],
    );
  }
}
