import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:trans_lark/entity/scene_entity.dart';
import 'package:trans_lark/generated/assets.dart';
import 'package:trans_lark/widget/base_appbar.dart';
import 'package:trans_lark/widget/base_scrollbar.dart';
import 'package:trans_lark/widget/language_scene_bar.dart';

import 'scene_list_controller.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffF5F6F8),
      appBar: BaseAppBar(
        titleWidget: LanguageSceneBar(
          fromLanguage: controller.fromLanguage,
          toLanguage: controller.toLanguage,
          onTapFrom: controller.onTapFrom,
          onTapTo: controller.onTapTo,
        ),
      ),
      body: SafeArea(
        top: false,
        child: Column(
          children: [
            Expanded(
              child: BaseScrollbar(
                child: ListView.separated(
                  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                  itemCount: controller.sceneList.length,
                  itemBuilder: (context, index) {
                    var item = controller.sceneList[index];
                    return _buildItem(item);
                  },
                  separatorBuilder: (context, index) {
                    return const SizedBox(height: 12);
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildItem(SceneList item) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 20),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Column(
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Obx(() {
                return Text(
                  controller.fromLanguage.value.languageName,
                  overflow: TextOverflow.ellipsis,
                  style: const TextStyle(
                    color: Color(0xffC2C3C5),
                    fontSize: 12,
                    fontWeight: FontWeight.w500,
                  ),
                );
              }),
              const SizedBox(height: 8),
              Row(
                children: [
                  Expanded(
                    child: Obx(() {
                      return Text(
                        controller.getSentence(true, item),
                        style: const TextStyle(
                          color: Color(0xff152A3D),
                          fontSize: 16,
                          fontWeight: FontWeight.w500,
                        ),
                      );
                    }),
                  ),
                  GestureDetector(
                    onTap: () => controller.translatorTtsPlay(true, item),
                    child: ClipOval(
                      child: Container(
                        width: 24,
                        height: 24,
                        color: const Color(0xff4ECA8C).withOpacity(0.2),
                        child: FittedBox(
                          fit: BoxFit.none,
                          child: SvgPicture.asset(
                            Assets.svgSpeaker,
                            width: 16,
                            height: 16,
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 20),
            ],
          ),
          Container(
            width: double.infinity,
            height: 1,
            color: const Color(0xffF4F4F4),
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(height: 20),
              Obx(() {
                return Text(
                  controller.toLanguage.value.languageName,
                  overflow: TextOverflow.ellipsis,
                  style: const TextStyle(
                    color: Color(0xffC2C3C5),
                    fontSize: 12,
                    fontWeight: FontWeight.w500,
                  ),
                );
              }),
              const SizedBox(height: 8),
              Row(
                children: [
                  Expanded(
                    child: Obx(() {
                      return Text(
                        controller.getSentence(false, item),
                        style: const TextStyle(
                          color: Color(0xff152A3D),
                          fontSize: 16,
                          fontWeight: FontWeight.w500,
                        ),
                      );
                    }),
                  ),
                  GestureDetector(
                    onTap: () => controller.translatorTtsPlay(false, item),
                    child: ClipOval(
                      child: Container(
                        width: 24,
                        height: 24,
                        color: const Color(0xff4ECA8C).withOpacity(0.2),
                        child: FittedBox(
                          fit: BoxFit.none,
                          child: SvgPicture.asset(
                            Assets.svgSpeaker,
                            width: 16,
                            height: 16,
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}