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/generated/assets.dart';
import 'package:wallpaperx/page/home/home_controller.dart';

///个人信息侧滑页面
class HomeDrawerView extends StatelessWidget {
  const HomeDrawerView({super.key});

  @override
  Widget build(BuildContext context) {
    HomeController controller = Get.find<HomeController>();
    return Drawer(
      width: 320.w,
      child: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage(Assets.imagesRecommendTopBackground),
            fit: BoxFit.cover,
          ),
        ),
        child: SafeArea(
          bottom: false,
          child: Column(
            children: <Widget>[
              Text(
                "Style classification",
                style: TextStyle(
                    fontSize: 24.sp,
                    fontWeight: FontWeight.w600,
                    color: Colors.white),
              ),
              10.verticalSpace,
              Expanded(
                child: MasonryGridView.count(
                  itemCount: controller.category.length,
                  crossAxisCount: 2,
                  mainAxisSpacing: 10.w,
                  crossAxisSpacing: 10.w,
                  padding: EdgeInsets.fromLTRB(
                    8,
                    0,
                    8,
                    MediaQuery.of(context).padding.bottom ,
                  ).w,
                  itemBuilder: (context, index) {
                    return GestureDetector(
                      onTap: () =>
                          controller.toCategory(controller.category[index]),
                      child: Stack(
                        alignment: AlignmentDirectional.bottomStart,
                        children: [
                          Container(
                            clipBehavior: Clip.hardEdge,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(12.w),
                            ),
                            child: Image.asset(
                              controller.categoryImages[index],
                            ),
                          ),
                          Container(
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(12.w),
                              color: Colors.black54,
                            ),
                            padding: const EdgeInsets.symmetric(
                              horizontal: 9,
                            ).w,
                            margin: const EdgeInsets.symmetric(
                              vertical: 9,
                              horizontal: 9,
                            ).w,
                            child: Text(
                              controller.category[index],
                              style: TextStyle(
                                fontSize: 14.sp,
                                color: Colors.white,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ),
                        ],
                      ),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
