import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/plugins/base/emoji/emoji_picker.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/base/selectable_svg_widget.dart';
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra_ui/style_widget/decoration.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

SelectionMenuItem emojiMenuItem = SelectionMenuItem(
  getName: LocaleKeys.document_plugins_emoji.tr,
  icon: (editorState, onSelected, style) => SelectableIconWidget(
    icon: Icons.emoji_emotions_outlined,
    isSelected: onSelected,
    style: style,
  ),
  keywords: ['emoji'],
  handler: (editorState, menuService, context) {
    final container = Overlay.of(context);
    menuService.dismiss();
    showEmojiPickerMenu(
      container,
      editorState,
      menuService.alignment,
      menuService.offset,
    );
  },
);

void showEmojiPickerMenu(
  OverlayState container,
  EditorState editorState,
  Alignment alignment,
  Offset offset,
) {
  (double? left, double? top, double? right, double? bottom) getPosition() {
    double? left, top, right, bottom;
    switch (alignment) {
      case Alignment.topLeft:
        left = offset.dx;
        top = offset.dy;
        break;
      case Alignment.bottomLeft:
        left = offset.dx;
        bottom = offset.dy;
        break;
      case Alignment.topRight:
        right = offset.dx;
        top = offset.dy;
        break;
      case Alignment.bottomRight:
        right = offset.dx;
        bottom = offset.dy;
        break;
    }

    return (left, top, right, bottom);
  }

  final (left, top, right, bottom) = getPosition();

  keepEditorFocusNotifier.increase();
  late OverlayEntry emojiPickerMenuEntry;
  emojiPickerMenuEntry = FullScreenOverlayEntry(
    left: left,
    top: top,
    bottom: bottom,
    right: right,
    dismissCallback: () => keepEditorFocusNotifier.decrease(),
    builder: (context) => Material(
      type: MaterialType.transparency,
      child: Container(
        width: 360,
        height: 380,
        padding: const EdgeInsets.all(4.0),
        decoration: FlowyDecoration.decoration(
          Theme.of(context).cardColor,
          Theme.of(context).colorScheme.shadow,
        ),
        child: EmojiSelectionMenu(
          onSubmitted: (emoji) {
            editorState.insertTextAtCurrentSelection(emoji);
            emojiPickerMenuEntry.remove();
          },
          onExit: () {
            // close emoji panel
            emojiPickerMenuEntry.remove();
          },
        ),
      ),
    ),
  ).build();
  container.insert(emojiPickerMenuEntry);
}

class EmojiSelectionMenu extends StatefulWidget {
  const EmojiSelectionMenu({
    super.key,
    required this.onSubmitted,
    required this.onExit,
  });

  final void Function(String emoji) onSubmitted;
  final void Function() onExit;

  @override
  State<EmojiSelectionMenu> createState() => _EmojiSelectionMenuState();
}

class _EmojiSelectionMenuState extends State<EmojiSelectionMenu> {
  @override
  void initState() {
    super.initState();
    HardwareKeyboard.instance.addHandler(_handleGlobalKeyEvent);
  }

  bool _handleGlobalKeyEvent(KeyEvent event) {
    if (event.logicalKey == LogicalKeyboardKey.escape &&
        event is KeyDownEvent) {
      //triggers on esc
      widget.onExit();
      return true;
    }
    return false;
  }

  @override
  void deactivate() {
    HardwareKeyboard.instance.removeHandler(_handleGlobalKeyEvent);
    super.deactivate();
  }

  @override
  Widget build(BuildContext context) {
    return FlowyEmojiPicker(
      onEmojiSelected: (r) => widget.onSubmitted(r.emoji),
    );
  }
}
