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(),
            Container(
              height: 1.w,
              width: double.infinity,
              margin: const EdgeInsets.symmetric(horizontal: 58,vertical: 15).w,
              decoration: BoxDecoration(
                color: Colors.white.withOpacity(.5),
              ),
            ),
            _buildOptions(),
          ],
        ),
      ),
    );
  }

  Widget _buildUserinfo() {
    return GetBuilder<SettingsController>(
      id: "userinfo",
      builder: (_) {
        return Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Column(
              children: [
                GestureDetector(
                  onTap: controller.toEdit,
                  child: Container(
                    height: 100.w,
                    width: 100.w,
                    clipBehavior: Clip.hardEdge,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(80).r,
                      border: Border.all(color: Colors.white),
                    ),
                    child: Image.asset(
                      fit: BoxFit.cover,
                      controller.homeController.userinfo.avatar ??
                          Assets.iconPlaceholderAvatar,
                    ),
                  ),
                ),
                14.verticalSpace,
                Text(
                  controller.homeController.userinfo.username ?? "————",
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 21.sp,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ],
            ),
          ],
        );
      },
    );
  }

  Widget _buildOptions() {
    return ListView.separated(
      shrinkWrap: true,
      padding: EdgeInsets.zero,
      itemCount: controller.options.length,
      itemBuilder: (context, index) {
        return Material(
          color: Colors.transparent,
          child: InkWell(
            onTap: () => controller.settingOptionOnTap(index),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  controller.options[index],
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 22.sp,
                  ),
                )
              ],
            ),
          ),
        );
      },
      separatorBuilder: (context, index) {
        return Container(
          height: 16.w,
          color: Colors.transparent,
        );
      },
    );
  }
}