import 'package:flutter/cupertino.dart';
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/global/app_config.dart';
import 'package:flutter_translate/generated/assets.dart';
import 'package:flutter_translate/manager/speech_convert.dart';
import 'package:flutter_translate/pages/face_to_face/face_to_face_controller.dart';
import 'package:flutter_translate/pages/home/home_controller.dart';
import 'package:get/get.dart';
import 'package:wave/config.dart';
import 'package:wave/wave.dart';

class FaceToFaceView extends GetView<FaceToFaceController> {
  const FaceToFaceView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      extendBodyBehindAppBar: true,
      appBar: _appbar(),
      body: Container(
        color: Colors.black,
        child: Column(
          children: [
            _above(context),
            _under(context),
          ],
        ),
      ),
    );
  }

  BaseAppbar _appbar() {
    return BaseAppbar(
      backgroundColor: Colors.transparent,
      backColor: Colors.white,
      onBackTap: Get.back,
      actionWidget: InkWell(
        onTap: controller.onRotate,
        child: Image.asset(
          Assets.iconRotate,
          width: 24.sp,
          height: 24.sp,
        ),
      ),
    );
  }

  Widget _above(BuildContext context) {
    return Expanded(
      child: GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: () => controller.speak(false),
        child: SizedBox(
          width: MediaQuery.of(context).size.width,
          height: double.infinity,
          child: Stack(
            children: [
              Obx(() {
                return Visibility(
                  visible: !controller.selectedUnder.value,
                  child: SpeechConvert().isListening.value
                      ? RotatedBox(
                          quarterTurns: 2,
                          child: WaveWidget(
                            config: CustomConfig(
                              colors: [
                                Color(controller.homeController.appColor.value)
                                    .withOpacity(0.2),
                                Color(controller.homeController.appColor.value),
                              ],
                              durations: [4000, 8000],
                              heightPercentages: [-0.08, -0.08],
                            ),
                            size: const Size(double.infinity, double.infinity),
                            backgroundColor: Colors.transparent,
                            waveAmplitude: 4,
                            // wavePhase: 0,
                            // waveFrequency: 0,
                          ),
                        )
                      : Container(
                          width: double.infinity,
                          height: double.infinity,
                          color:
                              Color(controller.homeController.appColor.value),
                        ),
                );
              }),
              Obx(() {
                return SizedBox(
                  width: double.infinity,
                  height: double.infinity,
                  child: Padding(
                    padding: EdgeInsets.fromLTRB(
                      30,
                      SpeechConvert().isListening.value
                          ? MediaQuery.of(context).padding.top + kToolbarHeight
                          : 0,
                      30,
                      40,
                    ),
                    child: AnimatedRotation(
                      turns: controller.angle.value,
                      duration: const Duration(milliseconds: 500),
                      child: Column(
                        mainAxisAlignment: SpeechConvert().isListening.value
                            ? MainAxisAlignment.start
                            : MainAxisAlignment.center,
                        crossAxisAlignment: SpeechConvert().isListening.value
                            ? CrossAxisAlignment.start
                            : CrossAxisAlignment.center,
                        children: [
                          if (!controller.selectedUnder.value) ...[
                            Image.asset(
                              Assets.iconMicrophone,
                              width: 24.w,
                              height: 24.w,
                            ),
                            20.verticalSpace,
                          ],
                          Flexible(
                            child: Visibility(
                              visible: SpeechConvert().isListening.value &&
                                  ObjectUtils.isNotEmptyStr(
                                    controller.aboveText.value,
                                  ),
                              replacement: Text(
                                'Please start talking',
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 22.sp,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),
                              child: SingleChildScrollView(
                                controller: controller.aboveScrollController,
                                child: Text(
                                  controller.aboveText.value,
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 18.sp,
                                    height: 1.8,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              }),
            ],
          ),
        ),
      ),
    );
  }

  Widget _under(BuildContext context) {
    return Expanded(
      child: GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: () => controller.speak(true),
        child: SizedBox(
          width: MediaQuery.of(context).size.width,
          height: double.infinity,
          child: Stack(
            children: [
              Obx(() => Visibility(
                    visible: controller.selectedUnder.value,
                    child: SpeechConvert().isListening.value
                        ? WaveWidget(
                            config: CustomConfig(
                              colors: [
                                Color(controller.homeController.appColor.value)
                                    .withOpacity(0.2),
                                Color(controller.homeController.appColor.value),
                              ],
                              durations: [4000, 8000],
                              heightPercentages: [-0.08, -0.08],
                            ),
                            size: const Size(double.infinity, double.infinity),
                            backgroundColor: Colors.transparent,
                            waveAmplitude: 4,
                            // wavePhase: 0,
                            // waveFrequency: 0,
                          )
                        : Container(
                            width: double.infinity,
                            height: double.infinity,
                            color:
                                Color(controller.homeController.appColor.value),
                          ),
                  )),
              Obx(() {
                return SizedBox(
                  width: double.infinity,
                  height: double.infinity,
                  child: Padding(
                    padding: EdgeInsets.fromLTRB(
                      30,
                      SpeechConvert().isListening.value ? 80 : 0,
                      30,
                      MediaQuery.of(context).padding.bottom,
                    ),
                    child: Column(
                      mainAxisAlignment: SpeechConvert().isListening.value
                          ? MainAxisAlignment.start
                          : MainAxisAlignment.center,
                      crossAxisAlignment: SpeechConvert().isListening.value
                          ? CrossAxisAlignment.start
                          : CrossAxisAlignment.center,
                      children: [
                        if (controller.selectedUnder.value) ...[
                          Image.asset(
                            Assets.iconMicrophone,
                            width: 24.sp,
                            height: 24.sp,
                          ),
                          20.verticalSpace,
                        ],
                        Flexible(
                          child: Visibility(
                            visible: SpeechConvert().isListening.value &&
                                ObjectUtils.isNotEmptyStr(
                                  controller.underText.value,
                                ),
                            replacement: Text(
                              'Please start talking',
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 22.sp,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                            child: SingleChildScrollView(
                              controller: controller.underScrollController,
                              child: Text(
                                controller.underText.value,
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 18.sp,
                                  height: 1.8,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              }),
            ],
          ),
        ),
      ),
    );
  }
}