import 'package:better_open_file/better_open_file.dart';
import 'package:bubble/bubble.dart';
import 'package:emoji_picker_flutter/emoji_picker_flutter.dart' as emojis;
import 'package:flowder/flowder.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:jiffy/jiffy.dart';
import '../../../../extensions/text.dart';
import 'package:provider/provider.dart';

import '../../../../api/marianumcloud/talk/chat/getChatResponse.dart';
import '../../../../api/marianumcloud/talk/deleteMessage/deleteMessage.dart';
import '../../../../api/marianumcloud/talk/deleteReactMessage/deleteReactMessage.dart';
import '../../../../api/marianumcloud/talk/deleteReactMessage/deleteReactMessageParams.dart';
import '../../../../api/marianumcloud/talk/reactMessage/reactMessage.dart';
import '../../../../api/marianumcloud/talk/reactMessage/reactMessageParams.dart';
import '../../../../api/marianumcloud/talk/room/getRoomResponse.dart';
import '../../../../model/chatList/chatProps.dart';
import '../../../../theming/appTheme.dart';
import '../../../../widget/debug/debugTile.dart';
import '../../files/fileElement.dart';
import 'chatMessage.dart';
import '../messageReactions.dart';

class ChatBubble extends StatefulWidget {
  final BuildContext context;
  final bool isSender;
  final GetChatResponseObject bubbleData;
  final GetRoomResponseObject chatData;
  final bool isRead;

  final double spacing = 3;
  final double timeIconSize = 11;
  final Color timeIconColor = Colors.grey;

  final void Function({bool renew}) refetch;

  const ChatBubble({
    required this.context,
    required this.isSender,
    required this.bubbleData,
    required this.chatData,
    required this.refetch,
    this.isRead = false,
    super.key});

  @override
  State<ChatBubble> createState() => _ChatBubbleState();
}

class _ChatBubbleState extends State<ChatBubble> {

  BubbleStyle getSystemStyle() => BubbleStyle(
      color: AppTheme.isDarkMode(context) ? const Color(0xff182229) : Colors.white,
      borderWidth: 1,
      elevation: 2,
      margin: const BubbleEdges.only(bottom: 20, top: 10),
      alignment: Alignment.center,
    );

  BubbleStyle getRemoteStyle(bool seamless) {
    var color = AppTheme.isDarkMode(context) ? const Color(0xff202c33) : Colors.white;
    return BubbleStyle(
      nip: BubbleNip.leftTop,
      color: seamless ? Colors.transparent : color,
      borderWidth: seamless ? 0 : 1,
      elevation: seamless ? 0 : 1,
      margin: const BubbleEdges.only(bottom: 10, left: 10, right: 50),
      alignment: Alignment.topLeft,
    );
  }

  BubbleStyle getSelfStyle(bool seamless) {
    var color = AppTheme.isDarkMode(context) ? const Color(0xff005c4b) : const Color(0xffd3d3d3);
    return BubbleStyle(
      nip: BubbleNip.rightBottom,
      color: seamless ? Colors.transparent : color,
      borderWidth: seamless ? 0 : 1,
      elevation: seamless ? 0 : 1,
      margin: const BubbleEdges.only(bottom: 10, right: 10, left: 50),
      alignment: Alignment.topRight,
    );
  }

  late ChatMessage message;
  double downloadProgress = 0;
  Future<DownloaderCore>? downloadCore;

  BubbleStyle getStyle() {
    if(widget.bubbleData.messageType == GetRoomResponseObjectMessageType.comment) {
      if(widget.isSender) {
        return getSelfStyle(false);
      } else {
        return getRemoteStyle(false);
      }
    } else {
      return getSystemStyle();
    }
  }

