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_manager.dart';
import 'package:trans_lark/page/translator_result/translator_result_controller.dart';
import 'package:trans_lark/util/t_object_utils.dart';
import 'package:trans_lark/widget/t_base_appbar_widget.dart';
import 'package:trans_lark/widget/t_language_result_bar_widget.dart';

class TranslatorResultView extends GetView<TranslatorResultController> {
  const TranslatorResultView({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage(Assets.imagesTranslatorResultBackground),
          fit: BoxFit.fill,
        ),
      ),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: _buildAppbar(),
        body: _buildBody(),
      ),
    );
  }

  TBaseAppbarWidget _buildAppbar() {
    return TBaseAppbarWidget(
      backgroundColor: Colors.transparent,
      titleWidget: TLanguageResultBarWidget(
        fromLanguage: controller.isHistory
            ? (controller.fromLanguage != null ? controller.fromLanguage! : '')
            : TranslateManager().fromLanguageEntity.value.languageName,
        toLanguage: controller.isHistory
            ? (controller.toLanguage != null ? controller.toLanguage! : '')
            : TranslateManager().toLanguageEntity.value.languageName,
      ),
    );
  }

  Widget _buildBody() {
    return ListView(
      padding: const EdgeInsets.symmetric(vertical: 20),
      children: [
        _buildFromWidget(),
        _buildToWidget(),
      ],
    );
  }

  Widget _buildFromWidget() {
    return Obx(() => Padding(
          padding: const EdgeInsets.symmetric(horizontal: 24),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Expanded(
                    child: Text(
                      controller.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: () => controller.onTextToSpeech(
                  controller.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,
              )
            ],
          ),
        ));
  }

  Widget _buildToWidget() {
    return 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(
                      TranslateManager().toLanguageEntity.value.languageName,
                      style: const TextStyle(
                        color: Color(0xff949494),
                        fontSize: 16,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ),
                  const SizedBox(width: 20),
                  Visibility(
                    visible: !controller.isTranslationCompleted.value,
                    child: const SizedBox(
                      width: 20,
                      height: 20,
                      child: CircularProgressIndicator(
                        strokeWidth: 2,
                        color: Color(0xff4ECA8C),
                      ),
                    ),
                  ),
                ],
              );
            }),
          ),
          Obx(
            () => Text(
              controller.targetText.value,
              style: const TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.w600,
                color: Color(0xff152A3D),
              ),
            ),
          ),
          const SizedBox(
            height: 20,
          ),
          Obx(() {
            return Visibility(
              visible: TObjectUtils.isNotEmptyStr(controller.targetText.value),
              child: Row(
                children: [
                  GestureDetector(
                    onTap: () => controller.onTextToSpeech(
                      controller.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: controller.copyText,
                    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: controller.toFullScreen,
                    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,
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            );
          }),
        ],
      ),
    );
  }
}