import * as React from "react";
import Box, { BoxProps } from "@mui/material/Box";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import Modal from "@mui/material/Modal";
import ReactPlayer, { YouTubePlayerProps } from "react-player/youtube";
import YouTubeIcon from "@mui/icons-material/YouTube";

export default function YoutubePlayer(
  props: YouTubePlayerProps & {
    boxSx?: BoxProps["sx"];
  }
) {
  const { boxSx, ...rest } = props;

  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  return (
    <>
      <Box
        onClick={handleOpen}
        sx={{
          minWidth: 275,
          minHeight: "calc(275px * 9 / 16)",
          boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.1)",
          borderRadius: "6px",
          cursor: "pointer",

          display: "flex",
          alignItems: "center",
          justifyContent: "center",

          transition: "box-shadow 0.3s ease-in-out",

          "&:hover": {
            boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.3)",
          },

          ...boxSx,
        }}
      >
        <YouTubeIcon
          sx={{
            width: 64,
            height: 64,
            color: "#FF0000",
          }}
        />
      </Box>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box
          sx={{
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
          }}
        >
          <ReactPlayer {...rest} />
        </Box>
      </Modal>
    </>
  );
}