import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:trans_lark/generated/assets.dart';
import 'package:trans_lark/global/translate_manager.dart';

class TSpeakDialog extends StatelessWidget {
  const TSpeakDialog({
    super.key,
    required this.isListening,
    required this.onTap,
  });

  final Rx<bool> isListening;
  final Function() onTap;

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.bottomCenter,
      children: [
        Positioned(
          bottom: 320,
          child: Row(
            children: [
              SvgPicture.asset(
                Assets.svgEars,
                width: 38,
                height: 59,
              ),
              const SizedBox(width: 4),
              SvgPicture.asset(
                Assets.svgEars,
                width: 38,
                height: 59,
              ),
            ],
          ),
        ),
        Container(
          width: MediaQuery.of(context).size.width,
          height: 340,
          padding: const EdgeInsets.symmetric(horizontal: 10),
          clipBehavior: Clip.antiAlias,
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20), topRight: Radius.circular(20)),
          ),
          child: Column(
            children: [
              Image.asset(
                Assets.imagesSpeakFace,
                width: 215,
                height: 155,
                // color: Colors.white,
              ),
              const SizedBox(height: 4),
              Column(
                children: [
                  Obx(() {
                    return Visibility(
                      visible: isListening.value,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          const Text(
                            'Please speak ',
                            style: TextStyle(
                              color: Color(0xff999999),
                              fontSize: 16,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          Flexible(
                            child: Text(
                              TranslateManager()
                                  .fromLanguageEntity
                                  .value
                                  .languageName,
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                              style: const TextStyle(
                                color: Colors.black,
                                fontSize: 16,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ),
                        ],
                      ),
                    );
                  }),
                  Obx(() {
                    return Text(
                      isListening.value
                          ? 'I am listening, Click the button to end and translate'
                          : 'Click the button to start speaking',
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                        color: Color(0xff999999),
                        fontSize: 16,
                        fontWeight: FontWeight.w500,
                      ),
                    );
                  }),
                ],
              ),
              const SizedBox(height: 20),
              ClipOval(
                child: GestureDetector(
                  onTap: onTap,
                  child: Container(
                    width: 60,
                    height: 60,
                    color: const Color(0xff87ECB3),
                    child: Obx(() {
                      return Icon(
                        isListening.value ? Icons.pause : Icons.mic,
                        color: Colors.white,
                        size: 36,
                      );
                    }),
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}