import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_translate/global/app_config.dart';
import 'package:flutter_translate/generated/assets.dart';
import 'package:flutter_translate/global/app_general.dart';
import 'package:flutter_translate/pages/home/home_controller.dart';
import 'package:get/get.dart';

class SettingDrawer extends GetView<HomeController> {
  const SettingDrawer({super.key});

  @override
  Widget build(BuildContext context) {
    return Drawer(
      width: 1.sw * 0.9,
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 12).w,
        child: SafeArea(
          child: Column(
            children: [
              _settingTitle(),
              15.verticalSpace,
              divider,
              _settingItems(),
              // Image.asset(
              //   Assets.gifSettingSubscript,
              //   width: 136.w,
              //   height: 136.w,
              //   fit: BoxFit.cover,
              // ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _settingTitle() {
    return Row(
      children: [
        ClipRRect(
          borderRadius: BorderRadius.circular(6),
          child: Image.asset(
            Assets.launcherIcon,
            width: 48,
            height: 48,
            fit: BoxFit.cover,
          ),
        ),
        16.horizontalSpace,
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text(
                appName,
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 22,
                  fontWeight: FontWeight.w500,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
              Obx(() {
                return Text(
                  controller.versionName.value,
                  style: const TextStyle(
                    color: Color(0xff979797),
                    fontSize: 12,
                    overflow: TextOverflow.ellipsis,
                  ),
                );
              }),
            ],
          ),
        ),
      ],
    );
  }

  Widget _settingItems() {
    return Expanded(
      child: ListView.builder(
        itemCount: controller.options.length,
        itemBuilder: (context, index) {
          var item = controller.options[index];
          return Material(
            color: Colors.transparent,
            child: InkWell(
              onTap: () => controller.clickItem(index),
              child: Container(
                padding: const EdgeInsets.symmetric(
                  vertical: 15,
                ).w,
                child: Row(
                  children: [
                    Expanded(
                      child: Text(
                        item,
                        style: TextStyle(
                          color: const Color(0xff222F38),
                          fontSize: 16.sp,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 10).w,
                      child: Icon(
                        Icons.keyboard_arrow_right_rounded,
                        color: const Color(0xffBCC0CE),
                        size: 20.sp,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}