import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:translator_lux/page/translator_result/translator_result_logic.dart';
import 'package:translator_lux/page/translator_result/translator_result_state.dart';
import 'package:translator_lux/util/image_asset.dart';
import 'package:translator_lux/util/svg_asset.dart';
import 'package:translator_lux/util/tts_util.dart';
import 'package:translator_lux/widget/tranlator_from_to.dart';
import 'package:translator_lux/widget/translate_text_full_screen_page.dart';

/// @description:
/// @author
/// @date: 2024-06-27 16:53:29
class TranslatorResultPage extends StatefulWidget {
  static String routName = "/translateResult";

  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: BoxDecoration(
          image: DecorationImage(
            fit: BoxFit.cover,
            image: AssetImage(ImageAsset.translatorResultBackground),
          ),
        ),
        child: SafeArea(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 10),
            child: Column(
              children: [
                Row(
                  children: [
                    IconButton(
                      onPressed: () {
                        Get.back();
                      },
                      icon: const Icon(
                        Icons.arrow_back_ios,
                      ),
                    ),
                    const Expanded(child: TranslatorFromTo()),
                  ],
                ),
                Expanded(
                    child: ListView(
                  children: [
                    Obx(
                      () => Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 20),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Padding(
                              padding: const EdgeInsets.only(top: 20),
                              child: Row(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Expanded(
                                    child: Text(
                                      state.sourceText.value,
                                      style: const TextStyle(
                                        fontSize: 20,
                                        fontWeight: FontWeight.w600,
                                      ),
                                    ),
                                  ),
                                  GestureDetector(
                                    onTap: () {
                                      Get.back();
                                    },
                                    child: Container(
                                      width: 30,
                                      height: 30,
                                      decoration: BoxDecoration(
                                          color: const Color(0xffF4F4F6),
                                          borderRadius:
                                              BorderRadius.circular(15)),
                                      child: const Icon(
                                        Icons.close,
                                        size: 20,
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            ),
                            const SizedBox(
                              height: 30,
                            ),
                            GestureDetector(
                              onTap: () {
                                if (state.sourceText.value != "") {
                                  TtsUtil.translatorTtsPlay(
                                      state.sourceText.value);
                                }
                              },
                              child: Container(
                                width: 32,
                                height: 32,
                                padding: const EdgeInsets.all(5),
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(16),
                                  color:
                                      const Color.fromARGB(104, 78, 202, 140),
                                ),
                                child: SvgPicture.asset(
                                  SvgAsset.speaker,
                                ),
                              ),
                            ),
                            const SizedBox(
                              height: 30,
                            ),
                            const Divider(
                              height: 1,
                            )
                          ],
                        ),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 20),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          const Padding(
                            padding: EdgeInsets.symmetric(vertical: 20),
                            child: Text(
                              "Spanish",
                              style: TextStyle(
                                color: Color(0xff949494),
                                fontSize: 16,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ),
                          Obx(
                            () => Text(
                              state.targetText.value,
                              style: const TextStyle(
                                fontSize: 20,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ),
                          const SizedBox(
                            height: 20,
                          ),
                          Row(
                            children: [
                              Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: GestureDetector(
                                  onTap: () {
                                    if (state.targetText.value != "") {
                                      TtsUtil.translatorTtsPlay(
                                          state.targetText.value);
                                    }
                                  },
                                  child: Container(
                                    width: 32,
                                    height: 32,
                                    padding: const EdgeInsets.all(5),
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(16),
                                      color: const Color.fromARGB(
                                          104, 78, 202, 140),
                                    ),
                                    child: SvgPicture.asset(
                                      SvgAsset.speaker,
                                    ),
                                  ),
                                ),
                              ),
                              Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: GestureDetector(
                                  onTap: () {
                                    if (state.targetText.value != "") {
                                      Clipboard.setData(
                                        ClipboardData(
                                            text: state.targetText.value),
                                      );
                                    }
                                  },
                                  child: Container(
                                    width: 32,
                                    height: 32,
                                    padding: const EdgeInsets.all(5),
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(16),
                                      color: const Color(0xffF4F4F6),
                                    ),
                                    child: Image.asset(ImageAsset.copy),
                                  ),
                                ),
                              ),
                              Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: GestureDetector(
                                  onTap: () {
                                    Get.to(
                                        () =>
                                            const TranslateTextFullScreenPage(),
                                        arguments: {
                                          "data": state.targetText.value
                                        });
                                  },
                                  child: Container(
                                    width: 32,
                                    height: 32,
                                    padding: const EdgeInsets.all(5),
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(16),
                                      color: const Color(0xffF4F4F6),
                                    ),
                                    child: Image.asset(ImageAsset.fullScreen),
                                  ),
                                ),
                              ),
                            ],
                          )
                        ],
                      ),
                    ),
                    const SizedBox(
                      height: 50,
                    ),
                  ],
                ))
              ],
            ),
          ),
        ),
      ),
    );
  }
}