import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'widgets/header_widget.dart';
// import 'package:collection/collection.dart';

import '../../app.dart';

class ProductListPage extends StatelessWidget {
  final data = Get.arguments ?? {'': ''};

  @override
  Widget build(BuildContext context) {
    return GetX<ProductListController>(
      init: ProductListController(),
      builder: (plc) {
        final bool isLastPage = plc.productState.lastPage.value;
        return Scaffold(
          backgroundColor: ThemeColor.white,
          body: SafeArea(
            bottom: false,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                CustomAppbarWidget(leading: AppBarBackBtn()),
                SizedBox(height: 16.h),
                Padding(
                  padding: EdgeInsets.only(left: 16.w, right: 16.w),
                  child: Text(
                    data['name'] ?? '',
                    style: new TextStyle(
                      color: ThemeColor.color3A3A3A,
                      fontSize: 16.sp,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ),
                SizedBox(height: 8.h),
                Padding(
                  padding: EdgeInsets.only(left: 16.w, right: 16.w),
                  child: AppTheme.appColorDivider,
                ),

                // Source, sort, filter header widget
                HeaderWidget(),

                Expanded(
                  child: plc.obx(
                    (state) => state != null
                        ? RefreshIndicator(
                            onRefresh: plc.refreshList,
                            color: ThemeColor.mainColor,
                            child: AlignedGridView.count(
                              shrinkWrap: true,
                              controller: plc.scroll,
                              physics: const AlwaysScrollableScrollPhysics(),
                              crossAxisCount: context.isTablet ? 3 : 2,
                              padding: const EdgeInsets.symmetric(horizontal: 16),
                              mainAxisSpacing: 16,
                              crossAxisSpacing: 16,
                              itemCount: plc.productState.repositories.length + 1,
                              itemBuilder: (context, index) {
                                if (index < state.length) {
                                  return ProductCard(model: plc.productState.repositories[index]);
                                } else if (index == state.length && !isLastPage)
                                  return GridViewLoadMoreWidget(index: index);
                                else
                                  return SizedBox.shrink();
                              },
                            ),
                          )
                        : retryBuilder(plc.fetchProducts),
                    onLoading: CustomLoader(),
                    onEmpty: Transform.translate(
                      child: ItemNotFoundWidget(),
                      offset: Offset(0, -60),
                    ),
                    onError: (error) => retryBuilder(plc.fetchProducts),
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}
