import { useEditorStore, type ToolType } from "@/pages/editor/store/editorStore";
import Input from "@/components/Input";

const VideoInput = () => {
    return (
        <div className="space-y-4">
            <div>
                <Input
                    label="آدرس ویدیو"
                    placeholder="https://example.com/video.mp4"
                    onEnter={() => {
                        const input = document.querySelector('input[placeholder="https://example.com/video.mp4"]') as HTMLInputElement;
                        if (input?.value) {
                            const newVideo = {
                                id: `video-${Date.now()}`,
                                type: "video" as ToolType,
                                x: 100,
                                y: 100,
                                width: 400,
                                height: 300,
                                videoUrl: input.value,
                            };
                            const { addObject, setSelectedObjectId, setTool } = useEditorStore.getState();
                            addObject(newVideo);
                            setSelectedObjectId(newVideo.id);
                            setTool("select");
                            input.value = "";
                        }
                    }}
                />
            </div>
            <div className="text-sm text-gray-600">
                <p>آدرس ویدیو را وارد کنید</p>
            </div>
        </div>
    );
};

export default VideoInput;