import React from 'react';
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Smile, Bold, Italic, Strikethrough, Code } from "lucide-react";
import EmojiPicker from 'emoji-picker-react';

export const FormattedTextarea = ({ value, onChange, placeholder, minHeight = "min-h-[100px]" }: { value: string, onChange: (val: string) => void, placeholder?: string, minHeight?: string }) => {
    const handleFormat = (format: string) => {
        let wrap = '';
        if (format === 'bold') wrap = '*';
        if (format === 'italic') wrap = '_';
        if (format === 'strikethrough') wrap = '~';
        if (format === 'monospace') wrap = '```';
        onChange(`${value || ''}${wrap}${wrap}`);
    };

    return (
        <div className="border border-gray-200 dark:border-gray-700 rounded-md overflow-hidden flex flex-col bg-white dark:bg-[#2a3942]">
            <Textarea 
                value={value}
                onChange={(e) => onChange(e.target.value)}
                placeholder={placeholder}
                className={`w-full border-0 focus-visible:ring-0 rounded-none resize-y ${minHeight} bg-transparent`}
            />
            <div className="flex items-center gap-1 p-1 bg-gray-50 dark:bg-[#202c33] border-t border-gray-200 dark:border-gray-700">
                <Popover>
                    <PopoverTrigger asChild>
                        <Button type="button" variant="ghost" size="sm" className="h-8 w-8 p-0"><Smile className="w-4 h-4" /></Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0 border-none" align="start">
                        {/* @ts-ignore */}
                        <EmojiPicker onEmojiClick={(e) => onChange((value || '') + e.emoji)} />
                    </PopoverContent>
                </Popover>
                <div className="w-[1px] h-4 bg-gray-300 dark:bg-gray-600 mx-1"></div>
                <Button type="button" variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => handleFormat('bold')}><Bold className="w-4 h-4" /></Button>
                <Button type="button" variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => handleFormat('italic')}><Italic className="w-4 h-4" /></Button>
                <Button type="button" variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => handleFormat('strikethrough')}><Strikethrough className="w-4 h-4" /></Button>
                <Button type="button" variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => handleFormat('monospace')}><Code className="w-4 h-4" /></Button>
            </div>
        </div>
    );
};