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/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: 300.w,
      backgroundColor: Colors.black,
      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),
              )),
          82.verticalSpace,
          Expanded(
            child: MasonryGridView.count(
              itemCount: controller.categoryList.length,
              crossAxisCount: 2,
              mainAxisSpacing: 8.w,
              crossAxisSpacing: 8.w,
              padding: EdgeInsets.fromLTRB(
                      0, 0, 16, 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(
                        margin: EdgeInsets.symmetric(
                            vertical: 16.w, horizontal: 9.w),
                        child: Text(
                          controller.categoryList[index],
                          style: TextStyle(
                            fontSize: 14.sp,
                            color: Colors.white,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ),
                    ],
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}