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/t_divider_widget.dart';

import 'settings_controller.dart';

class SettingsWidget extends StatelessWidget {
  SettingsWidget({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: _buildSettingBody(context),
    );
  }

  Widget _buildSettingBody(context) {
    return Stack(
      children: [
        Image.asset(
          Assets.imagesHomeBackground,
          width: MediaQuery.of(context).size.width,
          height: double.infinity,
          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: TDividerWidget(),
            ),
            _buildSettingItems(),
            Image.asset(
              Assets.imagesSetrringSubscript,
              width: 136,
              height: 136,
              fit: BoxFit.cover,
            ),
            const SizedBox(height: 58),
          ],
        ),
      ],
    );
  }

  Widget _buildSettingItems() {
    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, 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,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}