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 DrawerView extends StatelessWidget {
  const DrawerView({super.key});

  @override
  Widget build(BuildContext context) {
    HomeController controller = Get.find<HomeController>();
    return Drawer(
      width: 320.w,
      backgroundColor: Colors.black,
      child: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage(Assets.imagesHomeBackground),
            fit: BoxFit.cover,
          ),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SizedBox(height: MediaQuery.of(context).padding.top + 15.w),
            Container(
              margin: EdgeInsets.only(left: 16.w),
              child: Text(
                "Style classification",
                style: TextStyle(
                    fontSize: 24.sp,
                    fontWeight: FontWeight.w600,
                    color: Colors.white),
              ),
            ),
            10.verticalSpace,
            Expanded(
              child: MasonryGridView.count(
                itemCount: controller.categoryList.length,
                crossAxisCount: 2,
                mainAxisSpacing: 10.w,
                crossAxisSpacing: 10.w,
                padding: EdgeInsets.fromLTRB(
                  8,
                  0,
                  8,
                  MediaQuery.of(context).padding.bottom + 10,
                ).w,
                itemBuilder: (context, index) {
                  return GestureDetector(
                    onTap: () => controller
                        .onTapToCategory(controller.categoryList[index]),
                    child: Stack(
                      alignment: AlignmentDirectional.bottomStart,
                      children: [
                        Container(
                          clipBehavior: Clip.hardEdge,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(12.w),
                          ),
                          child: Image.asset(
                            controller.categoryImgList[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.categoryList[index],
                            style: TextStyle(
                              fontSize: 14.sp,
                              color: Colors.white,
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                        ),
                      ],
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}