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/common/utils/object_utils.dart';
import 'package:flutter_translate/generated/assets.dart';
import 'package:flutter_translate/global/app_general.dart';
import 'package:flutter_translate/manager/translate.dart';
import 'package:flutter_translate/pages/translated_text/components/language_text_bar.dart';
import 'package:flutter_translate/pages/translated_text/translated_text_controller.dart';
import 'package:get/get.dart';
import 'package:quds_ui_kit/animations/quds_animated_icon.dart';

class TranslatedTextView extends GetView<TranslatedTextController> {
  const TranslatedTextView({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            Color(controller.homeController.appColor.value).withOpacity(0.2),
            Colors.white,
          ],
          begin: const FractionalOffset(0, -7),
          end: const FractionalOffset(0, 1),
        ),
      ),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: const BaseAppbar(
          backgroundColor: Colors.transparent,
          titleWidget: Expanded(child: LanguageTextBar()),
        ),
        body: Obx(
          () => ListView(
            padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20).w,
            children: [
              _fromTranslate(),
              Container(
                margin: const EdgeInsets.symmetric(vertical: 20).w,
                child: divider,
              ),
              _toTranslate(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _fromTranslate() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          Translate().fromLanguageEntity.value.name,
          style: TextStyle(
            color: const Color(0xff949494),
            fontSize: 16.sp,
            fontWeight: FontWeight.w500,
          ),
        ),
        20.verticalSpace,
        Text(
          controller.sourceText.value,
          style: TextStyle(
            fontSize: 20.sp,
            fontWeight: FontWeight.w600,
            color: const Color(0xff152A3D),
          ),
        ),
        20.verticalSpace,
        GestureDetector(
          onTap: () => controller.onTextToSpeech(
            controller.sourceText.value,
            "from",
          ),
          child: ClipOval(
            child: Container(
              width: 32.w,
              height: 32.w,
              color: Color(controller.homeController.appColor.value),
              child: QudsAnimatedIcon(
                iconSize: 28.w,
                color: Colors.white,
                iconData: AnimatedIcons.pause_play,
                showStartIcon: controller.isPlayingFrom.value,
              ),
            ),
          ),
        ),
      ],
    );
  }

  Widget _toTranslate() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Flexible(
              child: Text(
                Translate().toLanguageEntity.value.name,
                style: TextStyle(
                  color: const Color(0xff949494),
                  fontSize: 16.sp,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
            20.horizontalSpace,
            Visibility(
              visible: !controller.isTranslationCompleted.value,
              child: SizedBox(
                width: 20.w,
                height: 20.w,
                child: CircularProgressIndicator(
                  strokeWidth: 2,
                  color: Color(controller.homeController.appColor.value),
                ),
              ),
            ),
          ],
        ),
        20.verticalSpace,
        Text(
          controller.targetText.value,
          style: TextStyle(
            fontSize: 20.sp,
            fontWeight: FontWeight.w600,
            color: const Color(0xff152A3D),
          ),
        ),
        20.verticalSpace,
        Visibility(
          visible: ObjectUtils.isNotEmptyStr(controller.targetText.value),
          child: Row(
            children: [
              GestureDetector(
                onTap: () => controller.onTextToSpeech(
                  controller.targetText.value,
                  "to",
                ),
                child: ClipOval(
                  child: Container(
                    width: 32.w,
                    height: 32.w,
                    color: Color(controller.homeController.appColor.value),
                    child: QudsAnimatedIcon(
                      iconSize: 28.w,
                      color: Colors.white,
                      iconData: AnimatedIcons.pause_play,
                      showStartIcon: controller.isPlayingTo.value,
                    ),
                  ),
                ),
              ),
              16.horizontalSpace,
              GestureDetector(
                onTap: controller.copyText,
                child: ClipOval(
                  child: Container(
                    width: 32.w,
                    height: 32.w,
                    color: const Color(0xffF4F4F6),
                    padding: const EdgeInsets.all(5).w,
                    child: Image.asset(Assets.iconCopy),
                  ),
                ),
              ),
              // 16.horizontalSpace,
              // GestureDetector(
              //   onTap: controller.toFullScreen,
              //   child: ClipOval(
              //     child: Container(
              //       width: 32.w,
              //       height: 32.w,
              //       color: const Color(0xffF4F4F6),
              //       padding: const EdgeInsets.all(5).w,
              //       child: Image.asset(Assets.iconFullScreen),
              //     ),
              //   ),
              // ),
            ],
          ),
        ),
      ],
    );
  }
}