import 'package:bubble/bubble.dart';
import 'package:flutter/material.dart';
import 'package:marianum_mobile/data/incommingPackets/talkChatPacket.dart';
import 'package:marianum_mobile/widget/loadingPacket.dart';
import 'package:provider/provider.dart';

class ChatView extends StatefulWidget {
  final String userToken;
  const ChatView({Key? key, required this.userToken}) : super(key: key);

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

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

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

  static const styleSelf = BubbleStyle(
    nip: BubbleNip.rightBottom,
    color: Color.fromRGBO(225, 255, 199, 1.0),
    borderWidth: 1,
    elevation: 2,
    margin: BubbleEdges.only(top: 15, right: 10),
    alignment: Alignment.topRight,
  );


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

    Provider.of<TalkChatPacket>(context, listen: false).invoke(
      data: {
        "token": widget.userToken
      },
      indicateLoading: true,
      allowNotifyListeners: false,
    );
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(
        title: const Text("Chat mit jemandem"),
      ),
      body: Consumer<TalkChatPacket>(
        builder: (context, data, child) {
          List<Bubble> messages = List<Bubble>.empty(growable: true);

          data.messages.forEach((element) {
            messages.add(Bubble(
              style: styleSelf,
              child: Text(element.content),
            ));
          });

          return LoadingPacket(packet: data, child: ListView(
            children: [],
          ));
        },
      ),



      // ListView(
      //   children: [
      //     Bubble(
      //       style: styleSystem,
      //       child: const Text("Chat gestartet"),
      //     ),
      //     Bubble(
      //       style: styleOther,
      //       child: const Text("Hi, das ist ein Testtext"),
      //     ),
      //     Bubble(
      //       style: styleSelf,
      //       child: Text(widget.userToken),
      //     )
      //   ],
      // ),
    );
  }
}