import 'package:mc_common_app/generated/locale_keys.g.dart';
import 'package:mc_common_app/models/services_models/item_model.dart';
import 'package:mc_common_app/utils/enums.dart';
import 'package:mc_common_app/view_models/appointments_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/widgets/empty_widget.dart';
import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
import 'package:provider/provider.dart';
import 'package:easy_localization/easy_localization.dart';

class DamagePicturesList extends StatefulWidget {
  final int serviceId;

  const DamagePicturesList(this.serviceId, {super.key});

  @override
  State<DamagePicturesList> createState() => _DamagePicturesListState();
}

class _DamagePicturesListState extends State<DamagePicturesList> {
  @override
  void initState() {
    super.initState();
    context.read<AppointmentsVM>().getServiceItems(serviceId: widget.serviceId);
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: MediaQuery.of(context).size.height / 1.2,
      child: Consumer<AppointmentsVM>(
        builder: (context, appointmentsVM, _) {
          if (appointmentsVM.state == ViewState.busy) {
            return const Center(child: CircularProgressIndicator());
          }
          return appointmentsVM.serviceItemsFromApi.isEmpty
              ? EmptyWidget(text: LocaleKeys.noItemsToShow.tr(), isWrappedColumn: false)
              : ListView.separated(
                  itemCount: appointmentsVM.serviceItemsFromApi.length,
                  itemBuilder: (BuildContext context, int index) {
                    ItemData serviceItemModel = appointmentsVM.serviceItemsFromApi[index];
                    return SizedBox(
                      width: double.infinity,
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              mainAxisAlignment: MainAxisAlignment.start,
                              children: [
                                serviceItemModel.name.toString().toText(fontSize: 16, isBold: true),
                                4.height,
                                showItem("${LocaleKeys.availableforAppointment.tr()}:", (serviceItemModel.isAllowAppointment ?? false) ? "Yes" : "No", valueColor: Colors.green),
                                showItem("${LocaleKeys.allowingWorkshopService.tr()}:", (serviceItemModel.isAppointmentCompanyLoc ?? false) ? "Yes" : "No", valueColor: Colors.green),
                                showItem("${LocaleKeys.allowingHomeService.tr()}:", (serviceItemModel.isAppointmentCustomerLoc ?? false) ? "Yes" : "No", valueColor: Colors.green),
                                12.height,
                                LocaleKeys.serviceAmount.tr().toText(fontSize: 12, color: MyColors.lightTextColor, isBold: true),
                                Row(
                                  crossAxisAlignment: CrossAxisAlignment.end,
                                  children: [
                                    serviceItemModel.price!.toText(fontSize: 22, isBold: true),
                                    2.width,
                                    Padding(
                                      padding: const EdgeInsets.only(bottom: 4),
                                      child: LocaleKeys.sar.tr().toText(fontSize: 12, color: MyColors.lightTextColor, isBold: true),
                                    ),
                                  ],
                                ),
                              ],
                            ),
                          ),
                          // Padding(
                          //   padding: const EdgeInsets.all(4.0),
                          //   child: SvgPicture.asset(
                          //     MyAssets.icEdit,
                          //     width: 16,
                          //     height: 16,
                          //   ),
                          // )
                        ],
                      ),
                    ).toWhiteContainer(width: double.infinity, allPading: 12);
                  },
                  separatorBuilder: (BuildContext context, int index) {
                    return 12.height;
                  },
                  padding: const EdgeInsets.all(20),
                );
        },
      ),
    );
  }

  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),
      ],
    );
  }
}
