import { useState, useEffect } from "react";
import { Button } from "../button/button";

import fullscreen from "../../../images/icons/fullscreen.svg";
import fullscreenOff from "../../../images/icons/fullscreenOff.svg";

import { FullScreen, useFullScreenHandle } from "react-full-screen";


export const FullscreenButton = ({ }) => {
  const handle = useFullScreenHandle();

  const [active, setActive] = useState(Boolean(document.fullscreenElement));
  const [button, setButton] = useState({
    icon: fullscreen,
    inactive: "fullscreen-control-btn",
    active: "fullscreen-control-btn-active",
    type: "fullscreen",
  });


  function handleClick() {
    setActive(Boolean(document.fullscreenElement))
    if (!document.fullscreenElement) {
      document.body.requestFullscreen()
    } else {
      document.exitFullscreen()

    }
  }

  useEffect(() => {
    setButton({
      icon: active ? fullscreen : fullscreenOff,
      inactive: "fullscreen-control-btn",
      active: "fullscreen-control-btn-active",
      type: "fullscreen",
    });

  }, [active])

  useEffect(() => {
    function onFullscreenChange() {
      setActive(Boolean(document.fullscreenElement));


    }

    document.addEventListener('fullscreenchange', onFullscreenChange);

    return () => document.removeEventListener('fullscreenchange', onFullscreenChange);
  }, []);




  return (
    <div className="toolbar-button-area">
      <Button button={button} active={active} onClick={handleClick}></Button>
    </div>
  );
};