spotube/lib/pages/stats/fees/fees.dart

import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';
import 'package:skeletonizer/skeletonizer.dart';
import 'package:sliver_tools/sliver_tools.dart';
import 'package:spotube/collections/formatters.dart';
import 'package:spotube/components/titlebar/titlebar.dart';
import 'package:spotube/modules/stats/common/artist_item.dart';
import 'package:spotube/extensions/context.dart';

import 'package:spotube/provider/history/top.dart';
import 'package:spotube/provider/history/top/tracks.dart';
import 'package:spotube/provider/metadata_plugin/utils/common.dart';
import 'package:very_good_infinite_list/very_good_infinite_list.dart';
import 'package:auto_route/auto_route.dart';

@RoutePage()
class StatsStreamFeesPage extends HookConsumerWidget {
  static const name = "stats_stream_fees";

  const StatsStreamFeesPage({super.key});

  @override
  Widget build(BuildContext context, ref) {
    final duration = useState<HistoryDuration>(HistoryDuration.days30);

    final topTracks = ref.watch(
      historyTopTracksProvider(duration.value),
    );
    final topTracksNotifier =
        ref.watch(historyTopTracksProvider(duration.value).notifier);

    final artistsData = useMemoized(
      () => topTracksNotifier.artists,
      [topTracks.asData?.value],
    );

    final total = useMemoized(
      () => artistsData.fold<double>(
        0,
        (previousValue, element) => previousValue + element.count * 0.005,
      ),
      [artistsData],
    );

    final translations = <HistoryDuration, String>{
      HistoryDuration.days7: context.l10n.this_week,
      HistoryDuration.days30: context.l10n.this_month,
      HistoryDuration.months6: context.l10n.last_6_months,
      HistoryDuration.year: context.l10n.this_year,
      HistoryDuration.years2: context.l10n.last_2_years,
      HistoryDuration.allTime: context.l10n.all_time,
    };

    return SafeArea(
      bottom: false,
      child: Scaffold(
        headers: [
          TitleBar(
            title: Text(context.l10n.streaming_fees_hypothetical),
          )
        ],
        child: CustomScrollView(
          slivers: [
            SliverCrossAxisConstrained(
              maxCrossAxisExtent: 600,
              alignment: -1,
              child: SliverPadding(
                padding: const EdgeInsets.all(16.0),
                sliver: SliverToBoxAdapter(
                  child: Text(
                    context.l10n.hipotetical_calculation,
                  ).small().muted(),
                ),
              ),
            ),
            SliverToBoxAdapter(
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      context.l10n.total_money(usdFormatter.format(total)),
                    ).semiBold().large(),
                    Select<HistoryDuration>(
                      value: duration.value,
                      onChanged: (value) {
                        if (value == null) return;
                        duration.value = value;
                      },
                      itemBuilder: (context, value) =>
                          Text(translations[value]!),
                      constraints: const BoxConstraints(maxWidth: 150),
                      popupWidthConstraint: PopoverConstraint.anchorMaxSize,
                      popup: SelectPopup(
                        items: SelectItemBuilder(
                          childCount: translations.length,
                          builder: (context, index) {
                            final entry = translations.entries.elementAt(index);
                            return SelectItemButton(
                              value: entry.key,
                              child: Text(entry.value),
                            );
                          },
                        ),
                      ).call,
                    ),
                  ],
                ),
              ),
            ),
            SliverSafeArea(
              sliver: Skeletonizer.sliver(
                enabled: topTracks.isLoading && !topTracks.isLoadingNextPage,
                child: SliverInfiniteList(
                  onFetchData: () async {
                    await topTracksNotifier.fetchMore();
                  },
                  hasError: topTracks.hasError,
                  isLoading:
                      topTracks.isLoading && !topTracks.isLoadingNextPage,
                  hasReachedMax: topTracks.asData?.value.hasMore ?? true,
                  itemCount: artistsData.length,
                  itemBuilder: (context, index) {
                    final artist = artistsData[index];
                    return StatsArtistItem(
                      artist: artist.artist,
                      info: Text(usdFormatter.format(artist.count * 0.005)),
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}