import React from "react";
import { Button, IconButton } from "@material-ui/core";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import useMediaQuery from "@material-ui/core/useMediaQuery";
import { useTheme, makeStyles } from "@material-ui/core/styles";
import { CloseRounded } from "@material-ui/icons";

const useStyles = makeStyles((theme) => {
  return {
    closeButton: {
      position: "absolute",
      right: theme.spacing(1),
      top: theme.spacing(1),
      color: "#e6e6e6",
    },
  };
});

export default function ModalAnime({
  isOpen,
  handleWatchClick,
  handleClose,
  data,
}) {
  const theme = useTheme();
  const classes = useStyles();
  const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));

  return (
    <div>
      {data !== null ? (
        <Dialog
          fullScreen={fullScreen}
          open={isOpen}
          onClose={handleClose}
          aria-labelledby="responsive-dialog-title"
          PaperProps={{
            style: {
              backgroundImage: `linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.3) 100%),url(${data.img})`,
              backgroundRepeat: "no-repeat",
              backgroundSize: "cover",
              color: "#e6e6e6",
            },
          }}
        >
          <DialogTitle id="responsive-dialog-title">
            {data.title}
            <IconButton
              aria-label="close"
              className={classes.closeButton}
              onClick={handleClose}
            >
              <CloseRounded />
            </IconButton>
          </DialogTitle>
          <DialogContent>
            <DialogContentText
              style={{ fontWeight: "bolder", color: "#e6e6e6" }}
            >
              Other Names: {data.other_name}
            </DialogContentText>
          </DialogContent>
          <DialogContent>
            <DialogContentText
              style={{ fontWeight: "bolder", color: "#e6e6e6" }}
            >
              Genres: {data.genre.join(", ")}
            </DialogContentText>
          </DialogContent>
          <DialogContent>
            <DialogContentText
              style={{ fontWeight: "bolder", color: "#e6e6e6" }}
            >
              Plot Summary :
            </DialogContentText>
            <DialogContentText
              style={{ fontWeight: "bolder", color: "#e6e6e6" }}
            >
              {data.plot_summary}
            </DialogContentText>
          </DialogContent>
          <DialogContent>
            <DialogContentText
              style={{ fontWeight: "bolder", color: "#e6e6e6" }}
            >
              Released: {data.released}
            </DialogContentText>
          </DialogContent>
          <DialogContent>
            <DialogContentText
              style={{ fontWeight: "bolder", color: "#e6e6e6" }}
            >
              Status: {data.status}
            </DialogContentText>
          </DialogContent>
          <DialogContent>
            <DialogContentText
              style={{ fontWeight: "bolder", color: "#e6e6e6" }}
            >
              Episodes: {data.episode_count}
            </DialogContentText>
          </DialogContent>
          <DialogContent>
            <DialogContentText
              style={{ fontWeight: "bolder", color: "#e6e6e6" }}
            >
              Type: {data.type}
            </DialogContentText>
          </DialogContent>
          <DialogActions>
            <Button
              autoFocus
              variant="contained"
              onClick={() => handleWatchClick(data.slug)}
              color="default"
              fullWidth
            >
              Start Watching
            </Button>
          </DialogActions>
        </Dialog>
      ) : (
        ""
      )}
    </div>
  );
}