import React, { useState } from 'react';
import styles from './NotificationModal.module.css';
import emojiStyles from './EmojiPickerModal.module.css';

interface EmojiPickerModalProps {
  isVisible: boolean;
  onCancel: () => void;
  onSelect: (emoji: string) => void;
  initialEmoji?: string;
}

const emojiList = [
  // Смайлы и эмоции
  '😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '🙃', '😉', '😊', 
  '😇', '😍', '😘', '😗', '😚', '😙', '😋', '😛', '😜', '😝', '😐', '😑', 
  '😶', '😏', '😒', '🙄', '😬', '😌', '😔', '😪', '😴', '😷',
  
  // Жесты и люди
  '👍', '👎', '👌', '✌️', '👈', '👉', '👆', '👇', '👋', '✋', '👏', '🙌', 
  '👐', '🙏', '💪', '👂', '👃', '👀', '👄', '💋', '❤️', '💔', '💕', '💯',
  
  // Животные
  '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯', '🦁',
  '🐮', '🐷', '🐸', '🐵', '🙈', '🙉', '🙊', '🐒', '🐔', '🐧', '🐦',
  '🐤', '🐣', '🦆', '🦅', '🦉', '🐺', '🐗', '🐴', '🦄', '🐝', 
  '🐛', '🦋', '🐌', '🐞', '🐜', '🕷️', '🕸️',
  
  // Еда и напитки
  '🍏', '🍎', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🍈', '🍒',
  '🍑', '🍍', '🍅', '🍆', '🌽', '🍞', '🧀', '🍳', '🍗', '🍖', '🌭',
  '🍔', '🍟', '🍕', '🍝', '🍜', '🍲', '🍛', '🍣', '🍱', '🍤', '🍙',
  
  // Активности и объекты
  '⚽', '🏀', '🏈', '⚾', '🎾', '🏐', '🏉', '🎱', '🏓', '🏸', '🏒', '🏑', 
  '⛳', '🏹', '🎣', '🏊', '🏄', '🏆', '🥇', '🥈', '🥉', '🏅',
  
  // Символы
  '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '💔', '❣️', '💕',
  '💞', '💓', '💗', '💖', '💘', '💝', '💟', '☮️', '✝️', '☪️', '🕉️', '☸️',
  '✡️', '🔯', '🕎', '☯️', '☦️', '🛐', '⛎', '♈', '♉', '♊', '♋', '♌', '♍',
  '♎', '♏', '♐', '♑', '♒', '♓', '❌', '⭕', '🛑'
];

const EmojiPickerModal: React.FC<EmojiPickerModalProps> = ({
  isVisible,
  onCancel,
  onSelect,
  initialEmoji = '😊'
}) => {
  const [selectedEmoji, setSelectedEmoji] = useState(initialEmoji);

  if (!isVisible) return null;

  const handleEmojiClick = (emoji: string) => {
    setSelectedEmoji(emoji);
  };

  const handleApply = () => {
    onSelect(selectedEmoji);
  };

  return (
    <div className={styles.overlay}>
      <div className={styles.modal}>
        <div className={styles.header}>
          <div className={styles.title}>Выберите эмодзи</div>
        </div>

        <div className={emojiStyles.emojiContainer}>
          <div className={emojiStyles.emojiGrid}>
            {emojiList.map((emoji, index) => (
              <button
                key={index}
                className={`${emojiStyles.emojiItem} ${emoji === selectedEmoji ? emojiStyles.selected : ''}`}
                onClick={() => handleEmojiClick(emoji)}
              >
                {emoji}
              </button>
            ))}
          </div>
        </div>

        <div className={styles.buttons}>
          <button 
            className={`${styles.button} ${styles.secondaryButton}`}
            onClick={onCancel}
          >
            Отмена
          </button>
          <button 
            className={`${styles.button} ${styles.primaryButton}`}
            onClick={handleApply}
          >
            Применить
          </button>
        </div>
      </div>
    </div>
  );
};

export default EmojiPickerModal;
