import 'package:flutter/material.dart';
import 'package:get/get_state_manager/src/rx_flutter/rx_obx_widget.dart';
import 'package:mypoint_flutter_app/shared/direction_google_map.dart';

import '../models/product_store_model.dart';

class StoreListSection extends StatelessWidget {
  final List<ProductStoreModel> stores;
  final String? brandLogo;

  const StoreListSection({Key? key, required this.stores, this.brandLogo}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Obx(() {
      if (stores.isEmpty) {
        return const SizedBox.shrink();
      }
      return Container(
        margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(16)),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Địa điểm áp dụng:', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
            const SizedBox(height: 10),
            ...stores.map(
              (store) => InkWell(
                onTap: () {
                  _onTapStore(store);
                },
                child: _buildStoreItem(store),
              ),
            ),
          ],
        ),
      );
    });
  }

  _onTapStore(ProductStoreModel store) {
    showGoogleMap(lat: store.latitude, lng: store.longitude);
  }

  Widget _buildStoreItem(ProductStoreModel store) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 12),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              ClipOval(
                child: Image.network(
                  brandLogo ?? "",
                  width: 20,
                  height: 20,
                  fit: BoxFit.cover,
                  errorBuilder: (_, __, ___) => Image.asset('assets/images/ic_logo.png', width: 20, height: 20),
                ),
              ),
              const SizedBox(width: 8),
              Text(store.name ?? '', style: const TextStyle(fontWeight: FontWeight.w600)),
            ],
          ),
          const SizedBox(height: 4),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Icon(Icons.location_on_outlined, size: 18, color: Colors.grey),
              const SizedBox(width: 4),
              Expanded(
                child: Text(
                  store.address ?? '',
                  style: const TextStyle(color: Colors.grey, fontSize: 13),
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
