import 'package:flutter/material.dart';
import 'package:syncrow_web/pages/spaces_management/all_spaces/model/product_model.dart';
import 'package:syncrow_web/pages/spaces_management/all_spaces/model/selected_product_model.dart';
import 'package:syncrow_web/pages/spaces_management/all_spaces/widgets/add_device_type_widget.dart';
import 'package:syncrow_web/pages/spaces_management/all_spaces/widgets/hoverable_button.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';

class SelectedProductsButtons extends StatelessWidget {
  final List<ProductModel> products;
  final List<SelectedProduct> selectedProducts;
  final Function(List<SelectedProduct>) onProductsUpdated;
  final BuildContext context;

  const SelectedProductsButtons({
    Key? key,
    required this.products,
    required this.selectedProducts,
    required this.onProductsUpdated,
    required this.context,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;

    return Container(
      width: screenWidth * 0.6,
      padding: const EdgeInsets.all(8),
      decoration: BoxDecoration(
        color: ColorsManager.textFieldGreyColor,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(
          color: ColorsManager.neutralGray,
          width: 2,
        ),
      ),
      child: Wrap(
        spacing: 8,
        runSpacing: 8,
        children: [
          ..._buildSelectedProductButtons(),
          _buildAddButton(),
        ],
      ),
    );
  }

  List<Widget> _buildSelectedProductButtons() {
    return [
      for (var i = 0; i < selectedProducts.length; i++) ...[
        HoverableButton(
          iconPath: _mapIconToProduct(selectedProducts[i].productId, products),
          text: 'x${selectedProducts[i].count}',
          onTap: () {
            _removeProduct(i);
          },
        ),
        if (i < selectedProducts.length - 1)
          const SizedBox(width: 2), // Add space except after the last button
      ],
    ];
  }

  Widget _buildAddButton() {
    return GestureDetector(
      onTap: _showAddDeviceDialog,
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
        decoration: BoxDecoration(
          color: ColorsManager.whiteColors,
          borderRadius: BorderRadius.circular(16),
        ),
        child: const Icon(
          Icons.add,
          color: ColorsManager.spaceColor,
          size: 24,
        ),
      ),
    );
  }

  void _showAddDeviceDialog() {
    showDialog(
      context: context,
      builder: (context) => AddDeviceWidget(
        products: products,
        initialSelectedProducts: selectedProducts,
        onProductsSelected: (selectedProductsMap) {
          onProductsUpdated(selectedProductsMap);
        },
      ),
    );
  }

  void _removeProduct(int index) {
    final updatedProducts = [...selectedProducts];
    updatedProducts.removeAt(index);
    onProductsUpdated(updatedProducts);
  }

  String _mapIconToProduct(String uuid, List<ProductModel> products) {
    // Find the product with the matching UUID
    final product = products.firstWhere(
      (product) => product.uuid == uuid,
      orElse: () => ProductModel(
        uuid: '',
        catName: '',
        prodId: '',
        prodType: '',
        name: '',
        icon: Assets.presenceSensor,
      ),
    );

    return product.icon ?? Assets.presenceSensor;
  }
}
