Client/lib/screen/pages/talk/chatView.dart

import 'package:bubble/bubble.dart';
import 'package:flutter/material.dart';
import 'package:jiffy/jiffy.dart';
import 'package:marianum_mobile/api/marianumcloud/talk/chat/richObjectStringProcessor.dart';
import 'package:marianum_mobile/api/marianumcloud/talk/room/getRoomResponse.dart';
import 'package:marianum_mobile/api/marianumcloud/talk/sendMessage/sendMessage.dart';
import 'package:marianum_mobile/api/marianumcloud/talk/sendMessage/sendMessageParams.dart';
import 'package:marianum_mobile/data/chatList/chatProps.dart';
import 'package:provider/provider.dart';

class ChatView extends StatefulWidget {
  final GetRoomResponseObject user;
  final String selfId;
  final CircleAvatar avatar;

  const ChatView({Key? key, required this.user, required this.selfId, required this.avatar}) : super(key: key);

  @override
  State<ChatView> createState() => _ChatViewState();
}

class _ChatViewState extends State<ChatView> {
  static const styleSystem = BubbleStyle(
    color: Color(0xffd4eaf4),
    borderWidth: 1,
    elevation: 2,
    margin: BubbleEdges.only(top: 15),
    alignment: Alignment.center,
  );

  static const styleOther = BubbleStyle(
    nip: BubbleNip.leftTop,
    color: Colors.white,
    borderWidth: 1,
    elevation: 1,
    margin: BubbleEdges.only(top: 15, left: 10, right: 50),
    alignment: Alignment.topLeft,
  );

  static const styleSelf = BubbleStyle(
    nip: BubbleNip.rightBottom,
    color: Color(0xffd9fdd3),
    borderWidth: 1,
    elevation: 1,
    margin: BubbleEdges.only(top: 15, right: 10, left: 50),
    alignment: Alignment.topRight,
  );

  final ScrollController _listController = ScrollController();
  final TextEditingController _textBoxController = TextEditingController();
  bool sending = false;

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

    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      Provider.of<ChatProps>(context, listen: false).setQueryToken(widget.user.token);
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Consumer<ChatProps>(
      builder: (context, data, child) {
        List<Bubble> messages = List<Bubble>.empty(growable: true);

        if(!data.primaryLoading()) {
          bool showMetadata = true;

          data.getChatResponse.sortByTimestamp().forEach((element) {

            showMetadata = element.messageType == GetRoomResponseObjectMessageType.comment;

            BubbleStyle currentStyle;
            if(element.messageType == GetRoomResponseObjectMessageType.comment) {
              if(element.actorId == widget.selfId) {
                currentStyle = styleSelf;
              } else {
                currentStyle = styleOther;
              }
            } else {
              currentStyle = styleSystem;
            }


            messages.add(Bubble(
              margin: BubbleEdges.only(bottom: element == data.getChatResponse.sortByTimestamp().last ? 20 : 0),

              style: currentStyle,
              child: Stack(
                children: [
                  Visibility(
                    visible: showMetadata,
                    child: Positioned(
                      top: 0,
                      left: 0,
                      child: Text(element.actorDisplayName, style: TextStyle(fontWeight: FontWeight.bold, color: Theme.of(context).primaryColor)),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.symmetric(vertical: showMetadata ? 18 : 0),
                    child: Text(RichObjectStringProcessor.parse(element.message, element.messageParameters)),
                  ),
                  Visibility(
                    visible: showMetadata,
                    child: Positioned(
                      bottom: 0,
                      right: 0,
                      child: Text(
                        "${Jiffy.unixFromSecondsSinceEpoch(element.timestamp).yMMMMd} - ${Jiffy.unixFromSecondsSinceEpoch(element.timestamp).format("HH:mm")}",
                        style: TextStyle(color: Theme.of(context).disabledColor),
                      ),
                    ),
                  ),
                ],
              ),
            ));
          });
        }

        return Scaffold(
          backgroundColor: const Color(0xffefeae2),
          appBar: AppBar(
            title: Row(
              children: [
                widget.avatar,
                const SizedBox(width: 10),
                Text(widget.user.displayName, overflow: TextOverflow.ellipsis, maxLines: 1),
              ],
            ),
          ),
          body: Container(
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage("assets/background/chat.png"),
                scale: 1.5,
                opacity: 0.5,
                repeat: ImageRepeat.repeat,
                colorFilter: ColorFilter.linearToSrgbGamma()
              )
            ),
            child: data.primaryLoading() ? const Center(child: CircularProgressIndicator()) : Column(
              children: [
                Expanded(
                  child: ListView(
                    reverse: true,
                    controller: _listController,
                    children: messages.reversed.toList(),
                  ),
                ),
                Container(
                  color: Theme.of(context).dividerColor,
                  padding: const EdgeInsets.all(10),
                  child: Row(
                    children: [
                      Expanded(
                        child: TextField(
                          controller: _textBoxController,
                          readOnly: sending,
                          maxLines: null,
                          decoration: const InputDecoration(
                            hintText: "Nachricht",
                            border: OutlineInputBorder(),
                            labelText: "",
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 15),
                        child: sending ? const Center(child: CircularProgressIndicator()) : IconButton(
                            onPressed: () {
                              if(_textBoxController.text.isEmpty) return;
                              setState(() {
                                sending = true;
                              });
                              SendMessage(widget.user.token, SendMessageParams(_textBoxController.text)).run().then((value) => {
                                Provider.of<ChatProps>(context, listen: false).run(),
                                _textBoxController.text = "",
                                setState(() {
                                  sending = false;
                                }),
                              });
                            },
                            icon: const Icon(Icons.send)
                        ),
                      )
                    ],
                  ),
                )
              ],
            )
          ),
        );
      },
    );
  }
}