import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_translate/generated/assets.dart';
import 'package:flutter_translate/manager/translate.dart';
import 'package:get/get.dart';

class SpeakAlert extends StatelessWidget {
  const SpeakAlert({
    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.w,
          child: Row(
            children: [
              Image.asset(
                Assets.imagesRabbitEar,
                width: 38.w,
                height: 59.w,
              ),
              4.horizontalSpace,
              Image.asset(
                Assets.imagesRabbitEar,
                width: 38.w,
                height: 59.w,
              ),
            ],
          ),
        ),
        Container(
          width: MediaQuery.of(context).size.width,
          height: 340.w,
          padding: const EdgeInsets.symmetric(horizontal: 10).w,
          clipBehavior: Clip.antiAlias,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(20.r),
              topRight: Radius.circular(20.r),
            ),
          ),
          child: Column(
            children: [
              Image.asset(
                Assets.imagesRabbitFace,
                width: 215.w,
                height: 155.w,
                // color: Colors.white,
              ),
              4.horizontalSpace,
              Column(
                children: [
                  Obx(() {
                    return Visibility(
                      visible: isListening.value,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            'Please speak ',
                            style: TextStyle(
                              color: const Color(0xff999999),
                              fontSize: 16.sp,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          Flexible(
                            child: Text(
                              Translate().fromLanguageEntity.value.name,
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                              style: TextStyle(
                                color: Colors.black,
                                fontSize: 16.sp,
                                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: TextStyle(
                        color: const Color(0xff999999),
                        fontSize: 16.sp,
                        fontWeight: FontWeight.w500,
                      ),
                    );
                  }),
                ],
              ),
              20.verticalSpace,
              ClipOval(
                child: GestureDetector(
                  onTap: onTap,
                  child: Container(
                    width: 60.w,
                    height: 60.w,
                    color: const Color(0xff87ECB3),
                    child: Obx(() {
                      return Icon(
                        isListening.value ? Icons.pause : Icons.mic,
                        color: Colors.white,
                        size: 36,
                      );
                    }),
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}