paperless-mobile/lib/features/documents/view/pages/documents_page.dart

import 'package:badges/badges.dart' as b;
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:paperless_api/paperless_api.dart';
import 'package:paperless_mobile/core/bloc/connectivity_cubit.dart';
import 'package:paperless_mobile/extensions/flutter_extensions.dart';
import 'package:paperless_mobile/features/app_drawer/view/app_drawer.dart';
import 'package:paperless_mobile/features/document_search/view/document_search_page.dart';
import 'package:paperless_mobile/features/documents/cubit/documents_cubit.dart';
import 'package:paperless_mobile/features/documents/view/widgets/adaptive_documents_view.dart';
import 'package:paperless_mobile/features/documents/view/widgets/documents_empty_state.dart';
import 'package:paperless_mobile/features/documents/view/widgets/search/document_filter_panel.dart';
import 'package:paperless_mobile/features/documents/view/widgets/selection/bulk_delete_confirmation_dialog.dart';
import 'package:paperless_mobile/features/documents/view/widgets/selection/view_type_selection_widget.dart';
import 'package:paperless_mobile/features/documents/view/widgets/sort_documents_button.dart';
import 'package:paperless_mobile/features/labels/cubit/providers/labels_bloc_provider.dart';
import 'package:paperless_mobile/features/paged_document_view/view/document_paging_view_mixin.dart';
import 'package:paperless_mobile/features/saved_view/cubit/saved_view_cubit.dart';
import 'package:paperless_mobile/features/saved_view/view/add_saved_view_page.dart';
import 'package:paperless_mobile/features/saved_view/view/saved_view_list.dart';
import 'package:paperless_mobile/features/search_app_bar/view/search_app_bar.dart';
import 'package:paperless_mobile/features/tasks/cubit/task_status_cubit.dart';
import 'package:paperless_mobile/generated/l10n.dart';
import 'package:paperless_mobile/helpers/message_helpers.dart';
import 'package:paperless_mobile/routes/document_details_route.dart';

class DocumentFilterIntent {
  final DocumentFilter? filter;
  final bool shouldReset;

  DocumentFilterIntent({
    this.filter,
    this.shouldReset = false,
  });
}

//TODO: Refactor this
class DocumentsPage extends StatefulWidget {
  const DocumentsPage({Key? key}) : super(key: key);

  @override
  State<DocumentsPage> createState() => _DocumentsPageState();
}

