import 'dart:async'; import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/l10n.dart'; import 'package:go_router/go_router.dart'; import 'package:matrix/matrix.dart'; import 'package:fluffychat/pangea/analytics_details_popup/analytics_details_popup.dart'; import 'package:fluffychat/pangea/analytics_misc/construct_list_model.dart'; import 'package:fluffychat/pangea/analytics_misc/construct_type_enum.dart'; import 'package:fluffychat/pangea/analytics_misc/get_analytics_controller.dart'; import 'package:fluffychat/pangea/analytics_summary/learning_progress_bar.dart'; import 'package:fluffychat/pangea/analytics_summary/learning_settings_button.dart'; import 'package:fluffychat/pangea/analytics_summary/level_badge.dart'; import 'package:fluffychat/pangea/analytics_summary/level_bar_popup.dart'; import 'package:fluffychat/pangea/analytics_summary/progress_indicator.dart'; import 'package:fluffychat/pangea/analytics_summary/progress_indicators_enum.dart'; import 'package:fluffychat/pangea/learning_settings/pages/settings_learning.dart'; import 'package:fluffychat/widgets/avatar.dart'; import 'package:fluffychat/widgets/matrix.dart'; /// A summary of "My Analytics" shown at the top of the chat list /// It shows a variety of progress indicators such as /// messages sent, words used, and error types, which can /// be clicked to access more fine-grained analytics data. class LearningProgressIndicators extends StatefulWidget { const LearningProgressIndicators({super.key}); @override State createState() => LearningProgressIndicatorsState(); } class LearningProgressIndicatorsState extends State { ConstructListModel get _constructsModel => MatrixState.pangeaController.getAnalytics.constructListModel; bool _loading = true; StreamSubscription? _analyticsSubscription; StreamSubscription? _languageSubscription; Profile? _profile; @override void initState() { super.initState(); // if getAnalytics has already finished initializing, // the data is loaded and should be displayed. if (MatrixState.pangeaController.getAnalytics.initCompleter.isCompleted) { updateData(null); } _analyticsSubscription = MatrixState .pangeaController.getAnalytics.analyticsStream.stream .listen(updateData); // rebuild when target language changes _languageSubscription = MatrixState.pangeaController.userController.stateStream.listen((_) { if (mounted) setState(() {}); }); final client = MatrixState.pangeaController.matrixState.client; if (client.userID == null) return; client.getProfileFromUserId(client.userID!).then((profile) { if (mounted) setState(() => _profile = profile); }); } @override void dispose() { _analyticsSubscription?.cancel(); _analyticsSubscription = null; _languageSubscription?.cancel(); _languageSubscription = null; super.dispose(); } void updateData(AnalyticsStreamUpdate? _) { if (_loading) _loading = false; if (mounted) setState(() {}); } int uniqueLemmas(ProgressIndicatorEnum indicator) { switch (indicator) { case ProgressIndicatorEnum.morphsUsed: return _constructsModel.grammarLemmas; case ProgressIndicatorEnum.wordsUsed: return _constructsModel.vocabLemmas; default: return 0; } } @override Widget build(BuildContext context) { final client = Matrix.of(context).client; if (client.userID == null) { return const SizedBox(); } final userL2 = MatrixState.pangeaController.languageController.userL2; final mxid = client.userID ?? L10n.of(context).user; final displayname = _profile?.displayName ?? mxid.localpart ?? mxid; return Row( children: [ Tooltip( message: L10n.of(context).settings, child: MouseRegion( cursor: SystemMouseCursors.click, child: GestureDetector( onTap: () => context.go("/rooms/settings"), child: Stack( children: [ FutureBuilder( future: client.fetchOwnProfile(), builder: (context, snapshot) => Stack( alignment: Alignment.center, children: [ Material( color: Colors.transparent, borderRadius: BorderRadius.circular(99), child: Avatar( mxContent: snapshot.data?.avatarUrl, name: snapshot.data?.displayName ?? client.userID!.localpart, size: 60, ), ), ], ), ), Positioned( bottom: -3, right: -3, child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(15), color: Theme.of(context).colorScheme.surfaceBright, ), padding: const EdgeInsets.all(4.0), child: Icon( size: 14, Icons.settings_outlined, color: Theme.of(context).colorScheme.primary, weight: 1000, ), ), ), ], ), ), ), ), const SizedBox(width: 10), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, spacing: 6.0, children: [ Text( displayname, style: TextStyle( fontSize: 14, fontWeight: FontWeight.bold, color: Theme.of(context).colorScheme.primary, ), ), LearningSettingsButton( onTap: () => showDialog( context: context, builder: (c) => const SettingsLearning(), barrierDismissible: false, ), l2: userL2?.langCode.toUpperCase(), ), ], ), const SizedBox(height: 6), Row( spacing: 6.0, children: ConstructTypeEnum.values .map( (c) => ProgressIndicatorBadge( points: uniqueLemmas(c.indicator), loading: _loading, onTap: () { showDialog( context: context, builder: (context) => AnalyticsPopupWrapper( view: c, ), ); }, indicator: c.indicator, ), ) .toList(), ), const SizedBox(height: 6), MouseRegion( cursor: SystemMouseCursors.click, child: GestureDetector( onTap: () { showDialog( context: context, builder: (c) => const LevelBarPopup(), ); }, child: SizedBox( height: 26, child: Stack( alignment: Alignment.center, children: [ Positioned( left: 16, right: 0, child: LearningProgressBar( level: _constructsModel.level, totalXP: _constructsModel.totalXP, ), ), Positioned( left: 0, child: LevelBadge(level: _constructsModel.level), ), ], ), ), ), ), ], ), ), ], ); } }