Envelope/mobile/lib/views/main/conversation/detail.dart

import 'package:flutter/material.dart';

import '/models/conversations.dart';
import '/models/messages.dart';
import '/models/my_profile.dart';
import '/utils/storage/messages.dart';
import '/views/main/conversation/settings.dart';

String convertToAgo(String input){
  DateTime time = DateTime.parse(input);
  Duration diff = DateTime.now().difference(time);

  if(diff.inDays >= 1){
    return '${diff.inDays} day${diff.inDays == 1 ? "" : "s"} ago';
  }
  if(diff.inHours >= 1){
    return '${diff.inHours} hour${diff.inHours == 1 ? "" : "s"} ago';
  }
  if(diff.inMinutes >= 1){
    return '${diff.inMinutes} minute${diff.inMinutes == 1 ? "" : "s"} ago';
  }
  if (diff.inSeconds >= 1){
    return '${diff.inSeconds} second${diff.inSeconds == 1 ? "" : "s"} ago';
  }
  return 'just now';
}

class ConversationDetail extends StatefulWidget{
  final Conversation conversation;
  const ConversationDetail({
    Key? key,
    required this.conversation,
  }) : super(key: key);

  @override
  _ConversationDetailState createState() => _ConversationDetailState();

}

class _ConversationDetailState extends State<ConversationDetail> {
  List<Message> messages = [];
  MyProfile profile = MyProfile(id: '', username: '');

