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/base_appbar.dart';
import 'package:wallpaperx/entity/image_model.dart';
import 'package:wallpaperx/page/cls_det/cls_det_controller.dart';
import 'package:wallpaperx/res/values/strings.dart';

class ClsDetView extends GetView<ClsDetController> {
  const ClsDetView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: BaseAppBar(
        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: MasonryGridView.count(
            itemCount: controller.wallpaperList.length,
            crossAxisCount: 2,
            mainAxisSpacing: 20.w,
            crossAxisSpacing: 20.w,
            padding: EdgeInsets.fromLTRB(
              16,
              32,
              16,
              MediaQuery.of(context).padding.bottom,
            ).w,
            itemBuilder: (context, index) {
              ImageModel item = controller.wallpaperList[index];
              return GestureDetector(
                onTap: () => controller.onTapItem(index),
                child: ImageNetworkWidget(
                  url: item.imageUrl,
                  aspectRatio: item.width! / item.height!,
                  radius: 14.r,
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}