import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:wallpaperx/gen/assets.dart';
import 'package:wallpaperx/page/settings/settings_controller.dart';

class SettingsView extends GetView<SettingsController> {
  const SettingsView({super.key});

  @override
  Widget build(BuildContext context) {
    Get.put(SettingsController());
    return Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.black,
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage(Assets.settingBackground),
            fit: BoxFit.cover,
          ),
        ),
        padding:
            EdgeInsets.only(top: MediaQuery.of(context).padding.top + 74).w,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildUserinfo(),
            20.verticalSpace,
            ListView.separated(
              shrinkWrap: true,
              padding: EdgeInsets.zero,
              itemCount: controller.options.length,
              itemBuilder: (context, index) {
                return _buildOptionItem(index);
              },
              separatorBuilder: (context, index) {
                return Container(
                  height: 12.w,
                  color: Colors.transparent,
                );
              },
            ),
            // SizedBox(
            //   height: 400.w,
            //   child: ShaderMask(
            //     shaderCallback: (Rect bounds) {
            //       return LinearGradient(
            //         begin: Alignment.topCenter,
            //         end: Alignment.bottomCenter,
            //         colors: [
            //           Colors.black.withOpacity(0.0),
            //           Colors.black.withOpacity(1.0),
            //           Colors.black.withOpacity(1.0),
            //           Colors.black.withOpacity(0.0),
            //         ],
            //         stops: const [0.0, 0.1, 0.9, 1],
            //       ).createShader(bounds);
            //     },
            //     blendMode: BlendMode.dstIn,
            //     child: ListView.separated(
            //       shrinkWrap: true,
            //       padding: EdgeInsets.zero,
            //       itemCount: controller.options.length,
            //       itemBuilder: (context, index) {
            //         return _buildOptionItem(index);
            //       },
            //       separatorBuilder: (context, index) {
            //         return Container(
            //           height: 15.w,
            //           color: Colors.transparent,
            //         );
            //       },
            //     ),
            //   ),
            // ),
          ],
        ),
      ),
    );
  }

  Widget _buildUserinfo() {
    return GetBuilder<SettingsController>(
      id: "userinfo",
      builder: (_) {
        return Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Column(
              children: [
                GestureDetector(
                  onTap: controller.onTapAvatar,
                  child: Container(
                    height: 104.w,
                    width: 104.w,
                    clipBehavior: Clip.hardEdge,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(80).r,
                    ),
                    child: Image.asset(
                        fit: BoxFit.cover,
                        controller.homeController.userinfo.avatar ??
                            Assets.placeholder),
                  ),
                ),
                16.verticalSpace,
                Text(
                  controller.homeController.userinfo.username ?? "-----",
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20.sp,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                24.verticalSpace,
                Container(
                  height: 0.5.w,
                  width: 260.w,
                  decoration:
                      BoxDecoration(color: Colors.white.withOpacity(.5)),
                ),
              ],
            ),
          ],
        );
      },
    );
  }

  Widget _buildOptionItem(index) {
    return Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: () => controller.onTapItem(index),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              controller.options[index],
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                color: Colors.white,
                fontSize: 24.sp,
                fontWeight: FontWeight.w600,
              ),
            )
          ],
        ),
      ),
    );
  }
}