import { FC, useState } from 'react'
import EmojiPicker, { EmojiClickData, Theme as EmojiTheme } from 'emoji-picker-react'
import { EmojiHappy } from 'iconsax-react'
import { getIconColor } from '@/utils/colorUtils'
import { useOutsideClick } from '@/hooks/useOutSideClick'
import { useTheme } from '@/contexts/ThemeContext'

interface EmojiReactionProps {
    onEmojiSelect: (emoji: string) => void
    className?: string
}

const EmojiReaction: FC<EmojiReactionProps> = ({ onEmojiSelect, className = '' }) => {
    const [isOpen, setIsOpen] = useState(false)
    const { theme } = useTheme()

    const containerRef = useOutsideClick(() => {
        if (isOpen) {
            setIsOpen(false)
        }
    })

    const handleEmojiClick = (emojiData: EmojiClickData) => {
        onEmojiSelect(emojiData.emoji)
        setIsOpen(false)
    }

    const togglePicker = () => {
        setIsOpen(!isOpen)
    }

    return (
        <div ref={containerRef} className={`relative ${className}`}>
            <EmojiHappy
                size={24}
                color={getIconColor('primary')}
                className='cursor-pointer hover:opacity-70 transition-opacity'
                onClick={togglePicker}
            />

            {isOpen && (
                <div className='absolute bottom-10 right-0 z-50'>
                    <div className='bg-popover text-popover-foreground rounded-lg shadow-lg border border-border'>
                        <EmojiPicker
                            onEmojiClick={handleEmojiClick}
                            width={300}
                            height={400}

                            searchDisabled
                            skinTonesDisabled
                            theme={theme === 'dark' ? EmojiTheme.DARK : EmojiTheme.LIGHT}
                            previewConfig={{
                                defaultCaption: 'یک ایموجی انتخاب کنید',
                                defaultEmoji: '1f60a'
                            }}
                        />
                    </div>
                </div>
            )}
        </div>
    )
}

export default EmojiReaction 