import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:hello_wallpaper/common/components/image_network_widget.dart';
import 'package:hello_wallpaper/models/wallpaper_model.dart';
import 'package:hello_wallpaper/modules/catalog/catalog_controller.dart';

class CatalogView extends GetView<CatalogController> {
  const CatalogView({super.key});

  @override
  Widget build(BuildContext context) {
    Get.put(CatalogController());
    return GetBuilder<CatalogController>(
      builder: (logic) {
        return MediaQuery.removePadding(
          context: context,
          removeTop: true,
          child: Scrollbar(
            controller: controller.scrollController,
            child: ListView.separated(
              controller: controller.scrollController,
              physics: const BouncingScrollPhysics(),
              padding: const EdgeInsets.symmetric(horizontal: 20).w,
              itemCount: controller.wallpaperModelList.length,
              itemBuilder: (context, index) {
                return _buildCatalogItem(controller.wallpaperModelList[index], index);
              },
              separatorBuilder: (context, index) {
                return SizedBox(height: 24.h);
              },
            ),
          ),
        );
      },
    );
  }

  Widget _buildCatalogItem(WallpaperModel item, int index) {
    final wallpaperList = controller.getRandomFiveList(item);
    return Column(
      children: [
        Row(
          children: [
            Expanded(
              child: Text(
                '${item.name}',
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24.sp,
                  fontWeight: FontWeight.w600,
                ),
              ),
            ),
            if (item.data != null && item.data!.isNotEmpty) ...[
              SizedBox(width: 10.w),
              GestureDetector(
                onTap: () => controller.onTapSingleCls(item),
                child: Row(
                  children: [
                    Text(
                      '${item.data!.length} More',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 14.sp,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    Icon(Icons.keyboard_arrow_right, size: 18.w),
                  ],
                ),
              ),
            ],
          ],
        ),
        SizedBox(height: 7.h),
        SizedBox(
          height: 233.h,
          child: ShaderMask(
            shaderCallback: (Rect bounds) {
              return const LinearGradient(
                colors: [Colors.transparent, Color(0xFF0C0C15), Color(0xFF0C0C15), Colors.transparent],
                stops: [0.0, 0.1, 0.9, 1],
              ).createShader(bounds);
            },
            blendMode: BlendMode.dstIn,
            child: ListView.separated(
              physics: const BouncingScrollPhysics(),
              scrollDirection: Axis.horizontal,
              itemCount: wallpaperList.length,
              itemBuilder: (context, index) {
                return _buildWallpaperItem(wallpaperList, wallpaperList[index], index);
              },
              separatorBuilder: (context, index) {
                return SizedBox(width: 8.w);
              },
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildWallpaperItem(List<WallpaperData> wallpaperList, WallpaperData item, int index) {
    return GestureDetector(
      onTap: () => controller.onTapItem(wallpaperList, index),
      child: Hero(
        tag: '$index-${item.original}',
        child: ImageNetworkWidget(
          url: item.previewThumb,
          width: 136.w,
          height: double.infinity,
          radius: 8.r,
        ),
      ),
    );
  }
}