fluffychat/lib/pages/chat_list/chat_list_body.dart

import 'package:flutter/material.dart';

import 'package:animations/animations.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:matrix/matrix.dart';

import 'package:fluffychat/pages/chat_list/chat_list.dart';
import 'package:fluffychat/pages/chat_list/chat_list_item.dart';
import 'package:fluffychat/pages/chat_list/search_title.dart';
import 'package:fluffychat/pages/chat_list/space_view.dart';
import 'package:fluffychat/pages/chat_list/stories_header.dart';
import 'package:fluffychat/utils/adaptive_bottom_sheet.dart';
import 'package:fluffychat/utils/matrix_sdk_extensions/client_stories_extension.dart';
import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart';
import 'package:fluffychat/utils/stream_extension.dart';
import 'package:fluffychat/widgets/avatar.dart';
import 'package:fluffychat/widgets/profile_bottom_sheet.dart';
import 'package:fluffychat/widgets/public_room_bottom_sheet.dart';
import '../../config/themes.dart';
import '../../widgets/connection_status_header.dart';
import '../../widgets/matrix.dart';

class ChatListViewBody extends StatelessWidget {
  final ChatListController controller;

  const ChatListViewBody(this.controller, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final roomSearchResult = controller.roomSearchResult;
    final userSearchResult = controller.userSearchResult;
    final client = Matrix.of(context).client;

    return PageTransitionSwitcher(
      transitionBuilder: (
        Widget child,
        Animation<double> primaryAnimation,
        Animation<double> secondaryAnimation,
      ) {
        return SharedAxisTransition(
          animation: primaryAnimation,
          secondaryAnimation: secondaryAnimation,
          transitionType: SharedAxisTransitionType.vertical,
          fillColor: Theme.of(context).scaffoldBackgroundColor,
          child: child,
        );
      },
      child: StreamBuilder(
        key: ValueKey(
          client.userID.toString() +
              controller.activeFilter.toString() +
              controller.activeSpaceId.toString(),
        ),
        stream: client.onSync.stream
            .where((s) => s.hasRoomUpdate)
            .rateLimit(const Duration(seconds: 1)),
        builder: (context, _) {
          if (controller.activeFilter == ActiveFilter.spaces &&
              !controller.isSearchMode) {
            return SpaceView(
              controller,
              scrollController: controller.scrollController,
              key: Key(controller.activeSpaceId ?? 'Spaces'),
            );
          }
          if (controller.waitForFirstSync && client.prevBatch != null) {
            final rooms = controller.filteredRooms;
            final displayStoriesHeader = {
                  ActiveFilter.allChats,
                  ActiveFilter.messages,
                }.contains(controller.activeFilter) &&
                client.storiesRooms.isNotEmpty;
            return ListView.builder(
              controller: controller.scrollController,
              // add +1 space below in order to properly scroll below the spaces bar
              itemCount: rooms.length + 1,
              itemBuilder: (BuildContext context, int i) {
                if (i == 0) {
                  return Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      if (controller.isSearchMode) ...[
                        SearchTitle(
                          title: L10n.of(context)!.publicRooms,
                          icon: const Icon(Icons.explore_outlined),
                        ),
                        AnimatedContainer(
                          clipBehavior: Clip.hardEdge,
                          decoration: const BoxDecoration(),
                          height: roomSearchResult == null ||
                                  roomSearchResult.chunk.isEmpty
                              ? 0
                              : 106,
                          duration: FluffyThemes.animationDuration,
                          curve: FluffyThemes.animationCurve,
                          child: roomSearchResult == null
                              ? null
                              : ListView.builder(
                                  scrollDirection: Axis.horizontal,
                                  itemCount: roomSearchResult.chunk.length,
                                  itemBuilder: (context, i) => _SearchItem(
                                    title: roomSearchResult.chunk[i].name ??
                                        roomSearchResult.chunk[i].canonicalAlias
                                            ?.localpart ??
                                        L10n.of(context)!.group,
                                    avatar: roomSearchResult.chunk[i].avatarUrl,
                                    onPressed: () => showAdaptiveBottomSheet(
                                      context: context,
                                      builder: (c) => PublicRoomBottomSheet(
                                        roomAlias: roomSearchResult
                                                .chunk[i].canonicalAlias ??
                                            roomSearchResult.chunk[i].roomId,
                                        outerContext: context,
                                        chunk: roomSearchResult.chunk[i],
                                      ),
                                    ),
                                  ),
                                ),
                        ),
                        SearchTitle(
                          title: L10n.of(context)!.users,
                          icon: const Icon(Icons.group_outlined),
                        ),
                        AnimatedContainer(
                          clipBehavior: Clip.hardEdge,
                          decoration: const BoxDecoration(),
                          height: userSearchResult == null ||
                                  userSearchResult.results.isEmpty
                              ? 0
                              : 106,
                          duration: FluffyThemes.animationDuration,
                          curve: FluffyThemes.animationCurve,
                          child: userSearchResult == null
                              ? null
                              : ListView.builder(
                                  scrollDirection: Axis.horizontal,
                                  itemCount: userSearchResult.results.length,
                                  itemBuilder: (context, i) => _SearchItem(
                                    title: userSearchResult
                                            .results[i].displayName ??
                                        userSearchResult
                                            .results[i].userId.localpart ??
                                        L10n.of(context)!.unknownDevice,
                                    avatar:
                                        userSearchResult.results[i].avatarUrl,
                                    onPressed: () => showAdaptiveBottomSheet(
                                      context: context,
                                      builder: (c) => ProfileBottomSheet(
                                        userId:
                                            userSearchResult.results[i].userId,
                                        outerContext: context,
                                      ),
                                    ),
                                  ),
                                ),
                        ),
                        SearchTitle(
                          title: L10n.of(context)!.stories,
                          icon: const Icon(Icons.camera_alt_outlined),
                        ),
                      ],
                      if (displayStoriesHeader)
                        StoriesHeader(
                          key: const Key('stories_header'),
                          filter: controller.searchController.text,
                        ),
                      const ConnectionStatusHeader(),
                      AnimatedContainer(
                        height: controller.isTorBrowser ? 64 : 0,
                        duration: FluffyThemes.animationDuration,
                        curve: FluffyThemes.animationCurve,
                        clipBehavior: Clip.hardEdge,
                        decoration: const BoxDecoration(),
                        child: Material(
                          color: Theme.of(context).colorScheme.surface,
                          child: ListTile(
                            leading: const Icon(Icons.vpn_key),
                            title: Text(L10n.of(context)!.dehydrateTor),
                            subtitle: Text(L10n.of(context)!.dehydrateTorLong),
                            trailing: const Icon(Icons.chevron_right_outlined),
                            onTap: controller.dehydrate,
                          ),
                        ),
                      ),
                      if (controller.isSearchMode)
                        SearchTitle(
                          title: L10n.of(context)!.chats,
                          icon: const Icon(Icons.chat_outlined),
                        ),
                      if (rooms.isEmpty && !controller.isSearchMode)
                        Padding(
                          padding: const EdgeInsets.all(32.0),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Image.asset(
                                'assets/start_chat.png',
                                height: 256,
                              ),
                              const Divider(height: 1),
                            ],
                          ),
                        ),
                    ],
                  );
                }
                i--;
                if (!rooms[i]
                    .getLocalizedDisplayname(MatrixLocals(L10n.of(context)!))
                    .toLowerCase()
                    .contains(
                      controller.searchController.text.toLowerCase(),
                    )) {
                  return Container();
                }
                return ChatListItem(
                  rooms[i],
                  key: Key('chat_list_item_${rooms[i].id}'),
                  selected: controller.selectedRoomIds.contains(rooms[i].id),
                  onTap: controller.selectMode == SelectMode.select
                      ? () => controller.toggleSelection(rooms[i].id)
                      : null,
                  onLongPress: () => controller.toggleSelection(rooms[i].id),
                  activeChat: controller.activeChat == rooms[i].id,
                );
              },
            );
          }
          const dummyChatCount = 5;
          final titleColor =
              Theme.of(context).textTheme.bodyLarge!.color!.withAlpha(100);
          final subtitleColor =
              Theme.of(context).textTheme.bodyLarge!.color!.withAlpha(50);
          return ListView.builder(
            key: const Key('dummychats'),
            itemCount: dummyChatCount,
            itemBuilder: (context, i) => Opacity(
              opacity: (dummyChatCount - i) / dummyChatCount,
              child: ListTile(
                leading: CircleAvatar(
                  backgroundColor: titleColor,
                  child: CircularProgressIndicator(
                    strokeWidth: 1,
                    color: Theme.of(context).textTheme.bodyLarge!.color,
                  ),
                ),
                title: Row(
                  children: [
                    Expanded(
                      child: Container(
                        height: 14,
                        decoration: BoxDecoration(
                          color: titleColor,
                          borderRadius: BorderRadius.circular(3),
                        ),
                      ),
                    ),
                    const SizedBox(width: 36),
                    Container(
                      height: 14,
                      width: 14,
                      decoration: BoxDecoration(
                        color: subtitleColor,
                        borderRadius: BorderRadius.circular(14),
                      ),
                    ),
                    const SizedBox(width: 12),
                    Container(
                      height: 14,
                      width: 14,
                      decoration: BoxDecoration(
                        color: subtitleColor,
                        borderRadius: BorderRadius.circular(14),
                      ),
                    ),
                  ],
                ),
                subtitle: Container(
                  decoration: BoxDecoration(
                    color: subtitleColor,
                    borderRadius: BorderRadius.circular(3),
                  ),
                  height: 12,
                  margin: const EdgeInsets.only(right: 22),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

class _SearchItem extends StatelessWidget {
  final String title;
  final Uri? avatar;
  final void Function() onPressed;

  const _SearchItem({
    required this.title,
    this.avatar,
    required this.onPressed,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) => InkWell(
        onTap: onPressed,
        child: SizedBox(
          width: 84,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const SizedBox(height: 8),
              Avatar(
                mxContent: avatar,
                name: title,
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  title,
                  maxLines: 2,
                  textAlign: TextAlign.center,
                  overflow: TextOverflow.ellipsis,
                  style: const TextStyle(
                    fontSize: 12,
                  ),
                ),
              ),
            ],
          ),
        ),
      );
}