import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:wallpaperx/common/components/image_network_widget.dart';
import 'package:wallpaperx/common/components/keep_alive_wrapper.dart';
import 'package:wallpaperx/common/components/navigation_bar/custom_appbar.dart';
import 'package:wallpaperx/entity/image_model.dart';
import 'package:wallpaperx/generated/assets.dart';
import 'package:wallpaperx/page/category/category_controller.dart';

class CategoryView extends GetView<CategoryController> {
  const CategoryView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage(Assets.imagesRecommendTopBackground),
            fit: BoxFit.cover,
          ),
        ),
        child: Obx(
          () => Column(
            children: [
              _buildCategoryBar(controller.title.value),
              _buildCategoryBody(context),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildCategoryBar(title) {
    return CustomAppbar(
      title,
      backgroundColor: Colors.transparent,
      titleStyle: TextStyle(
        color: Colors.white,
        fontSize: 24.sp,
        fontWeight: FontWeight.w600,
      ),
    );
  }

  Widget _buildCategoryBody(context) {
    return Expanded(
      child: MediaQuery.removePadding(
        context: context,
        removeTop: true,
        child: Scrollbar(
          controller: controller.scrollController,
          child: ListView.separated(
            controller: controller.scrollController,
            physics: const BouncingScrollPhysics(),
            padding: EdgeInsets.only(
              top: 12,
              bottom: MediaQuery.of(context).padding.bottom,
            ).w,
            itemCount: controller.categoryData.length,
            itemBuilder: (context, index) {
              List keys = controller.categoryData.keys.toList();
              List list = controller.categoryData[keys[index]] ?? [];
              List<ImageModel> imageModels =
                  list.map((e) => ImageModel.fromJson(e)).toList();
              return _buildCatalogItem(keys[index], imageModels);
            },
            separatorBuilder: (context, index) {
              return SizedBox(height: 15.h);
            },
          ),
        ),
      ),
    );
  }

  Widget _buildCatalogItem(title, List<ImageModel> imageModels) {
    return Column(
      children: [
        Row(
          children: [
            16.horizontalSpace,
            Expanded(
              child: Text(
                '$title',
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 18.sp,
                ),
              ),
            ),
            if (imageModels.isNotEmpty) ...[
              SizedBox(width: 15.w),
              GestureDetector(
                onTap: () => controller.toCategoryItem(title),
                child: Row(
                  children: [
                    Text(
                      'More',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 12.sp,
                      ),
                    ),
                    Icon(
                      Icons.keyboard_arrow_right,
                      color: Colors.white,
                      size: 12.w,
                    ),
                  ],
                ),
              ),
            ],
          ],
        ),
        10.verticalSpace,
        SizedBox(
          height: 210.h,
          child: ListView.separated(
            physics: const BouncingScrollPhysics(),
            scrollDirection: Axis.horizontal,
            padding: const EdgeInsets.symmetric(horizontal: 16).w,
            itemCount: imageModels.length,
            itemBuilder: (context, index) {
              return GestureDetector(
                onTap: () => controller.toImageDetail(index, imageModels),
                child: KeepAliveWrapper(
                  child: ImageNetworkWidget(
                    url: imageModels[index].imageUrl,
                    width: 123.w,
                    height: double.infinity,
                    aspectRatio: 126 / 180,
                    radius: 14.r,
                  ),
                ),
              );
            },
            separatorBuilder: (context, index) {
              return SizedBox(width: 10.w);
            },
          ),
        ),
      ],
    );
  }
}