import { useState,useEffect,useRef } from 'react';

window.addEventListener("click",() => {
  const loader = document.querySelector(".loader");

  loader.classList.add("loader-hidden");

  loader.addEventListener("transitionend",() => {
    document.body.removeChild("loader")
  })
})
   

function App() {
  const [imageURL, setImageURL] = useState(null);
  const imageRef = useRef()
  const [imageURL1, setImageURL1] = useState(null);
  const [imageURL2, setImageURL2] = useState(null);
  const [file_img, setfile_img] = useState(null);
  const [file_video, setfile_video] = useState(null);
  const imageRef2 = useRef()

  const uploadImage = (e) => {
    console.log(e)
    const{ files } = e.target
    const filetype = e.target.files[0].type.slice(0,5)
    console.log(filetype)

    if (filetype === 'image') {
      setfile_img(filetype)
      setfile_video(null)
    } else if (filetype === 'video') {
      setfile_video(filetype)
      setfile_img(null)

    } else {
      setfile_img(null)
      setfile_video(null)
    }

    if (files.length > 0) {
      const url = URL.createObjectURL(files[0])
      //const a = document.createElement('a');
      //a.href = url
      //console.log('A', a)
      //a.download = 'save01.mp4';
      //a.click();     

      setImageURL(url)
      setImageURL1(url)
    } else {
      setImageURL(null)
      setImageURL1(null)
    }
  } 

  const uploadName = (e) => {
    console.log(e.target.value)
    
    const files = e.target.value
    var upath =  "/static/"
    const url = upath.concat(files)


    setImageURL(url)
    setImageURL2(url)
    setfile_video(url)
    setfile_img(null)


  } 

  return (
    <div className="App">
      <h1 className='header'>PREVIEW</h1>

        <div className='inputHolder' >
          <form action="/upload" enctype="multipart/form-data" method="post" id='uploadform'>
            <div class="mb-3">
              <label for="formFile" class="form-label">Upload Image or Video to preview:   Max(20mb/file)</label>
              <input class="form-control" type='file' id="formFile" accepts='image/*, video/*' capture='camera' name='media'
                onChange={uploadImage}/>

                {imageURL1 && <button type="submit" class="btn btn-dark" value='SubmiT' >DETECT FALL(Please wait.Might take a while)</button>}  
            </div>

              </form>
              <br></br>
             <div>
             <form action="/upload" enctype="multipart/form-data" method="post" id='uploadselect'>
                <select name="options" class="form-select" aria-label="Default select example" onChange={uploadName}>
                <option selected>Open this select menu</option>
                <option value="skate.mp4">Skate and Fall</option>
                <option value="slip.mp4">Run and Fall</option>
                <option value="kitchen.mp4">Fall in kitchen</option>
                <option value="cafe_fall.mp4">Fall in workplace</option>
                <option value="studycam.mp4">Fall experiment</option>
              </select> 
              {imageURL2 && <button type="submit" class="btn btn-dark" value='SubmiT' >DETECT FALL (Please wait. Might take a while )</button>}
              </form>
            </div>     
        </div>

        <div className='mainWrapper'>
          <div className='mainContent'>
            <div className='imageholder'>
                {file_img && imageURL && <img src={imageURL} height='360' width='360' alt='Preview' crossOrigin='anonymous' ref={imageRef}/>}
                {file_video && imageURL && <video controls src={imageURL} height='360' width='360' alt='Preview' crossOrigin='anonymous' ref={imageRef} />}

            </div>                
          </div>
           
        </div>
    </div>
  );
}

export default App;