import 'package:emoji_picker_flutter/emoji_picker_flutter.dart' as emojis;
import 'package:flutter/material.dart';

import 'emoji_text.dart';

/// Shows the app-wide emoji picker and resolves with the chosen emoji, or
/// `null` if the dialog was dismissed without a selection.
///
/// Single source of truth for the picker styling so every entry point (message
/// reactions, the compose field, …) looks and behaves the same.
Future<String?> showEmojiPicker(
  BuildContext context, {
  String title = 'Emoji wählen',
}) {
  return showDialog<String>(
    context: context,
    builder: (pickerCtx) => AlertDialog(
      contentPadding: const EdgeInsets.all(15),
      titlePadding: const EdgeInsets.only(left: 6, top: 15),
      title: Row(
        children: [
          IconButton(
            onPressed: () => Navigator.of(pickerCtx).pop(),
            icon: const Icon(Icons.arrow_back),
          ),
          const SizedBox(width: 10),
          Text(title),
        ],
      ),
      content: SizedBox(
        width: double.maxFinite,
        height: 360,
        child: emojis.EmojiPicker(
          config: emojis.Config(
            height: 360,
            emojiViewConfig: emojis.EmojiViewConfig(
              backgroundColor: Theme.of(pickerCtx).canvasColor,
              recentsLimit: 67,
              emojiSizeMax: EmojiText.sizeLarge,
              noRecents: const Text('Keine zuletzt verwendeten Emojis'),
              columns: 7,
            ),
            bottomActionBarConfig: const emojis.BottomActionBarConfig(
              enabled: false,
            ),
            categoryViewConfig: emojis.CategoryViewConfig(
              backgroundColor: Theme.of(pickerCtx).hoverColor,
              iconColorSelected: Theme.of(pickerCtx).primaryColor,
              indicatorColor: Theme.of(pickerCtx).primaryColor,
            ),
            searchViewConfig: emojis.SearchViewConfig(
              backgroundColor: Theme.of(pickerCtx).dividerColor,
              hintText: 'Suchen',
              buttonIconColor: Colors.white,
            ),
          ),
          onEmojiSelected: (_, emoji) {
            Navigator.of(pickerCtx).pop(emoji.emoji);
          },
        ),
      ),
    ),
  );
}