'use client';

import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { useMitt } from '@/plugins/MittContext';
import useMediaStore from '@/stores/MediaStore';
import useVideoEditorStore from '@/stores/VideoEditorStore';
import { Download, Play, RefreshCw, Square, SquarePen } from 'lucide-react';

const EditorControls = ({ className = '', onEditClick = () => {}, isEditActive = false }) => {
    const { videoIsPlaying } = useVideoEditorStore();
    const { init } = useMediaStore();
    const emitter = useMitt();

    const handlePlay = () => {
        emitter.emit('video-play');
    };

    const handleOnEditClick = () => {
        handleReset();
        onEditClick();
    };

    const handleReset = () => {
        emitter.emit('video-reset');
    };

    const handleDownloadButton = () => {
        handleReset();
        emitter.emit('video-open-download-modal');
    };

    const handleAIButton = () => {
        handleReset();
        emitter.emit('open-ai-editor-sheet');
    };

    const handleRefresh = () => {
        handleReset();
        init(true);
    };

    const togglePlayPause = () => {
        if (videoIsPlaying) {
            handleReset();
        } else {
            handlePlay();
        }
    };

    return (
        <div className={cn('flex items-center justify-center gap-2', className)}>
            <Button onClick={togglePlayPause} variant="outline" size="icon" className="h-12 w-12 rounded-full border shadow-sm">
                {videoIsPlaying ? <Square className="h-8 w-8" /> : <Play className="h-8 w-8" />}
            </Button>

            {/* <Button
        variant="ghost"
        size="icon"
        className="w-12 h-12 rounded-full shadow-sm border "
      >
         <span className="text-sm font-medium ">9:16</span>
      </Button> */}

            <Button
                id="edit"
                variant={isEditActive ? 'outline' : 'outline'}
                size="icon"
                className="h-12 w-12 rounded-full border shadow-sm"
                onClick={handleOnEditClick}
            >
                <SquarePen className={`h-8 w-8 ${isEditActive ? 'text-white' : ''}`} />
            </Button>

            <Button onClick={handleRefresh} variant="outline" size="icon" className="h-12 w-12 rounded-full border shadow-sm">
                <RefreshCw className="h-8 w-8" />
            </Button>

            <Button onClick={handleDownloadButton} variant="outline" size="icon" className="h-12 w-12 rounded-full border shadow-sm">
                <Download className="h-8 w-8" />
            </Button>

            {/* <Button variant="outline" size="icon" className="h-12 w-12 rounded-full border shadow-sm">
                <Share2 className="h-8 w-8" />
            </Button> */}

            {/* <Button onClick={handleAIButton} variant="outline" size="icon" className="font-display h-12 w-12 rounded-full border font-bold shadow-sm">
                AI
            </Button> */}

            {/* <Button variant="outline" size="icon" className="h-12 w-12 rounded-full border shadow-sm">
                <GraduationCap className="h-8 w-8" />
            </Button> */}
        </div>
    );
};

export default EditorControls;