import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:trans_lark/generated/assets.dart';
import 'package:trans_lark/global/global_config.dart';
import 'package:trans_lark/global/speech_to_text_manager.dart';
import 'package:trans_lark/page/p2p/p2p_controller.dart';
import 'package:trans_lark/util/t_object_utils.dart';
import 'package:trans_lark/widget/t_base_appbar_widget.dart';
import 'package:wave/config.dart';
import 'package:wave/wave.dart';

class P2PView extends GetView<P2PController> {
  const P2PView({super.key});

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

  TBaseAppbarWidget _buildAppBar() {
    return TBaseAppbarWidget(
      backgroundColor: Colors.transparent,
      backColor: Colors.white,
      onBackTap: controller.onBack,
      actionWidget: Padding(
        padding: const EdgeInsets.only(right: 10),
        child: ClipOval(
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              onTap: controller.onRotate,
              child: Padding(
                padding: const EdgeInsets.all(10),
                child: Image.asset(
                  Assets.imagesRotateIcon,
                  width: 24,
                  height: 24,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildAbove(BuildContext context) {
    return Expanded(
      child: GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: () => controller.onSpeak(false),
        child: SizedBox(
          width: MediaQuery.of(context).size.width,
          height: double.infinity,
          child: Stack(
            children: [
              Obx(() {
                return Visibility(
                  visible: !controller.selectedUnder.value,
                  child: SpeechToTextManager().isListening.value
                      ? RotatedBox(
                          quarterTurns: 2,
                          child: WaveWidget(
                            config: CustomConfig(
                              colors: [
                                const Color(0xff87ECB3).withOpacity(0.2),
                                const Color(0xff87ECB3),
                              ],
                              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: const Color(0xff87ECB3),
                        ),
                );
              }),
              Obx(() {
                return Container(
                  width: double.infinity,
                  height: double.infinity,
                  padding: EdgeInsets.fromLTRB(
                      30,
                      SpeechToTextManager().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: SpeechToTextManager().isListening.value
                          ? MainAxisAlignment.start
                          : MainAxisAlignment.center,
                      crossAxisAlignment:
                          SpeechToTextManager().isListening.value
                              ? CrossAxisAlignment.start
                              : CrossAxisAlignment.center,
                      children: [
                        if (!controller.selectedUnder.value) ...[
                          Image.asset(
                            Assets.imagesMicrophoneIcon,
                            width: 24,
                            height: 24,
                          ),
                          const SizedBox(height: 20),
                        ],
                        Flexible(
                          child: Visibility(
                            visible: SpeechToTextManager().isListening.value &&
                                TObjectUtils.isNotEmptyStr(
                                    controller.aboveText.value),
                            replacement: const Text(
                              'Please start talking',
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 22,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                            child: SingleChildScrollView(
                              controller: controller.aboveScrollController,
                              child: Text(
                                controller.aboveText.value,
                                style: const TextStyle(
                                  color: Colors.white,
                                  fontSize: 18,
                                  height: 1.8,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              }),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildUnder(BuildContext context) {
    return Expanded(
      child: GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: () => controller.onSpeak(true),
        child: SizedBox(
          width: MediaQuery.of(context).size.width,
          height: double.infinity,
          child: Stack(
            children: [
              Obx(() {
                return Visibility(
                  visible: controller.selectedUnder.value,
                  child: SpeechToTextManager().isListening.value
                      ? WaveWidget(
                          config: CustomConfig(
                            colors: [
                              GlobalConfig.appColor.withOpacity(0.2),
                              GlobalConfig.appColor,
                            ],
                            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: GlobalConfig.appColor,
                        ),
                );
              }),
              Obx(() {
                return Container(
                  width: double.infinity,
                  height: double.infinity,
                  padding: EdgeInsets.fromLTRB(
                      30,
                      SpeechToTextManager().isListening.value ? 80 : 0,
                      30,
                      MediaQuery.of(context).padding.bottom),
                  child: Column(
                    mainAxisAlignment: SpeechToTextManager().isListening.value
                        ? MainAxisAlignment.start
                        : MainAxisAlignment.center,
                    crossAxisAlignment: SpeechToTextManager().isListening.value
                        ? CrossAxisAlignment.start
                        : CrossAxisAlignment.center,
                    children: [
                      if (controller.selectedUnder.value) ...[
                        Image.asset(
                          Assets.imagesMicrophoneIcon,
                          width: 24,
                          height: 24,
                        ),
                        const SizedBox(height: 20),
                      ],
                      Flexible(
                        child: Visibility(
                          visible: SpeechToTextManager().isListening.value &&
                              TObjectUtils.isNotEmptyStr(
                                  controller.underText.value),
                          replacement: const Text(
                            'Please start talking',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 22,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          child: SingleChildScrollView(
                            controller: controller.underScrollController,
                            child: Text(
                              controller.underText.value,
                              style: const TextStyle(
                                color: Colors.white,
                                fontSize: 18,
                                height: 1.8,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                );
              }),
            ],
          ),
        ),
      ),
    );
  }
}