wallet_home_top_section.dart

import 'package:bb_mobile/core/themes/app_theme.dart';
import 'package:bb_mobile/core/utils/build_context_x.dart';
import 'package:bb_mobile/core/widgets/cards/action_card.dart';
import 'package:bb_mobile/features/bitcoin_price/presentation/cubit/price_chart_cubit.dart';
import 'package:bb_mobile/features/bitcoin_price/ui/currency_text.dart';
import 'package:bb_mobile/features/bitcoin_price/ui/price_chart_widget.dart';
import 'package:bb_mobile/features/settings/presentation/bloc/settings_cubit.dart';
import 'package:bb_mobile/features/transactions/ui/transactions_router.dart';
import 'package:bb_mobile/features/wallet/presentation/bloc/wallet_bloc.dart';
import 'package:bb_mobile/features/wallet/ui/widgets/eye_toggle.dart';
import 'package:bb_mobile/features/wallet/ui/widgets/home_fiat_balance.dart';
import 'package:bb_mobile/generated/flutter_gen/assets.gen.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:bull_ui/bull_ui.dart' show Gap;
import 'package:go_router/go_router.dart';
import 'package:shimmer/shimmer.dart';

class WalletHomeTopSection extends StatelessWidget {
  const WalletHomeTopSection({super.key});

  /// Height of the dark area behind the balance (and the price chart, when it
  /// is toggled on).
  static const double _balanceAreaHeight = 264;

  /// Distance from the top of the dark area down to the balance.
  static const double _balanceTopSpacing = 123;

  /// How far the [ActionCard] hangs below the dark area.
  static const double _actionCardOverhang = 76;

  /// Fixed height of the section.
  static const double _height = _balanceAreaHeight + _actionCardOverhang;

  @override
  Widget build(BuildContext context) {
    return const SizedBox(
      height: _height,
      child: Stack(
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [SizedBox(height: _balanceAreaHeight, child: _UI())],
          ),
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 13.0),
              child: ActionCard(),
            ),
          ),
        ],
      ),
    );
  }
}

class _UI extends StatefulWidget {
  const _UI();

  @override
  State<_UI> createState() => _UIState();
}

class _UIState extends State<_UI> {
  late Image image;

  @override
  void initState() {
    image = Image.asset(Assets.backgrounds.bgRed.path, fit: BoxFit.fill);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final showChart = context.select(
      (PriceChartCubit cubit) => cubit.state.showChart,
    );

    return Stack(
      fit: StackFit.expand,
      children: [
        AnimatedContainer(
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeInOut,
          color: Colors.transparent,
          child: image,
        ),
        AnimatedSwitcher(
          duration: const Duration(milliseconds: 300),
          transitionBuilder: (child, animation) {
            return SlideTransition(
              position:
                  Tween<Offset>(
                    begin: const Offset(1.0, 0.0),
                    end: Offset.zero,
                  ).animate(
                    CurvedAnimation(parent: animation, curve: Curves.easeInOut),
                  ),
              child: child,
            );
          },
          child: showChart
              ? const _ChartView(key: ValueKey('chart'))
              : const _Amounts(key: ValueKey('amounts')),
        ),
      ],
    );
  }
}

class _Amounts extends StatelessWidget {
  const _Amounts({super.key});

  @override
  Widget build(BuildContext context) {
    return const Column(
      children: [
        Gap(WalletHomeTopSection._balanceTopSpacing),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [Spacer(), _BtcTotalAmt(), Gap(16), EyeToggle(), Spacer()],
        ),
        Gap(12),
        _FiatAmt(),
        Gap(8),
        _UnconfirmedIncomingBalance(),
      ],
    );
  }
}

class _BtcTotalAmt extends StatelessWidget {
  const _BtcTotalAmt();

  @override
  Widget build(BuildContext context) {
    final walletState = context.select((WalletBloc bloc) => bloc.state);
    final bitcoinUnit = context.select(
      (SettingsCubit cubit) => cubit.state.bitcoinUnit,
    );

    final showSkeleton =
        walletState.status == WalletStatus.initial ||
        walletState.status == WalletStatus.loading ||
        bitcoinUnit == null;

    if (showSkeleton) {
      return const _WalletHomeBtcAmountSkeleton();
    }

    final btcTotal = walletState.totalBalance();

    return CurrencyText(
      btcTotal,
      showFiat: false,
      style: context.font.displaySmall,
      color: context.appColors.onPrimary,
    );
  }
}

class _FiatAmt extends StatelessWidget {
  const _FiatAmt();

  @override
  Widget build(BuildContext context) {
    final walletState = context.select((WalletBloc bloc) => bloc.state);
    final showBalanceLoading =
        walletState.status == WalletStatus.initial ||
        walletState.status == WalletStatus.loading;

    return HomeFiatBalance(
      balanceSat: walletState.totalBalance(),
      showBalanceLoading: showBalanceLoading,
    );
  }
}

class _WalletHomeBtcAmountSkeleton extends StatelessWidget {
  const _WalletHomeBtcAmountSkeleton();

  @override
  Widget build(BuildContext context) {
    return Shimmer.fromColors(
      baseColor: context.appColors.shimmerBase,
      highlightColor: context.appColors.shimmerHighlight,
      child: SizedBox(
        width: 200,
        height: 40,
        child: DecoratedBox(
          decoration: BoxDecoration(
            color: context.appColors.surface,
            borderRadius: BorderRadius.circular(4),
          ),
        ),
      ),
    );
  }
}

class _ChartView extends StatelessWidget {
  const _ChartView({super.key});

  @override
  Widget build(BuildContext context) {
    return const PriceChartWidget();
  }
}

class _UnconfirmedIncomingBalance extends StatelessWidget {
  const _UnconfirmedIncomingBalance();

  @override
  Widget build(BuildContext context) {
    final unconfirmed = context.select(
      (WalletBloc bloc) => bloc.state.unconfirmedIncomingBalance,
    );
    if (unconfirmed == 0) return const SizedBox.shrink();
    final color = context.appColors.onPrimary;
    return GestureDetector(
      onTap: () {
        context.pushNamed(TransactionsRoute.transactions.name);
      },
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.arrow_downward, color: color, size: 20),
                CurrencyText(
                  unconfirmed,
                  showFiat: false,
                  style: context.font.bodyLarge,
                  color: color,
                ),
              ],
            ),
            Align(
              child: Text(
                context.loc.walletBalanceUnconfirmedIncoming,
                style: context.font.bodyLarge?.copyWith(color: color),
              ),
            ),
          ],
        ),
      ),
    );
  }
}