import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:trans_lark/generated/assets.dart';
import 'package:trans_lark/global/translate_language.dart';
import 'package:trans_lark/page/translator_result/translator_result_logic.dart';
import 'package:trans_lark/page/translator_result/translator_result_state.dart';
import 'package:trans_lark/util/obj_util.dart';
import 'package:trans_lark/widget/base_appbar.dart';
import 'package:trans_lark/widget/language_result_bar.dart';

/// @description:
/// @author
/// @date: 2024-06-27 16:53:29
class TranslatorResultPage extends StatefulWidget {
  const TranslatorResultPage({super.key});

  @override
  State<TranslatorResultPage> createState() => _TranslatorResultPageState();
}

class _TranslatorResultPageState extends State<TranslatorResultPage> {
  final TranslatorResultPageLogic logic = Get.put(TranslatorResultPageLogic());

  final TranslatorResultPageState state = Get.find<TranslatorResultPageLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: double.infinity,
        width: double.infinity,
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage(Assets.imagesTranslatorResultBackground),
            fit: BoxFit.fill,
          ),
        ),
        child: Column(
          children: [
            BaseAppBar(
              backgroundColor: Colors.transparent,
              titleWidget: LanguageResultBar(
                fromLanguage: state.isHistory
                    ? (state.fromLanguage != null ? state.fromLanguage! : '')
                    : TranslateLanguage().fromLanguageEntity.value.languageName,
                toLanguage: state.isHistory
                    ? (state.toLanguage != null ? state.toLanguage! : '')
                    : TranslateLanguage().toLanguageEntity.value.languageName,
              ),
            ),
            Expanded(
                child: ListView(
              padding: const EdgeInsets.symmetric(vertical: 20),
              children: [
                Obx(
                  () => Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 24),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Expanded(
                              child: Text(
                                state.sourceText.value,
                                style: const TextStyle(
                                  fontSize: 20,
                                  fontWeight: FontWeight.w600,
                                  color: Color(0xff152A3D),
                                ),
                              ),
                            ),
                            GestureDetector(
                              onTap: Get.back,
                              child: ClipOval(
                                child: Container(
                                  width: 30,
                                  height: 30,
                                  color: const Color(0xffF4F4F6),
                                  child: const Icon(
                                    Icons.close,
                                    size: 20,
                                  ),
                                ),
                              ),
                            )
                          ],
                        ),
                        const SizedBox(
                          height: 30,
                        ),
                        GestureDetector(
                          onTap: () => logic.translatorTtsPlay(state.sourceText.value, "from"),
                          child: ClipOval(
                            child: Container(
                              width: 32,
                              height: 32,
                              color: const Color(0x334ECA8C),
                              child: FittedBox(
                                fit: BoxFit.none,
                                child: SvgPicture.asset(
                                  Assets.svgSpeaker,
                                  width: 20,
                                  height: 20,
                                ),
                              ),
                            ),
                          ),
                        ),
                        const SizedBox(
                          height: 30,
                        ),
                        const Divider(
                          height: 1,
                        )
                      ],
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 20),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Padding(
                        padding: const EdgeInsets.symmetric(vertical: 20),
                        child: Obx(() {
                          return Row(
                            children: [
                              Flexible(
                                child: Text(
                                  TranslateLanguage().toLanguageEntity.value.languageName,
                                  style: const TextStyle(
                                    color: Color(0xff949494),
                                    fontSize: 16,
                                    fontWeight: FontWeight.w500,
                                  ),
                                ),
                              ),
                              const SizedBox(width: 20),
                              Visibility(
                                visible: !state.isTranslationCompleted.value,
                                child: const SizedBox(
                                  width: 20,
                                  height: 20,
                                  child: CircularProgressIndicator(
                                    strokeWidth: 2,
                                    color: Color(0xff4ECA8C),
                                  ),
                                ),
                              ),
                            ],
                          );
                        }),
                      ),
                      Obx(
                        () => Text(
                          state.targetText.value,
                          style: const TextStyle(
                            fontSize: 20,
                            fontWeight: FontWeight.w600,
                            color: Color(0xff152A3D),
                          ),
                        ),
                      ),
                      const SizedBox(
                        height: 20,
                      ),
                      Obx(() {
                        return Visibility(
                          visible: ObjUtil.isNotEmptyStr(state.targetText.value),
                          child: Row(
                            children: [
                              GestureDetector(
                                onTap: () => logic.translatorTtsPlay(state.targetText.value, "to"),
                                child: ClipOval(
                                  child: Container(
                                    width: 32,
                                    height: 32,
                                    color: const Color(0x334ECA8C),
                                    child: FittedBox(
                                      fit: BoxFit.none,
                                      child: SvgPicture.asset(
                                        Assets.svgSpeaker,
                                        width: 20,
                                        height: 20,
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                              const SizedBox(width: 16),
                              GestureDetector(
                                onTap: logic.copy,
                                child: ClipOval(
                                  child: Container(
                                    width: 32,
                                    height: 32,
                                    color: const Color(0xffF4F4F6),
                                    child: FittedBox(
                                      fit: BoxFit.none,
                                      child: Image.asset(
                                        Assets.imagesCopy,
                                        width: 20,
                                        height: 20,
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                              const SizedBox(width: 16),
                              GestureDetector(
                                onTap: logic.openFullScreenPage,
                                child: ClipOval(
                                  child: Container(
                                    width: 32,
                                    height: 32,
                                    color: const Color(0xffF4F4F6),
                                    child: FittedBox(
                                      fit: BoxFit.none,
                                      child: Image.asset(
                                        Assets.imagesFullScreen,
                                        width: 20,
                                        height: 20,
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        );
                      }),
                    ],
                  ),
                ),
              ],
            )),
          ],
        ),
      ),
    );
  }
}