import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:trans_lark/generated/assets.dart';
import 'package:trans_lark/global/global_config.dart';
import 'package:trans_lark/widget/divider_widget.dart';

import 'settings_controller.dart';

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

  final controller = Get.put(SettingsController());

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height * 0.77,
      clipBehavior: Clip.antiAlias,
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(26), topRight: Radius.circular(26),
        ),
      ),
      child: Stack(
        children: [
          Image.asset(
            Assets.imagesHomeBackground,
            width: MediaQuery.of(context).size.width,
            height: 384,
            fit: BoxFit.fitWidth,
          ),
          Column(
            children: [
              const SizedBox(height: 46),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 34),
                child: Row(
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(6),
                      child: Image.asset(
                        Assets.launcherIconLauncherIcon,
                        width: 48,
                        height: 48,
                        fit: BoxFit.cover,
                      ),
                    ),
                    const SizedBox(width: 16),
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          const Text(
                            GlobalConfig.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,
                              ),
                            );
                          }),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 15),
              // _buildItem('Give a good review', -1),
              // const SizedBox(height: 15),
              const Padding(
                padding: EdgeInsets.symmetric(horizontal: 34),
                child: DividerWidget(),
              ),
              _buildListView(),
              Image.asset(
                Assets.imagesRabbitSayGood,
                width: 90,
                height: 90,
                fit: BoxFit.cover,
              ),
              const SizedBox(height: 58),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildListView() {
    return Expanded(
      child: ListView.builder(
        itemCount: controller.options.length,
        itemBuilder: (context, index) {
          var item = controller.options[index];
          return _buildItem(item, index);
        },
      ),
    );
  }

  Widget _buildItem(String item, int index) {
    return Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: () => controller.itemOnTap(index),
        child: Container(
          padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 30),
          child: Row(
            children: [
              Expanded(
                child: Text(
                  item,
                  style: const TextStyle(
                    color: Color(0xff222F38),
                    fontSize: 16,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ),
              const Padding(
                padding: EdgeInsets.only(left: 10),
                child: Icon(
                  Icons.keyboard_arrow_right_rounded,
                  color: Color(0xffBCC0CE),
                  size: 20,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}