class _DocumentsPageState extends State<DocumentsPage>
    with
        SingleTickerProviderStateMixin,
        DocumentPagingViewMixin<DocumentsPage, DocumentsCubit> {
  late final TabController _tabController;

  @override
  ScrollController get pagingScrollController =>
      _nestedScrollViewKey.currentState?.innerController ?? ScrollController();

  final GlobalKey<NestedScrollViewState> _nestedScrollViewKey = GlobalKey();
  int _currentTab = 0;
  bool _showBackToTopButton = false;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(
      length: 2,
      vsync: this,
    );
    Future.wait([
      context.read<DocumentsCubit>().reload(),
      context.read<SavedViewCubit>().reload(),
    ]).onError<PaperlessServerException>(
      (error, stackTrace) {
        showErrorMessage(context, error, stackTrace);
        return [];
      },
    );

    _tabController.addListener(_tabChangesListener);
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      _nestedScrollViewKey.currentState!.innerController
        ..addListener(_scrollExtentListener)
        ..addListener(shouldLoadMoreDocumentsListener);
    });
  }

  void _tabChangesListener() {
    setState(() => _currentTab = _tabController.index);
  }

  void _scrollExtentListener() {
    if (pagingScrollController.position.pixels >
        MediaQuery.of(context).size.height) {
      if (!_showBackToTopButton) {
        setState(() => _showBackToTopButton = true);
      }
    } else {
      if (_showBackToTopButton) {
        setState(() => _showBackToTopButton = false);
      }
    }
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return BlocListener<TaskStatusCubit, TaskStatusState>(
      listenWhen: (previous, current) =>
          !previous.isSuccess && current.isSuccess,
      listener: (context, state) {
        showSnackBar(
          context,
          S.of(context).newDocumentAvailable,
          action: SnackBarActionConfig(
            label: S.of(context).reload,
            onPressed: () {
              context.read<TaskStatusCubit>().acknowledgeCurrentTask();
              context.read<DocumentsCubit>().reload();
            },
          ),
          duration: const Duration(seconds: 10),
        );
      },
      child: BlocConsumer<ConnectivityCubit, ConnectivityState>(
        listenWhen: (previous, current) =>
            previous != ConnectivityState.connected &&
            current == ConnectivityState.connected,
        listener: (context, state) {
          try {
            context.read<DocumentsCubit>().reload();
          } on PaperlessServerException catch (error, stackTrace) {
            showErrorMessage(context, error, stackTrace);
          }
        },
        builder: (context, connectivityState) {
          return Scaffold(
            drawer: const AppDrawer(),
            floatingActionButton: BlocBuilder<DocumentsCubit, DocumentsState>(
              builder: (context, state) {
                final appliedFiltersCount = state.filter.appliedFiltersCount;
                return b.Badge(
                  position: b.BadgePosition.topEnd(top: -12, end: -6),
                  showBadge: appliedFiltersCount > 0,
                  badgeContent: Text(
                    '$appliedFiltersCount',
                    style: const TextStyle(
                      color: Colors.white,
                    ),
                  ),
                  animationType: b.BadgeAnimationType.fade,
                  badgeColor: Colors.red,
                  child: _currentTab == 0
                      ? FloatingActionButton(
                          child: const Icon(Icons.filter_alt_outlined),
                          onPressed: _openDocumentFilter,
                        )
                      : FloatingActionButton(
                          child: const Icon(Icons.add),
                          onPressed: () => _onCreateSavedView(state.filter),
                        ),
                );
              },
            ),
            resizeToAvoidBottomInset: true,
            body: WillPopScope(
              onWillPop: () async {
                if (context.read<DocumentsCubit>().state.selection.isNotEmpty) {
                  context.read<DocumentsCubit>().resetSelection();
                }
                return false;
              },
              child: Stack(
                children: [
                  NestedScrollView(
                    key: _nestedScrollViewKey,
                    headerSliverBuilder: (context, innerBoxIsScrolled) => [
                      SliverOverlapAbsorber(
                        // This widget takes the overlapping behavior of the SliverAppBar,
                        // and redirects it to the SliverOverlapInjector below. If it is
                        // missing, then it is possible for the nested "inner" scroll view
                        // below to end up under the SliverAppBar even when the inner
                        // scroll view thinks it has not been scrolled.
                        // This is not necessary if the "headerSliverBuilder" only builds
                        // widgets that do not overlap the next sliver.
                        handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                          context,
                        ),
                        sliver: BlocBuilder<DocumentsCubit, DocumentsState>(
                          builder: (context, state) {
                            if (state.selection.isNotEmpty) {
                              return SliverAppBar(
                                floating: false,
                                pinned: true,
                                leading: IconButton(
                                  icon: const Icon(Icons.close),
                                  onPressed: () => context
                                      .read<DocumentsCubit>()
                                      .resetSelection(),
                                ),
                                title: Text(
                                  "${state.selection.length} ${S.of(context).countSelected}",
                                ),
                                actions: [
                                  IconButton(
                                    icon: const Icon(Icons.delete),
                                    onPressed: () => _onDelete(state),
                                  ),
                                ],
                              );
                            }
                            return SearchAppBar(
                              hintText: S.of(context).searchDocuments,
                              onOpenSearch: showDocumentSearchPage,
                              bottom: TabBar(
                                controller: _tabController,
                                tabs: [
                                  Tab(text: S.of(context).documents),
                                  Tab(text: S.of(context).views),
                                ],
                              ),
                            );
                          },
                        ),
                      ),
                    ],
                    body: NotificationListener<ScrollNotification>(
                      onNotification: (notification) {
                        final metrics = notification.metrics;
                        if (metrics.maxScrollExtent == 0) {
                          return true;
                        }
                        final desiredTab =
                            (metrics.pixels / metrics.maxScrollExtent).round();
                        if (metrics.axis == Axis.horizontal &&
                            _currentTab != desiredTab) {
                          setState(() => _currentTab = desiredTab);
                        }
                        return false;
                      },
                      child: TabBarView(
                        controller: _tabController,
                        children: [
                          Builder(
                            builder: (context) {
                              return _buildDocumentsTab(
                                connectivityState,
                                context,
                              );
                            },
                          ),
                          Builder(
                            builder: (context) {
                              return _buildSavedViewsTab(
                                connectivityState,
                                context,
                              );
                            },
                          ),
                        ],
                      ),
                    ),
                  ),
                  if (_showBackToTopButton) _buildBackToTopAction(context),
                ],
              ),
            ),
          );
        },
      ),
    );
  }

  Widget _buildBackToTopAction(BuildContext context) {
    return Transform.translate(
      offset: const Offset(24, -24),
      child: Align(
        alignment: Alignment.bottomLeft,
        child: ActionChip(
          backgroundColor: Theme.of(context).colorScheme.primary,
          side: BorderSide.none,
          avatar: Icon(
            Icons.expand_less,
            color: Theme.of(context).colorScheme.onPrimary,
          ),
          onPressed: () async {
            await pagingScrollController.animateTo(
              0,
              duration: const Duration(milliseconds: 300),
              curve: Curves.easeInExpo,
            );
            _nestedScrollViewKey.currentState?.outerController.jumpTo(0);
          },
          label: Text(
            S.of(context).scrollToTop,
            style: DefaultTextStyle.of(context).style.apply(
                  color: Theme.of(context).colorScheme.onPrimary,
                ),
          ),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(24),
          ),
        ),
      ),
    );
  }

  Widget _buildSavedViewsTab(
    ConnectivityState connectivityState,
    BuildContext context,
  ) {
    return RefreshIndicator(
      edgeOffset: kToolbarHeight + kTextTabBarHeight,
      onRefresh: _onReloadSavedViews,
      notificationPredicate: (_) => connectivityState.isConnected,
      child: CustomScrollView(
        key: const PageStorageKey<String>("savedViews"),
        slivers: <Widget>[
          SliverOverlapInjector(
            handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
          ),
          const SavedViewList(),
        ],
      ),
    );
  }

  Widget _buildDocumentsTab(
    ConnectivityState connectivityState,
    BuildContext context,
  ) {
    return RefreshIndicator(
      edgeOffset: kToolbarHeight + kTextTabBarHeight,
      onRefresh: _onReloadDocuments,
      notificationPredicate: (_) => connectivityState.isConnected,
      child: CustomScrollView(
        key: const PageStorageKey<String>("documents"),
        slivers: <Widget>[
          SliverOverlapInjector(
            handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
          ),
          _buildViewActions(),
          BlocBuilder<DocumentsCubit, DocumentsState>(
            builder: (context, state) {
              if (state.hasLoaded && state.documents.isEmpty) {
                return SliverToBoxAdapter(
                  child: DocumentsEmptyState(
                    state: state,
                    onReset: context.read<DocumentsCubit>().resetFilter,
                  ),
                );
              }

              return SliverAdaptiveDocumentsView(
                viewType: state.viewType,
                onTap: _openDetails,
                onSelected:
                    context.read<DocumentsCubit>().toggleDocumentSelection,
                hasInternetConnection: connectivityState.isConnected,
                onTagSelected: _addTagToFilter,
                onCorrespondentSelected: _addCorrespondentToFilter,
                onDocumentTypeSelected: _addDocumentTypeToFilter,
                onStoragePathSelected: _addStoragePathToFilter,
                documents: state.documents,
                hasLoaded: state.hasLoaded,
                isLabelClickable: true,
                isLoading: state.isLoading,
                selectedDocumentIds: state.selectedIds,
              );
            },
          ),
        ],
      ),
    );
  }

  Widget _buildViewActions() {
    return SliverToBoxAdapter(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          const SortDocumentsButton(),
          BlocBuilder<DocumentsCubit, DocumentsState>(
            builder: (context, state) {
              return ViewTypeSelectionWidget(
                viewType: state.viewType,
                onChanged: context.read<DocumentsCubit>().setViewType,
              );
            },
          )
        ],
      ).paddedSymmetrically(horizontal: 8, vertical: 4),
    );
  }

  void _onDelete(DocumentsState documentsState) async {
    final shouldDelete = await showDialog<bool>(
          context: context,
          builder: (context) =>
              BulkDeleteConfirmationDialog(state: documentsState),
        ) ??
        false;
    if (shouldDelete) {
      try {
        await context
            .read<DocumentsCubit>()
            .bulkDelete(documentsState.selection);
        showSnackBar(
          context,
          S.of(context).documentsSuccessfullyDeleted,
        );
        context.read<DocumentsCubit>().resetSelection();
      } on PaperlessServerException catch (error, stackTrace) {
        showErrorMessage(context, error, stackTrace);
      }
    }
  }

  void _onCreateSavedView(DocumentFilter filter) async {
    final newView = await Navigator.of(context).push<SavedView?>(
      MaterialPageRoute(
        builder: (context) => LabelsBlocProvider(
          child: AddSavedViewPage(
            currentFilter: filter,
          ),
        ),
      ),
    );
    if (newView != null) {
      try {
        await context.read<SavedViewCubit>().add(newView);
      } on PaperlessServerException catch (error, stackTrace) {
        showErrorMessage(context, error, stackTrace);
      }
    }
  }

  void _openDocumentFilter() async {
    final draggableSheetController = DraggableScrollableController();
    final filterIntent = await showModalBottomSheet<DocumentFilterIntent>(
      useSafeArea: true,
      context: context,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(16),
          topRight: Radius.circular(16),
        ),
      ),
      isScrollControlled: true,
      builder: (_) => BlocProvider.value(
        value: context.read<DocumentsCubit>(),
        child: DraggableScrollableSheet(
          controller: draggableSheetController,
          expand: false,
          snap: true,
          snapSizes: const [0.9, 1],
          initialChildSize: .9,
          maxChildSize: 1,
          builder: (context, controller) => LabelsBlocProvider(
            child: DocumentFilterPanel(
              initialFilter: context.read<DocumentsCubit>().state.filter,
              scrollController: controller,
              draggableSheetController: draggableSheetController,
            ),
          ),
        ),
      ),
    );
    if (filterIntent != null) {
      try {
        if (filterIntent.shouldReset) {
          await context.read<DocumentsCubit>().resetFilter();
        } else {
          await context
              .read<DocumentsCubit>()
              .updateFilter(filter: filterIntent.filter!);
        }
      } on PaperlessServerException catch (error, stackTrace) {
        showErrorMessage(context, error, stackTrace);
      }
    }
  }

  void _openDetails(DocumentModel document) {
    Navigator.pushNamed(
      context,
      DocumentDetailsRoute.routeName,
      arguments: DocumentDetailsRouteArguments(
        document: document,
      ),
    );
  }

  void _addTagToFilter(int tagId) {
    try {
      final tagsQuery =
          context.read<DocumentsCubit>().state.filter.tags is IdsTagsQuery
              ? context.read<DocumentsCubit>().state.filter.tags as IdsTagsQuery
              : const IdsTagsQuery();
      if (tagsQuery.includedIds.contains(tagId)) {
        context.read<DocumentsCubit>().updateCurrentFilter(
              (filter) => filter.copyWith(
                tags: tagsQuery.withIdsRemoved([tagId]),
              ),
            );
      } else {
        context.read<DocumentsCubit>().updateCurrentFilter(
              (filter) => filter.copyWith(
                tags: tagsQuery.withIdQueriesAdded([IncludeTagIdQuery(tagId)]),
              ),
            );
      }
    } on PaperlessServerException catch (error, stackTrace) {
      showErrorMessage(context, error, stackTrace);
    }
  }

  void _addCorrespondentToFilter(int? correspondentId) {
    final cubit = context.read<DocumentsCubit>();
    try {
      if (cubit.state.filter.correspondent.id == correspondentId) {
        cubit.updateCurrentFilter(
          (filter) =>
              filter.copyWith(correspondent: const IdQueryParameter.unset()),
        );
      } else {
        cubit.updateCurrentFilter(
          (filter) => filter.copyWith(
              correspondent: IdQueryParameter.fromId(correspondentId)),
        );
      }
    } on PaperlessServerException catch (error, stackTrace) {
      showErrorMessage(context, error, stackTrace);
    }
  }

  void _addDocumentTypeToFilter(int? documentTypeId) {
    final cubit = context.read<DocumentsCubit>();
    try {
      if (cubit.state.filter.documentType.id == documentTypeId) {
        cubit.updateCurrentFilter(
          (filter) =>
              filter.copyWith(documentType: const IdQueryParameter.unset()),
        );
      } else {
        cubit.updateCurrentFilter(
          (filter) => filter.copyWith(
              documentType: IdQueryParameter.fromId(documentTypeId)),
        );
      }
    } on PaperlessServerException catch (error, stackTrace) {
      showErrorMessage(context, error, stackTrace);
    }
  }

  void _addStoragePathToFilter(int? pathId) {
    final cubit = context.read<DocumentsCubit>();
    try {
      if (cubit.state.filter.correspondent.id == pathId) {
        cubit.updateCurrentFilter(
          (filter) =>
              filter.copyWith(storagePath: const IdQueryParameter.unset()),
        );
      } else {
        cubit.updateCurrentFilter(
          (filter) =>
              filter.copyWith(storagePath: IdQueryParameter.fromId(pathId)),
        );
      }
    } on PaperlessServerException catch (error, stackTrace) {
      showErrorMessage(context, error, stackTrace);
    }
  }

  Future<void> _onReloadDocuments() async {
    try {
      // We do not await here on purpose so we can show a linear progress indicator below the app bar.
      await context.read<DocumentsCubit>().reload();
    } on PaperlessServerException catch (error, stackTrace) {
      showErrorMessage(context, error, stackTrace);
    }
  }

  Future<void> _onReloadSavedViews() async {
    try {
      // We do not await here on purpose so we can show a linear progress indicator below the app bar.
      await context.read<SavedViewCubit>().reload();
    } on PaperlessServerException catch (error, stackTrace) {
      showErrorMessage(context, error, stackTrace);
    }
  }
}