import 'package:stream_chatter/ui/common/my_channel_preview.dart';
import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';

class ChatView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final textColor = Theme.of(context).appBarTheme.backgroundColor;
    return Scaffold(
      backgroundColor: Theme.of(context).canvasColor,
      appBar: AppBar(
        title: Text(
          'Chats',
          style: TextStyle(
            fontSize: 24,
            color: textColor,
            fontWeight: FontWeight.w800,
          ),
        ),
        centerTitle: false,
        elevation: 0,
        backgroundColor: Theme.of(context).canvasColor,
      ),
      body: ChannelsBloc(
        child: ChannelListView(
          filter: Filter.in_(
            'members',
            [StreamChat.of(context).currentUser!.id],
          ),
          sort: [SortOption('last_message_at')],
          channelPreviewBuilder: (context, channel) {
            return Container(
              color: Theme.of(context).canvasColor,
              child: MyChannelPreview(
                channel: channel,
                heroTag: channel.id,
                onImageTap: () {
                  String? name;
                  String? image;
                  final currentUser =
                      StreamChat.of(context).client.state.currentUser;
                  if (channel.isGroup) {
                    name = channel.extraData['name'] as String?;
                    image = channel.extraData['image'] as String?;
                  } else {
                    final friend = channel.state!.members
                        .where((element) => element.userId != currentUser!.id)
                        .first
                        .user!;
                    name = friend.name;
                    image = friend.extraData['image'] as String?;
                  }

                  Navigator.of(context).push(
                    PageRouteBuilder(
                        barrierColor: Colors.black45,
                        barrierDismissible: true,
                        opaque: false,
                        pageBuilder: (context, animation1, _) {
                          return FadeTransition(
                            opacity: animation1,
                            child: ChatDetailView(
                              channelId: channel.id,
                              image: image,
                              name: name,
                            ),
                          );
                        }),
                  );
                },
                onTap: (channel) => {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) {
                        return StreamChannel(
                          child: ChannelPage(),
                          channel: channel,
                        );
                      },
                    ),
                  )
                },
              ),
            );
          },
          channelWidget: ChannelPage(),
        ),
      ),
    );
  }
}

class ChannelPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ChannelHeader(),
      body: Column(
        children: [
          Expanded(
            child: MessageListView(),
          ),
          MessageInput(),
        ],
      ),
    );
  }
}

class ChatDetailView extends StatelessWidget {
  const ChatDetailView({
    Key? key,
    this.image,
    this.name,
    this.channelId,
  }) : super(key: key);

  final String? image;
  final String? name;
  final String? channelId;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: Navigator.of(context).pop,
      child: Material(
        color: Colors.transparent,
        child: Dialog(
          backgroundColor: Colors.transparent,
          elevation: 0,
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Hero(
                  tag: channelId!,
                  child: ClipOval(
                    child: Image.network(
                      image!,
                      height: 180,
                      width: 180,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                Text(
                  name!,
                  style: TextStyle(
                    fontWeight: FontWeight.w700,
                    fontSize: 22,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}