import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_translate/common/components/base_appbar.dart';
import 'package:flutter_translate/global/app_general.dart';
import 'package:flutter_translate/model/scene_model.dart';
import 'package:flutter_translate/pages/scene_list/components/language_selector_bar.dart';
import 'package:flutter_translate/pages/scene_list/scene_list_controller.dart';
import 'package:get/get.dart';
import 'package:quds_ui_kit/animations/quds_animated_icon.dart';

class SceneListView extends GetView<SceneListController> {
  const SceneListView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffF5F6F8),
      appBar: const BaseAppbar(
        titleWidget: Expanded(child: LanguageSelectorBar()),
      ),
      body: _sceneList(),
    );
  }

  Widget _sceneList() {
    return ListView.separated(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12).w,
      itemCount: controller.sceneList.length,
      itemBuilder: (context, index) {
        var item = controller.sceneList[index];
        return Container(
          padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 20).w,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(12.r),
          ),
          child: Obx(
            () => Column(
              children: [
                _scene(
                  item,
                  isFrom: true,
                  languageName: controller.fromLanguage.value.name,
                  index: index,
                ),
                Container(
                  width: double.infinity,
                  margin: const EdgeInsets.symmetric(vertical: 20).w,
                  child: divider,
                ),
                _scene(
                  item,
                  isFrom: false,
                  languageName: controller.toLanguage.value.name,
                  index: index,
                ),
              ],
            ),
          ),
        );
      },
      separatorBuilder: (context, index) {
        return 12.verticalSpace;
      },
    );
  }

  Widget _scene(
    SceneList item, {
    required bool isFrom,
    required String languageName,
    required int index,
  }) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          languageName,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(
            color: const Color(0xffC2C3C5),
            fontSize: 12.sp,
            fontWeight: FontWeight.w500,
          ),
        ),
        8.verticalSpace,
        Row(
          children: [
            Expanded(
              child: Text(
                controller.getSentence(isFrom, item),
                style: TextStyle(
                  color: const Color(0xff152A3D),
                  fontSize: 16.sp,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
            GestureDetector(
              onTap: () =>
                  controller.playTranslationResults(isFrom, item, index),
              child: ClipOval(
                child: Container(
                  width: 24.w,
                  height: 24.w,
                  color: Color(controller.homeController.appColor.value)
                      .withOpacity(.2),
                  child: QudsAnimatedIcon(
                    color: Color(controller.homeController.appColor.value),
                    iconData: AnimatedIcons.pause_play,
                    showStartIcon: (isFrom
                            ? controller.isPlayingFrom.value
                            : controller.isPlayingTo.value) &&
                        index == controller.playIndex.value,
                  ),
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }
}