import {useState} from "react";
import {useNavigate} from "react-router-dom";
import { uploadFile } from "../utils/Endpoints"

const clipUpload = () => {
    const [file, setFile] = useState<File | null>(null);
    const navigate = useNavigate();

    const [noFileError, setNoFileError] = useState(false);
    const press = (() => {
        if (file) {
            uploadFile(file)
                .then(uuid => navigate(`video/${uuid}`))
                .catch(e => console.error(e));
        } else {
            setNoFileError(true);
        }
    });

    return (
        <div className={"flex flex-col justify-between"}>
            <input
                type="file"
                onChange={(e) => {
                    const selected = e.target.files?.[0] ?? null;
                    setFile(selected);
                }}
                className={"block w-full cursor-pointer rounded-lg border border-dashed border-gray-400 bg-white p-4 text-center hover:bg-gray-50 transition"}
            />
            <button
                onClick={press}
                className={"text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"}
            >Upload</button>

            {noFileError &&
                <label className={"text-center text-red-500"}>Please choose a file</label>
            }

        </div>
    )
};

export default clipUpload;