  void showOptionsDialog() {
    showDialog(context: context, builder: (context) {
      var commonReactions = <String>['👍', '👎', '😆', '❤️', '👀'];
      var canReact = widget.bubbleData.messageType == GetRoomResponseObjectMessageType.comment;
      return SimpleDialog(
        children: [
          Visibility(
            visible: canReact,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Wrap(
                  alignment: WrapAlignment.center,
                  children: [
                    ...commonReactions.map((e) => TextButton(
                      style: TextButton.styleFrom(
                          padding: EdgeInsets.zero,
                          tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                          minimumSize: const Size(40, 40)
                      ),
                      onPressed: () {
                        Navigator.of(context).pop();
                        ReactMessage(
                          chatToken: widget.chatData.token,
                          messageId: widget.bubbleData.id,
                          params: ReactMessageParams(e),
                        ).run().then((value) => widget.refetch(renew: true));
                      },
                      child: Text(e),
                    ),
                    ),
                    IconButton(
                      onPressed: () {
                        showDialog(context: context, builder: (context) => AlertDialog(
                          contentPadding: const EdgeInsets.all(15),
                          titlePadding: const EdgeInsets.only(left: 6, top: 15),
                          title: Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              IconButton(
                                onPressed: () {
                                  Navigator.of(context).pop();
                                },
                                icon: const Icon(Icons.arrow_back),
                              ),
                              const SizedBox(width: 10),
                              const Text('Reagieren'),
                            ],
                          ),
                          content: SizedBox(
                            width: 256,
                            height: 270,
                            child: Column(
                              children: [
                                emojis.EmojiPicker(
                                  config: emojis.Config(
                                    height: 256,
                                    swapCategoryAndBottomBar: true,
                                    emojiViewConfig: emojis.EmojiViewConfig(
                                      backgroundColor: Theme.of(context).canvasColor,
                                      recentsLimit: 67,
                                      emojiSizeMax: 25,
                                      noRecents: const Text('Keine zuletzt verwendeten Emojis'),
                                      columns: 7,
                                    ),
                                    bottomActionBarConfig: const emojis.BottomActionBarConfig(
                                      enabled: false,
                                    ),
                                    categoryViewConfig: emojis.CategoryViewConfig(
                                      backgroundColor: Theme.of(context).hoverColor,
                                      iconColorSelected: Theme.of(context).primaryColor,
                                      indicatorColor: Theme.of(context).primaryColor,
                                    ),
                                    searchViewConfig: emojis.SearchViewConfig(
                                      backgroundColor: Theme.of(context).dividerColor,
                                      buttonColor: Theme.of(context).dividerColor,
                                      hintText: 'Suchen',
                                      buttonIconColor: Colors.white,
                                    ),
                                  ),
                                  onEmojiSelected: (emojis.Category? category, emojis.Emoji emoji) {
                                    Navigator.of(context).pop();
                                    Navigator.of(context).pop();
                                    ReactMessage(
                                      chatToken: widget.chatData.token,
                                      messageId: widget.bubbleData.id,
                                      params: ReactMessageParams(emoji.emoji),
                                    ).run().then((value) => widget.refetch(renew: true));
                                  },
                                ),
                              ],
                            ),
                          ),
                        ));
                      },
                      style: IconButton.styleFrom(
                        padding: EdgeInsets.zero,
                        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                        minimumSize: const Size(40, 40),
                      ),
                      icon: const Icon(Icons.add_circle_outline_outlined),
                    ),
                  ],
                ),
                const Divider(),
              ],
            ),
          ),
          Visibility(
            visible: canReact,
            child: ListTile(
              leading: const Icon(Icons.emoji_emotions_outlined),
              title: const Text('Reaktionen'),
              onTap: () {
                Navigator.of(context).push(MaterialPageRoute(builder: (context) => MessageReactions(
                  token: widget.chatData.token,
                  messageId: widget.bubbleData.id,
                )));
              },
            ),
          ),
          Visibility(
            visible: !message.containsFile,
            child: ListTile(
              leading: const Icon(Icons.copy),
              title: const Text('Nachricht kopieren'),
              onTap: () => {
                Clipboard.setData(ClipboardData(text: widget.bubbleData.message)),
                Navigator.of(context).pop(),
              },
            ),
          ),
          Visibility(
            visible: !kReleaseMode && !widget.isSender && widget.chatData.type != GetRoomResponseObjectConversationType.oneToOne,
            child: ListTile(
              leading: const Icon(Icons.sms_outlined),
              title: Text("Private Nachricht an '${widget.bubbleData.actorDisplayName}'"),
              onTap: () => {
                Navigator.of(context).pop()
              },
            ),
          ),
          Visibility(
            visible: widget.isSender && DateTime.fromMillisecondsSinceEpoch(widget.bubbleData.timestamp * 1000).add(const Duration(hours: 6)).isAfter(DateTime.now()),
            child: ListTile(
              leading: const Icon(Icons.delete_outline),
              title: const Text('Nachricht löschen'),
              onTap: () {
                DeleteMessage(widget.chatData.token, widget.bubbleData.id).run().then((value) {
                  Provider.of<ChatProps>(context, listen: false).run();
                  Navigator.of(context).pop();
                });
              },
            ),
          ),
          DebugTile(context).jsonData(widget.bubbleData.toJson()),
        ],
      );
    });
  }


  @override
  Widget build(BuildContext context) {
    message = ChatMessage(originalMessage: widget.bubbleData.message, originalData: widget.bubbleData.messageParameters);
    var showActorDisplayName = widget.bubbleData.messageType == GetRoomResponseObjectMessageType.comment && widget.chatData.type != GetRoomResponseObjectConversationType.oneToOne;
    var showBubbleTime = widget.bubbleData.messageType != GetRoomResponseObjectMessageType.system;

    var actorText = Text(
      widget.bubbleData.actorDisplayName,
      textAlign: TextAlign.start,
      overflow: TextOverflow.ellipsis,
      style: TextStyle(color: Theme.of(context).primaryColor, fontWeight: FontWeight.bold),
    );

    var timeText = Text(
      Jiffy.parseFromMillisecondsSinceEpoch(widget.bubbleData.timestamp * 1000).format(pattern: 'HH:mm'),
      textAlign: TextAlign.end,
      style: TextStyle(color: widget.timeIconColor, fontSize: widget.timeIconSize),
    );

    return Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.end,
      textDirection: TextDirection.ltr,
      crossAxisAlignment: CrossAxisAlignment.end,

      children: [
        GestureDetector(
          onLongPress: showOptionsDialog,
          onDoubleTap: showOptionsDialog,
          onTap: () {
            if(message.file == null) return;

            if(downloadProgress > 0) {
              showDialog(context: context, builder: (context) => AlertDialog(
                  title: const Text('Download abbrechen?'),
                  content: const Text('Möchtest du den Download abbrechen?'),
                  actions: [
                    TextButton(onPressed: () {
                      Navigator.of(context).pop();
                    }, child: const Text('Nein')),
                    TextButton(onPressed: () {
                      downloadCore?.then((value) {
                        if(!value.isCancelled) value.cancel();
                        Navigator.of(context).pop();
                      });
                      setState(() {
                        downloadProgress = 0;
                        downloadCore = null;
                      });
                    }, child: const Text('Ja, Abbrechen'))
                  ],
                ));

              return;
            }

            downloadProgress = 1;
            downloadCore = FileElement.download(context, message.file!.path!, message.file!.name, (progress) {
              if(progress > 1) {
                setState(() {
                  downloadProgress = progress;
                });
              }
            }, (result) {
              setState(() {
                downloadProgress = 0;
              });

              if(result.type != ResultType.done) {
                showDialog(context: context, builder: (context) => AlertDialog(
                    content: Text(result.message),
                  ));
              }
            });
          },
          child: Bubble(
            style: getStyle(),
            child: Container(
              constraints: BoxConstraints(
                maxWidth: MediaQuery.of(context).size.width * 0.9,
                minWidth: showActorDisplayName
                    ? actorText.size.width
                    : timeText.size.width + (widget.isSender ? widget.spacing + widget.timeIconSize : 0) + 3,
              ),
              child: Stack(
                children: [
                  Padding(
                      padding: EdgeInsets.only(bottom: showBubbleTime ? 18 : 0, top: showActorDisplayName ? 18 : 0),
                      child: message.getWidget()
                  ),
                  Visibility(
                    visible: showActorDisplayName,
                    child: Positioned(
                      top: 0,
                      left: 0,
                      child: actorText
                    ),
                  ),
                  Visibility(
                    visible: showBubbleTime,
                    child: Positioned(
                      bottom: 0,
                      right: 0,
                      child: Row(
                        children: [
                          timeText,
                          if(widget.isSender) ...[
                            SizedBox(width: widget.spacing),
                            if(widget.isRead)
                              Icon(Icons.done_all_outlined, size: widget.timeIconSize, color: widget.timeIconColor)
                            else
                              Icon(Icons.done_outlined, size: widget.timeIconSize, color: widget.timeIconColor)
                          ]
                        ],
                      )
                    ),
                  ),
                  Visibility(
                    visible: downloadProgress > 0,
                    child: Positioned(
                      bottom: 0,
                      right: 0,
                      left: 0,
                      child: LinearProgressIndicator(value: downloadProgress/100),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
        Visibility(
          visible: widget.bubbleData.reactions != null,
          child: Transform.translate(
            offset: const Offset(0, -10),
            child: Container(
              width: MediaQuery.of(context).size.width,
              margin: const EdgeInsets.only(left: 15, right: 15),
              child: Wrap(
                alignment: widget.isSender ? WrapAlignment.end : WrapAlignment.start,
                crossAxisAlignment: WrapCrossAlignment.start,
                children: widget.bubbleData.reactions?.entries.map<Widget>((e) {
                  var hasSelfReacted = widget.bubbleData.reactionsSelf?.contains(e.key) ?? false;
                  return Container(
                    margin: const EdgeInsets.only(right: 2.5, left: 2.5),
                    child: ActionChip(
                      label: Text('${e.key} ${e.value}'),
                      visualDensity: const VisualDensity(vertical: VisualDensity.minimumDensity, horizontal: VisualDensity.minimumDensity),
                      padding: EdgeInsets.zero,
                      backgroundColor: hasSelfReacted ? Theme.of(context).primaryColor : null,
                      onPressed: () {
                        if(hasSelfReacted) {
                          // Delete existing reaction
                          DeleteReactMessage(
                            chatToken: widget.chatData.token,
                            messageId: widget.bubbleData.id,
                            params: DeleteReactMessageParams(
                                e.key
                            ),
                          ).run().then((value) => widget.refetch(renew: true));

                        } else {
                          // Add reaction
                          ReactMessage(
                            chatToken: widget.chatData.token,
                            messageId: widget.bubbleData.id,
                            params: ReactMessageParams(
                              e.key
                            )
                          ).run().then((value) => widget.refetch(renew: true));

                        }
                      },
                    ),
                  );
                }).toList() ?? [],
              ),
            ),
          ),
        ),
      ],
    );
  }
}
