import 'package:flutter/material.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/global/global_config.dart';
import 'package:trans_lark/page/scene_category_item/scene_category_item_controller.dart';
import 'package:trans_lark/widget/t_base_appbar_widget.dart';
import 'package:trans_lark/widget/t_base_scrollbar_widget.dart';
import 'package:trans_lark/widget/t_language_scene_bar_widget.dart';

class SceneCategoryItemView extends GetView<SceneCategoryItemController> {
  const SceneCategoryItemView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffF5F6F8),
      appBar: TBaseAppbarWidget(
        titleWidget: TLanguageSceneBarWidget(
          fromLanguage: controller.fromLanguage,
          toLanguage: controller.toLanguage,
          onTapFrom: controller.onChangeFromLanguage,
          onTapTo: controller.onChangeToLanguage,
        ),
      ),
      body: _buildList(),
    );
  }

  Widget _buildList() {
    return TBaseScrollbarWidget(
      child: ListView.separated(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        itemCount: controller.sceneList.length,
        itemBuilder: (context, index) {
          var item = controller.sceneList[index];
          return Container(
            padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 20),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(12),
            ),
            child: Obx(
                  () => Column(
                children: [
                  _buildScene(
                    item,
                    isFrom: true,
                    languageName: controller.fromLanguage.value.languageName,
                  ),
                  Container(
                    width: double.infinity,
                    height: 1,
                    color: const Color(0xffF4F4F4),
                    margin: const EdgeInsets.symmetric(vertical: 20),
                  ),
                  _buildScene(
                    item,
                    isFrom: false,
                    languageName: controller.toLanguage.value.languageName,
                  ),
                ],
              ),
            ),
          );
        },
        separatorBuilder: (context, index) {
          return const SizedBox(height: 12);
        },
      ),
    );
  }

  Widget _buildScene(
    SceneList item, {
    required bool isFrom,
    required String languageName,
  }) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          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(isFrom, item),
                  style: const TextStyle(
                    color: Color(0xff152A3D),
                    fontSize: 16,
                    fontWeight: FontWeight.w500,
                  ),
                );
              }),
            ),
            GestureDetector(
              onTap: () => controller.translatorTtsPlay(isFrom, item),
              child: ClipOval(
                child: Container(
                  width: 24,
                  height: 24,
                  color: GlobalConfig.appColor.withOpacity(.2),
                  child: FittedBox(
                    fit: BoxFit.none,
                    child: Image.asset(
                      Assets.imagesSpeakerIcon,
                      color: GlobalConfig.appColor,
                      width: 16,
                      height: 16,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }
}
