import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/text_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart';
import 'package:test_sa/models/ppm/ppm_kit.dart';

import '../../../new_views/app_style/app_color.dart';
import '../../../new_views/common_widgets/app_filled_button.dart';
import '../parts/auto_complete_parts_field.dart';

class PentryPMKitForm extends StatefulWidget {
  final List<PpmKits>? models;
  final num? assetId;

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

  @override
  State<PentryPMKitForm> createState() => _PentryPMKitFormState();
}

class _PentryPMKitFormState extends State<PentryPMKitForm> {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: widget.models!.length + 1,
      shrinkWrap: true,
      padding: EdgeInsets.only(top: 16.toScreenHeight),
      itemBuilder: (context, index) {
        if (index == widget.models!.length) {
          return AppFilledButton(
            label: context.translation.addItem,
            maxWidth: true,
            textColor: Colors.white,
            buttonColor: context.isDark ? AppColor.neutral60 : AppColor.neutral50,
            onPressed: () async {
              if (widget.models?.isNotEmpty ?? false) {
                if (widget.models!.last.partNumber == null) {
                  await Fluttertoast.showToast(msg: "${context.translation.youHaveToSelect} ${context.translation.partNumber}");
                  return;
                }
                if (widget.models!.last.partName == null) {
                  await Fluttertoast.showToast(msg: "${context.translation.youHaveToSelect} ${context.translation.partName}");
                  return;
                }
              }
              widget.models!.add(PpmKits(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: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  "${context.translation.item} ${index + 1}".heading5(context),
                  "trash".toSvgAsset(width: 15, height: 20).onPress(() {
                    widget.models!.remove(model);
                    setState(() {});
                  }),
                ],
              ),
              16.height,
              AutoCompletePartsField(
                assetId: widget.assetId,
                clearAfterPick: false,
                byName: true,
                initialValue: model.partName ?? "",
                onPick: (part) {
                  model.partCatalogItemId = part.sparePart?.id;
                  model.partNumber = part.sparePart?.partNo;
                  model.partName = part.sparePart?.partName;
                  setState(() {});
                },
              ),
              8.height,
              AutoCompletePartsField(
                assetId: widget.assetId,
                clearAfterPick: false,
                byName: false,
                initialValue: model.partNumber ?? "",
                onPick: (part) {
                  model.partCatalogItemId = part.sparePart?.id;
                  model.partNumber = part.sparePart?.partNo;
                  model.partName = part.sparePart?.partName;
                  setState(() {});
                },
              ),
            ],
          ),
        );
      },
    );
  }
}