  TextEditingController msgController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            elevation: 0,
            automaticallyImplyLeading: false,
            flexibleSpace: SafeArea(
                child: Container(
                    padding: const EdgeInsets.only(right: 16),
                    child: Row(
                        children: <Widget>[
                          IconButton(
                              onPressed: (){
                                Navigator.pop(context);
                              },
                              icon: Icon(
                                        Icons.arrow_back,
                                        color: Theme.of(context).appBarTheme.iconTheme?.color,
                                    ),
                          ),
                          const SizedBox(width: 2,),
                          Expanded(
                              child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: <Widget>[
                                    Text(
                                        widget.conversation.name,
                                        style: TextStyle(
                                            fontSize: 16,
                                            fontWeight: FontWeight.w600,
                                            color: Theme.of(context).appBarTheme.toolbarTextStyle?.color
                                        ),
                                    ),
                                  ],
                              ),
                          ),
                          IconButton(
                              onPressed: (){
                                Navigator.of(context).push(
                                    MaterialPageRoute(builder: (context) => ConversationSettings(conversation: widget.conversation)),
                                );
                              },
                              icon: Icon(
                                        Icons.settings,
                                        color: Theme.of(context).appBarTheme.iconTheme?.color,
                                    ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
                body: Stack(
                    children: <Widget>[
                      ListView.builder(
                          itemCount: messages.length,
                          shrinkWrap: true,
                          padding: const EdgeInsets.only(top: 10,bottom: 90),
                          reverse: true,
                          itemBuilder: (context, index) {
                            return Container(
                                padding: const EdgeInsets.only(left: 14,right: 14,top: 0,bottom: 0),
                                child: Align(
                                    alignment: (
                                        messages[index].senderUsername == profile.username ?
                                        Alignment.topRight :
                                        Alignment.topLeft
                                    ),
                                    child: Column(
                                        crossAxisAlignment: messages[index].senderUsername == profile.username ?
                                          CrossAxisAlignment.end :
                                          CrossAxisAlignment.start,
                                        children: <Widget>[
                                          Container(
                                            decoration: BoxDecoration(
                                                borderRadius: BorderRadius.circular(20),
                                                color: (
                                                    messages[index].senderUsername == profile.username ?
                                                    Theme.of(context).colorScheme.primary :
                                                    Theme.of(context).colorScheme.tertiary
                                                ),
                                            ),
                                            padding: const EdgeInsets.all(12),
                                            child: Text(
                                                messages[index].data,
                                                style: TextStyle(
                                                    fontSize: 15,
                                                    color: messages[index].senderUsername == profile.username ?
                                                    Theme.of(context).colorScheme.onPrimary :
                                                    Theme.of(context).colorScheme.onTertiary,
                                                )
                                            ),
                                          ),
                                          const SizedBox(height: 1.5),
                                          Row(
                                              mainAxisAlignment: messages[index].senderUsername == profile.username ?
                                                MainAxisAlignment.end :
                                                MainAxisAlignment.start,
                                              children: <Widget>[
                                                const SizedBox(width: 10),
                                                usernameOrFailedToSend(index),
                                              ],
                                            ),
                                          const SizedBox(height: 1.5),
                                          Row(
                                              mainAxisAlignment: messages[index].senderUsername == profile.username ?
                                                MainAxisAlignment.end :
                                                MainAxisAlignment.start,
                                              children: <Widget>[
                                                const SizedBox(width: 10),
                                                Text(
                                                  convertToAgo(messages[index].createdAt),
                                                  textAlign: messages[index].senderUsername == profile.username ?
                                                      TextAlign.left :
                                                      TextAlign.right,
                                                  style: TextStyle(
                                                      fontSize: 12,
                                                      color: Colors.grey[500],
                                                  ),
                                                ),
                                            ],
                                          ),
                                          index != 0 ?
                                            const SizedBox(height: 20) :
                                            const SizedBox.shrink(),
                                      ],
                                    )
                                ),
                            );
                          },
                          ),
                          Align(
                              alignment: Alignment.bottomLeft,
                              child: ConstrainedBox(
                                  constraints: const BoxConstraints(
                                      maxHeight: 200.0,
                                  ),
                                  child: Container(
                                      padding: const EdgeInsets.only(left: 10,bottom: 10,top: 10),
                                      // height: 60,
                                      width: double.infinity,
                                      color: Theme.of(context).backgroundColor,
                                      child: Row(
                                          children: <Widget>[
                                            GestureDetector(
                                                onTap: (){
                                                },
                                                child: Container(
                                                           height: 30,
                                                           width: 30,
                                                           decoration: BoxDecoration(
                                                               color: Theme.of(context).primaryColor,
                                                               borderRadius: BorderRadius.circular(30),
                                                           ),
                                                           child: Icon(
                                                               Icons.add,
                                                               color: Theme.of(context).colorScheme.onPrimary,
                                                               size: 20
                                                           ),
                                                       ),
                                            ),
                                            const SizedBox(width: 15,),
                                            Expanded(
                                                child: TextField(
                                                    decoration: InputDecoration(
                                                        hintText: "Write message...",
                                                        hintStyle: TextStyle(
                                                            color: Theme.of(context).hintColor,
                                                        ),
                                                        border: InputBorder.none,
                                                    ),
                                                    maxLines: null,
                                                    controller: msgController,
                                                ),
                                            ),
                                            const SizedBox(width: 15),
                                            Container(
                                                width: 45,
                                                height: 45,
                                                child: FittedBox(
                                                  child: FloatingActionButton(
                                                    onPressed: () async {
                                                        if (msgController.text == '') {
                                                            return;
                                                        }
                                                        await sendMessage(widget.conversation, msgController.text);
                                                        messages = await getMessagesForThread(widget.conversation);
                                                        setState(() {});
                                                        msgController.text = '';
                                                    },
                                                    child: Icon(
                                                               Icons.send,
                                                               color: Theme.of(context).colorScheme.onPrimary,
                                                               size: 22
                                                           ),
                                                    backgroundColor: Theme.of(context).primaryColor,
                                                ),
                                              ),
                                            ),
                                            const SizedBox(width: 10),
                                        ],
                                    ),
                                ),
                            ),
                      ),
                  ],
            ),
      );
  }

  Future<void> fetchMessages() async {
    profile = await MyProfile.getProfile();
    messages = await getMessagesForThread(widget.conversation);
    setState(() {});
  }

  @override
  void initState() {
    super.initState();
    fetchMessages();
  }

  Widget usernameOrFailedToSend(int index) {
    if (messages[index].senderUsername != profile.username) {
      return Text(
          messages[index].senderUsername,
          style: TextStyle(
              fontSize: 12,
              color: Colors.grey[300],
          ),
        );
    }

    if (messages[index].failedToSend) {
      return Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: const <Widget>[
            Icon(
                Icons.warning_rounded,
                color: Colors.red,
                size: 20,
            ),
            Text(
                'Failed to send',
                style: TextStyle(color: Colors.red, fontSize: 12),
                textAlign: TextAlign.right,
            ),
          ],
      );
    }

    return const SizedBox.shrink();
  }
}