import React, { useState } from "react";
import TimelineStacked from "./TimelineStacked";
import "./MultipleTimelinesInterface.css";

function MultipleTimelinesInterface({ video_path }) {
    const [value, setValue] = useState("");
    const [timelines, setTimelines] = useState([]);
    const [isLoading, setIsLoading] = useState(false);

    const handleSubmit = async () => {
        if (value.trim() && !isLoading) {
            setIsLoading(true);

            const prompt = value.trim();
            const key = prompt;
            const params = new URLSearchParams();
            params.append("video_path", video_path);
            params.append("prompt", prompt);

            try {
                const response = await fetch("api/match_scores?" + params.toString());
                const data = await response.json();

                const new_timeline_prefs = {
                    prompt: prompt,
                    key: key,
                    data: data,
                };

                setTimelines([...timelines, new_timeline_prefs]);
                setValue(""); // Clear the input after submission
            } catch (error) {
                console.error("Error fetching data:", error);
            } finally {
                setIsLoading(false);
            }
        }
    };

    const handleKeyPress = (e) => {
        if (e.key === "Enter") {
            handleSubmit();
        }
    };

    const handleDeleteTimeline = (timelineId) => {
        setTimelines(prev => prev.filter(timeline => timeline.key !== timelineId));
    };

    return (
        <div className="multiple-timelines-interface">
            <div className="timelines-container">
                {timelines.map((timeline) => (
                    <div key={timeline.key} className="timeline-item">
                        <TimelineStacked
                            prompt={timeline.prompt}
                            data={timeline.data}
                            msg_bus_topic={video_path}
                            onDelete={() => handleDeleteTimeline(timeline.key)}
                        />
                    </div>
                ))}
            </div>
            <br></br>
            <div className="input-group">
                <input
                    type="text"
                    placeholder="Enter text..."
                    value={value}
                    onChange={(e) => setValue(e.target.value)}
                    onKeyPress={handleKeyPress}
                    className="item-input"
                    disabled={isLoading}
                />

                <button
                    onClick={handleSubmit}
                    className={`submit-button ${isLoading ? 'loading' : ''}`}
                    disabled={!value.trim() || isLoading}
                >
                    {isLoading ? (
                        <>
                            <span className="spinner"></span>
                            Loading...
                        </>
                    ) : (
                        'Submit'
                    )}
                </button>
            </div>
        </div>
    );
}

export default MultipleTimelinesInterface;
