import { useNavigate } from "react-router";

function FileDialog(props) {
  // props.showStatus
  // props.setShowStatus
  // props.playingFile
  // props.setPlayingFile
  // props.file

  let navigate = useNavigate();

  const downloadURL = "/api/v1/get_file_direct?id=" + props.file.id;

  return (
    <dialog open={props.showStatus}>
      <p>{props.file.filename}</p>
      <p>
        Download using browser
        <br />
        Play on the web page
        <br />
      </p>
      <button
        onClick={() => {
          props.setPlayingFile(props.file);
          props.setShowStatus(false);
        }}
      >
        Play
      </button>
      <button
        onClick={() => {
          navigate(`/file/${props.file.id}`);
        }}
      >
        Info
      </button>
      <button onClick={() => props.setShowStatus(false)}>Close</button>
    </dialog>
  );
}

export default FileDialog;