'use client';

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { cn } from '@/lib/utils';
import { useMitt } from '@/plugins/MittContext';
import CoinIcon from '@/reusables/coin-icon';
import { useEffect, useState } from 'react';

const EditorAISheet = () => {
    const [isOpen, setIsOpen] = useState(false);
    const [prompt, setPrompt] = useState('');
    const emitter = useMitt();

    useEffect(() => {
        const openSheetListener = () => {
            setIsOpen(true);
        };

        emitter.on('open-ai-editor-sheet', openSheetListener);

        return () => {
            emitter.off('open-ai-editor-sheet', openSheetListener);
        };
    }, [emitter]);

    const handleOpenChange = (open) => {
        setIsOpen(open);
    };

    const handleSend = () => {
        if (prompt.trim()) {
            console.log('Sending prompt:', prompt);
            setPrompt('');
        }
    };

    return (
        <Sheet open={isOpen} onOpenChange={handleOpenChange}>
            <SheetContent side="bottom" className="gap-0! rounded-t-4xl pb-1">
                <SheetHeader className="mb-2">
                    <SheetTitle className="text-center text-2xl font-semibold">What can I help with?</SheetTitle>
                    <SheetDescription className="hidden"></SheetDescription>
                </SheetHeader>

                <div className="mx-auto w-full max-w-[600px] space-y-4 px-4 pb-4">
                    <div className="space-y-3">
                        <Input
                            placeholder="Make a meme for e.g. work life stress"
                            value={prompt}
                            onChange={(e) => setPrompt(e.target.value)}
                            className="bg-muted/30 max-h-20 min-h-12 resize-none rounded-3xl border-0 p-4 text-base"
                        />
                        <Button
                            onClick={handleSend}
                            className={cn('w-full rounded-full', !prompt.trim() && 'invisible')}
                            size="lg"
                            variant="outline"
                            disabled={!prompt.trim()}
                        >
                            Generate Meme
                            <div className="flex items-center gap-1">
                                <CoinIcon></CoinIcon> 1
                            </div>
                        </Button>
                    </div>
                </div>
            </SheetContent>
        </Sheet>
    );
};

export default EditorAISheet;