import { Box, Modal } from "@mui/material";
import { useState } from "react";
import Button from "../../extra/Button";
import { IconVideoOff } from "@tabler/icons-react";

const style = {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  width: 600,
  backgroundColor: "background.paper",
  borderRadius: "5px",
  border: "1px solid #C9C9C9",
  boxShadow: "24px",
  // padding: '19px',
};

const ViewEpisodeVideoDialogue = ({ viewVideo, setViewVideo }) => {
  const [videoError, setVideoError] = useState(false);

  const handleClose = () => {
    setViewVideo(null);
    setVideoError(false);
  };

  return (
    <div>
      {Boolean(viewVideo) && (
        <Modal
          open={Boolean(viewVideo)}
          aria-labelledby="modal-modal-title"
          aria-describedby="modal-modal-description"
          onClose={handleClose}
        >
          <Box sx={style} className="">
            <div className="model-header">
              <p className="m-0">View Video</p>
            </div>
            <div className="model-body">
              {!videoError ? (
                <div className="d-flex justify-content-center" style={{maxWidth: "100%"}}>
                  <video
                    muted
                    controls
                    src={viewVideo.videoUrl}
                    onError={() => setVideoError(true)}
                    style={{maxWidth: "100%", maxHeight: 500}}
                  />
                </div>
              ) : (
                <div className="align-items-center border d-flex justify-content-center mx-auto rounded-1" style={{ width: "75px", height: "100px" }}>
                  <IconVideoOff style={{ width: "50px", height: "50px" }}/>
                </div>
              )}
            </div>
            <div className="model-footer">
              <div className="m-3 d-flex justify-content-center">
                <Button
                  onClick={handleClose}
                  btnName="Close"
                  newClass="close-model-btn"
                />
              </div>
            </div>
          </Box>
        </Modal>
      )}
    </div>
  );
};

export default ViewEpisodeVideoDialogue;
