import React from "react";

function VideoModal({ submitFileActivity, chapterId }: any) {
  const [video, setVideo] = React.useState(null) as any;
  const [name, setName] = React.useState("");

  const handleVideoChange = (event: React.ChangeEvent<any>) => {
    setVideo(event.target.files[0]);
  };

  const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setName(event.target.value);
  };

  const handleSubmit = async (e: any) => {
    e.preventDefault();
    let status = await submitFileActivity(video, "video", { name, type: "video" }, chapterId);
  };

  /* TODO : implement some sort of progress bar for file uploads, it is not possible yet because i'm not using axios.
   and the actual upload isn't happening here anyway, it's in the submitFileActivity function */

  return (
    <div>
      <input type="text" placeholder="video title" onChange={handleNameChange} />
      <br />
      <br />
      <input type="file" onChange={handleVideoChange} name="video" id="" />
      <br />

      <br />
      <button onClick={handleSubmit}>Send</button>
    </div>
  );
}

export default VideoModal;
