mohemm-flutter-app/lib/ui/mazaya/widgets/wala_plus_retailer_grid.dart

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;

  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,
  }) : super(key: key);

  SliverGridDelegateWithFixedCrossAxisCount get _gridDelegate =>
      SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: isTablet ? 4 : 2, mainAxisExtent: 235, 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() {
    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: 120, 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))),
          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))),
            ],
          ),
        ],
      ),
    );
  }
}