import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:provider/provider.dart';
import 'package:test_sa/controllers/providers/api/ppm_provider.dart';
import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/string_extensions.dart';
import 'package:test_sa/extensions/text_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart';
import 'package:test_sa/models/plan_preventive_visit/plan_preventive_visit_model.dart';
import 'package:test_sa/new_views/app_style/app_color.dart';
import 'package:test_sa/new_views/common_widgets/app_filled_button.dart';
import 'package:test_sa/views/widgets/item_views/info_header_widget.dart';
import 'package:test_sa/views/widgets/parts/auto_complete_parts_field.dart';


class PpmPMKitsForm extends StatefulWidget {
  final List<PreventiveVisitKits>? models;
  final num? assetId;

  const PpmPMKitsForm({Key? key, this.models = const <PreventiveVisitKits>[], this.assetId}) : super(key: key);

  @override
  State<PpmPMKitsForm> createState() => _PpmPMKitsFormState();
}

class _PpmPMKitsFormState extends State<PpmPMKitsForm> {
  @override
  Widget build(BuildContext context) {
    final ppmProvider = Provider.of<PpmProvider>(context, listen: false);
    int totalTabs = ppmProvider.totalTabs;
    int currentIndex = totalTabs == 4 ? 3 : 2;
    return ListView.builder(
      itemCount: widget.models!.length + 1,
      shrinkWrap: true,
      padding: const EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 16),
      itemBuilder: (context, index) {
        if (index == widget.models!.length) {
          return Visibility(
            visible: !ppmProvider.isReadOnly,
            child: AppFilledButton(
              label: "Add More PM Kits".addTranslation,
              maxWidth: true,
              textColor: AppColor.headingTextColor(context),
              // buttonColor: AppColor.dropDownBackground(context),
              buttonColor: AppColor.addItemButtonColor(context),
              icon: Icon(Icons.add_circle, color: AppColor.blueStatus(context)),
              showIcon: true,
              onPressed: () async {
                if (widget.models?.isNotEmpty ?? false) {
                  if (widget.models!.last.partCatalogItem?.partNumber == null) {
                    await Fluttertoast.showToast(msg: "${context.translation.youHaveToSelect} ${context.translation.partNumber}");
                    return;
                  }
                  if (widget.models!.last.partCatalogItem?.partName == null) {
                    await Fluttertoast.showToast(msg: "${context.translation.youHaveToSelect} ${context.translation.partName}");
                    return;
                  }
                }
                widget.models!.add(PreventiveVisitKits(id: 0));
                setState(() {});
              },
            ),
          );
        }
        final model = widget.models![index];
        return Container(
          padding: const EdgeInsets.all(16),
          margin: EdgeInsets.only(bottom: 16.toScreenHeight),
          decoration: BoxDecoration(
            color: AppColor.background(context),
            borderRadius: BorderRadius.circular(20),
            boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.03), blurRadius: 14)],
          ),
          child: IgnorePointer(
            ignoring: ppmProvider.isReadOnly,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    InfoHeader16Widget((index == 0 ? "$currentIndex /$totalTabs . PM Kits" : "")),
                    // (index == 0 ? "$currentIndex /$totalTabs . PM Kits" : "").heading5(context).custom(color: AppColor.textStyleColor(context)),
                    Container(
                      height: 32,
                      width: 32,
                      padding: const EdgeInsets.all(6),
                      child: "trash".toSvgAsset(height: 20, width: 20),
                    ).onPress(() {
                      widget.models!.remove(model);
                      setState(() {});
                    }),
                  ],
                ),
                16.height,
                AutoCompletePartsField(
                  assetId: widget.assetId,
                  clearAfterPick: false,
                  byName: true,
                  initialValue: model.partCatalogItem?.partName ?? "",
                  onPick: (part) {
                    model.partCatalogItem = PartCatalogItem(id: part.sparePart?.id, partNumber: part.sparePart?.partNo, partName: part.sparePart?.partName, oracleCode: part.sparePart?.oracleCode);
                    setState(() {});
                  },
                ),
                8.height,
                AutoCompletePartsField(
                  assetId: widget.assetId,
                  clearAfterPick: false,
                  byName: false,
                  initialValue: model.partCatalogItem?.partNumber ?? "",
                  onPick: (part) {
                    model.partCatalogItem = PartCatalogItem(id: part.sparePart?.id, partNumber: part.sparePart?.partNo, partName: part.sparePart?.partName, oracleCode: part.sparePart?.oracleCode);
                    setState(() {});
                  },
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}
