import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:wallpaperx/generated/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,
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage(Assets.imagesSettingBackground),
            fit: BoxFit.cover,
          ),
        ),
        padding:
            EdgeInsets.only(top: MediaQuery.of(context).padding.top + 70).w,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildUserinfo(),
            15.verticalSpace,
            Container(
              height: 1.w,
              width: double.infinity,
              margin: const EdgeInsets.symmetric(horizontal: 58).w,
              decoration: BoxDecoration(
                color: Colors.white.withOpacity(.5),
              ),
            ),
            15.verticalSpace,
            _buildOptionItem(),
            // 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.imagesPlaceholder),
                  ),
                ),
                16.verticalSpace,
                Text(
                  controller.homeController.userinfo.username ?? "-----",
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20.sp,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ],
            ),
          ],
        );
      },
    );
  }

  Widget _buildOptionItem() {
    return ListView.separated(
      shrinkWrap: true,
      padding: EdgeInsets.zero,
      itemCount: controller.options.length,
      itemBuilder: (context, 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,
                  ),
                )
              ],
            ),
          ),
        );
      },
      separatorBuilder: (context, index) {
        return Container(
          height: 15.w,
          color: Colors.transparent,
        );
      },
    );
  }
}