import * as React from "react"
import cls from "classnames"
import * as styles from "./index.module.scss"

export declare type IProps = {
  play: boolean
  close: (link?: string) => void
  link: string
  classStyle?: string
}

const { useEffect } = React
export default (props: IProps) => {
  const { play, close, link, classStyle } = props
  useEffect(() => {
    document
      .querySelector("html")
      ?.style?.setProperty("overflow", play ? "hidden" : "auto")
  }, [play])

  return (
    <>
      {play && (
        <div
          className={cls(
            play ? "is-active" : "",
            styles.modal,
            "modal",
            classStyle ?? ""
          )}
        >
          <div className="modal-background"></div>
          <div className="modal-content">
            <video
              crossOrigin="anonymous"
              loop
              controls
              preload="auto"
              autoPlay
              width="100%"
              src={link}
            />
          </div>
          <button
            className="modal-close is-large"
            aria-label="close"
            onClick={() => close()}
          ></button>
        </div>
      )}
    </>
  )
}