import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:mohem_flutter_app/extensions/int_extensions.dart';
import 'package:mohem_flutter_app/extensions/string_extensions.dart';
import 'package:mohem_flutter_app/generated/locale_keys.g.dart';
import 'package:mohem_flutter_app/main.dart';
import 'package:mohem_flutter_app/models/offers_and_discounts/wala_plus_retailer_model.dart';
import 'package:mohem_flutter_app/ui/mazaya/retailers_list_screen.dart';
import 'package:shimmer/shimmer.dart';

class WalaPlusRetailerGrid extends StatelessWidget {
  final bool isLoading;
  final List<WalaPlusRetailerModel> retailers;
  final bool isAr;
  final void Function(WalaPlusRetailerModel item) onTapRetailer;
  final void Function(WalaPlusRetailerModel item) onFavoriteTap;
  final bool isLoadingMore;
  final int shimmerItemCount;
  final double? mainAxisExtent;

  const WalaPlusRetailerGrid({
    Key? key,
    required this.isLoading,
    required this.retailers,
    required this.isAr,
    required this.onTapRetailer,
    required this.onFavoriteTap,
    this.isLoadingMore = false,
    this.shimmerItemCount = 4,
    this.mainAxisExtent,
  }) : super(key: key);

  bool get _hasAnyChips {
    for (WalaPlusRetailerModel r in retailers) {
      if (r.normalizedTypes.isNotEmpty ||
          r.displayCity.trim().isNotEmpty ||
          r.displayUsage.trim().isNotEmpty) {
        return true;
      }
    }
    return false;
  }

  double get _effectiveMainAxisExtent {
    if (mainAxisExtent != null) return mainAxisExtent!;
    if (retailers.isNotEmpty && !_hasAnyChips) return 190;
    return 235;
  }

  SliverGridDelegateWithFixedCrossAxisCount get _gridDelegate =>
      SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: isTablet ? 4 : 2,
        mainAxisExtent: _effectiveMainAxisExtent,
        crossAxisSpacing: 12,
        mainAxisSpacing: 16,
      );

  @override
  Widget build(BuildContext context) {
    if (isLoading) {
      return Shimmer.fromColors(
        baseColor: const Color(0xFFE2E8F0),
        highlightColor: const Color(0xFFF8FAFC),
        child: GridView.builder(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          gridDelegate: _gridDelegate,
          itemCount: shimmerItemCount,
          itemBuilder: (BuildContext _, int __) => _buildShimmerCard(),
        ),
      );
    }

    if (retailers.isEmpty) {
      return Padding(padding: const EdgeInsets.only(top: 40), child: Center(child: LocaleKeys.noOffersAvailable.tr().toText14(color: const Color(0xFF64748B))));
    }

    return Column(
      children: <Widget>[
        GridView.builder(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          gridDelegate: _gridDelegate,
          itemCount: retailers.length,
          itemBuilder: (BuildContext context, int index) {
            return WalaPlusRetailerCard(item: retailers[index], isAr: isAr, onTap: () => onTapRetailer(retailers[index]), onFavoriteTap: () => onFavoriteTap(retailers[index]));
          },
        ),
        if (isLoadingMore) ...<Widget>[
          16.height,
          Center(child: Padding(padding: const EdgeInsets.symmetric(vertical: 12), child: Image.asset("assets/images/logos/loading_mohemm_logo.gif", height: 48.0, width: 48.0))),
        ],
      ],
    );
  }

  Widget _buildShimmerCard() {
    bool showChips = _effectiveMainAxisExtent > 200;
    return Container(
      decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(20)),
      padding: const EdgeInsets.all(10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(height: 110, width: double.infinity, decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(14))),
          const SizedBox(height: 8),
          Container(height: 14, width: 110, decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(4))),
          const SizedBox(height: 6),
          Container(height: 14, width: 80, decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(4))),
          if (showChips) ...<Widget>[
            const SizedBox(height: 6),
            Row(
              children: <Widget>[
                Container(height: 28, width: 50, decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(6))),
                const SizedBox(width: 5),
                Container(height: 28, width: 45, decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(6))),
              ],
            ),
          ],
        ],
      ),
    );
  }
}