import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:tone_snap/components/base_appbar.dart';
import 'package:tone_snap/modules/sidea/record_sound/record_sound_controller.dart';

class RecordSoundView extends StatelessWidget {
  RecordSoundView({super.key});

  final controller = Get.find<RecordSoundController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const BaseAppBar('Record Sound'),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            children: [
              SizedBox(height: 167.h),
              _buildTime(),
              SizedBox(height: 200.h),
              Obx(() {
                return _buildBtn(
                  controller.getRecordText(),
                  controller.onTapRecord,
                );
              }),
              Obx(() {
                return Visibility(
                  visible: controller.recorderState.value == 2,
                  child: Padding(
                    padding: const EdgeInsets.only(top: 20).h,
                    child: _buildBtn('Click to stop', controller.stopRecording),
                  ),
                );
              }),
              Obx(() {
                return Visibility(
                  visible: controller.showChangeVoice(),
                  child: Padding(
                    padding: const EdgeInsets.only(top: 20).h,
                    child: _buildBtn('Change voice', controller.goChangeVoice),
                  ),
                );
              }),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildTime() {
    return Obx(() {
      return Text(
        controller.getRecordDuration(),
        style: TextStyle(
          color: Colors.white,
          fontSize: 48.sp,
          fontWeight: FontWeight.bold,
        ),
      );
    });
  }

  Widget _buildBtn(String text, Function() onTap) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(22.5),
      child: Material(
        color: const Color(0xFF191919),
        child: InkWell(
          onTap: onTap,
          child: Container(
            width: 184.w,
            height: 43.h,
            alignment: Alignment.center,
            child: Text(
              text,
              style: TextStyle(
                color: Colors.white,
                fontSize: 16.sp,
                fontWeight: FontWeight.w600,
              ),
            ),
          ),
        ),
      ),
    );
  }
}
