import 'package:flextras/flextras.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_gutter/flutter_gutter.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:moneymgr_mobile/utils/extensions.dart';
import 'package:moneymgr_mobile/utils/hooks.dart';

/// A button that shows a circular progress indicator when the [onPressed] callback
/// is pending.
class AppButton extends HookWidget {
  const AppButton({super.key, required this.onPressed, required this.label});

  final AsyncCallback? onPressed;
  final String label;

  @override
  Widget build(BuildContext context) {
    final (:pending, :snapshot, :hasError) = useAsyncTask();

    return FilledButton(
      onPressed: onPressed == null ? null : () => pending.value = onPressed!(),
      style: ButtonStyle(
        backgroundColor: hasError ? WidgetStatePropertyAll(Colors.red) : null,
      ),
      child: SeparatedRow(
        separatorBuilder: () => const GutterSmall(),
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          if (snapshot.connectionState == ConnectionState.waiting)
            SizedBox.square(
              dimension: 12,
              child: CircularProgressIndicator(
                strokeWidth: 2,
                color: context.colorScheme.onPrimary,
              ),
            ),
          Text(label),
        ],
      ),
    );
  }
}
