import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:fluttervoice2text/provider/voice_to_text_provider.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:mobile_scanner/mobile_scanner.dart';

import '../../app/constant.dart';

class RekamScreen extends HookConsumerWidget {
  const RekamScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    SystemChrome.setEnabledSystemUIMode(
      SystemUiMode.manual,
      overlays: [SystemUiOverlay.bottom],
    );

    final isRekam = useState<bool>(false);
    final judulTombol = useState<String>("MULAI REKAM");
    final qrCodeStr = useState<String>("");
    final isSelesaiRekam = useState<bool>(false);

    void handleBarcode(BarcodeCapture barcodes) {
      if (barcodes.barcodes.isNotEmpty) {
        final scannedBarcode =
            barcodes.barcodes.firstOrNull?.displayValue ?? "";
        if (scannedBarcode.isNotEmpty) {
          ref.read(barcodeX.notifier).state = barcodes.barcodes.first;
          qrCodeStr.value = scannedBarcode;
        }
      }
    }

    Widget buildBarcode(Barcode? value) {
      final qrCode = value?.displayValue ?? "";

      if (qrCode.isEmpty) {
        return const Text(
          'Scan untuk mendapatkan QR Code',
          overflow: TextOverflow.fade,
          style: TextStyle(color: Colors.white),
        );
      }

      return Text(
        "Info: $qrCode",
        overflow: TextOverflow.fade,
        style: const TextStyle(color: Colors.white),
      );
    }

    useEffect(() {
      handleBarcode;
      return () {};
    }, []);

    return GestureDetector(
      onTap: () {
        FocusManager.instance.primaryFocus!.unfocus();
      },
      child: Scaffold(
        resizeToAvoidBottomInset: true,
        backgroundColor: Constant.bgGrey,
        bottomNavigationBar: BottomAppBar(
          color: Colors.blueGrey.shade100,
          height: Constant.getActualYPhone(
            context: context,
            y: 100,
          ),
          shape: const CircularNotchedRectangle(),
          child: Row(
            children: [
              ElevatedButton.icon(
                onPressed: () {
                  ref.read(barcodeX.notifier).state = Barcode();
                  isRekam.value = false;
                  judulTombol.value = "MULAI REKAM";
                  qrCodeStr.value = "";
                  isSelesaiRekam.value = false;
                  Navigator.of(context).pop();
                },
                icon: Icon(
                  Icons.arrow_back,
                  size: 17,
                  color: Constant.textWhite,
                ),
                label: Text(
                  'Kembali',
                  style: Constant.cardText(context: context).copyWith(
                    color: Constant.textWhite,
                  ),
                ),
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.green.shade400,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8),
                  ),
                  elevation: 8,
                  shadowColor: Constant.bgButton.withOpacity(0.24),
                ),
              ),
              const Spacer(),
              // button
              ElevatedButton(
                onPressed: (qrCodeStr.value.isEmpty || isSelesaiRekam.value)
                    ? null
                    : () {
                        judulTombol.value = "SELESAI";
                        isSelesaiRekam.value = true;
                      },
                style: ElevatedButton.styleFrom(
                  backgroundColor: (qrCodeStr.value.isEmpty || isSelesaiRekam.value)
                      ? Constant.bgGrey
                      : Constant.bgButton,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8),
                  ),
                  elevation: 8,
                  shadowColor: Constant.bgButton.withOpacity(0.24),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.mic,
                      size: Constant.getActualXPhone(
                        context: context,
                        x: 20,
                      ),
                      color: Constant.textWhite,
                    ),
                    SizedBox(
                      width: Constant.getActualXPhone(
                        context: context,
                        x: 10,
                      ),
                    ),
                    Text(
                      judulTombol.value,
                      style: Constant.titleButton500(context: context).copyWith(
                        color: Constant.textWhite,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        appBar: AppBar(
          title: Text(
            'Rekam Audio',
            style: Constant.titlePosisiHP(context: context),
          ),
          automaticallyImplyLeading: false,
        ),
        body: Padding(
          padding: EdgeInsets.symmetric(
            horizontal: Constant.getActualXPhone(context: context, x: 20),
          ),
          child: Column(
            children: [
              // scanner
              if (isRekam.value == false) ...[
                SizedBox(
                  width: double.infinity,
                  height: Constant.getActualYPhone(
                    context: context,
                    y: 450,
                  ),
                  child: MobileScanner(
                    onDetect: handleBarcode,
                  ),
                ),
                SizedBox(
                  height: Constant.getActualYPhone(
                    context: context,
                    y: 15,
                  ),
                ),
              ],

              // text
              Container(
                alignment: Alignment.center,
                padding: const EdgeInsets.symmetric(vertical: 10),
                color: Constant.inputanGrey,
                child: buildBarcode(ref.watch(barcodeX)),
              ),
            ],
          ),
        ),
      ),
    );
  }
}