import 'package:easy_refresh/easy_refresh.dart';
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 'package:wallpaperx/common/components/image_network_widget.dart';
import 'package:wallpaperx/common/components/navigation_bar/custom_appbar.dart';
import 'package:wallpaperx/entity/image_model.dart';
import 'package:wallpaperx/res/values/strings.dart';

import 'category_item_controller.dart';

class CategoryItemView extends GetView<CategoryItemController> {
  const CategoryItemView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: CustomAppbar(
        appName,
        backgroundColor: Colors.black,
        titleStyle: TextStyle(
          color: Colors.white,
          fontSize: 24.sp,
          fontWeight: FontWeight.w600,
        ),
      ),
      body: Obx(
        () => EasyRefresh(
          controller: controller.refreshController,
          onLoad: controller.onLoad,
          child: Scrollbar(
            controller: controller.scrollController,
            child: MasonryGridView.count(
              controller: controller.scrollController,
              itemCount: controller.wallpaperList.length,
              crossAxisCount: 2,
              mainAxisSpacing: 15.w,
              crossAxisSpacing: 15.w,
              padding: const EdgeInsets.fromLTRB(15, 20, 15, 0).w,
              itemBuilder: (context, index) {
                ImageModel item = controller.wallpaperList[index];
                return GestureDetector(
                  onTap: () => controller.toImageDetail(index),
                  child: ImageNetworkWidget(
                    url: item.imageUrl,
                    aspectRatio: item.width! / item.height!,
                    radius: 14.r,
                  ),
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}
