import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:tone_snap/generated/assets.dart';
import 'package:tone_snap/modules/sideb/widgets/music_appbar.dart';
import 'package:tone_snap/modules/sideb/widgets/remove_padding_music_bar.dart';

import 'settings_controller.dart';

class SettingsView extends StatelessWidget {
  SettingsView({super.key});

  final controller = Get.find<SettingsController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Stack(
        children: [
          _buildPageBg(),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const MusicAppbar(
                title: 'Setting',
              ),
              _buildList(),
              const RemovePaddingMusicBar(),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildPageBg() {
    return Image.asset(
      Assets.sideBSettingBg,
      width: 1.sw,
      height: 1.sh,
      fit: BoxFit.cover,
    );
  }

  Widget _buildList() {
    return Expanded(
      child: ListView.separated(
        padding: const EdgeInsets.symmetric(vertical: 20).h,
        itemCount: controller.options.length,
        itemBuilder: (context, index) {
          return _buildItem(index);
        },
        separatorBuilder: (context, index) {
          return SizedBox(height: 10.h);
        },
      ),
    );
  }

  Widget _buildItem(index) {
    return Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: () => controller.onTapItem(index),
        child: Container(
          height: 56.h,
          padding: const EdgeInsets.only(left: 21, right: 16).w,
          child: Row(
            children: [
              Image.asset(
                controller.optionIcons[index],
                width: 32.w,
                height: 32.w,
              ),
              SizedBox(width: 10.w),
              Expanded(
                child: Text(
                  controller.options[index],
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16.sp,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ),
              Image.asset(
                Assets.sideAIconChevronRight,
                width: 18.w,
                height: 18.w,
              ),
            ],
          ),
        ),
      ),
    );
  }
}