import { useState, useEffect } from "react";
import { Button } from "../button/button";
import fullscreen from "../../../images/icons/fullscreen.svg";
import fullscreenOff from "../../../images/icons/fullscreenOff.svg";

export const FullscreenButton = ({}) => {
  const [active, setActive] = useState(false);
  const [button, setButton] = useState({
    icon: fullscreen,
    inactive: "fullscreen-control-btn",
    active: "fullscreen-control-btn-active",
    type: "fullscreen",
  });

  function handleClick() {
    setActive((prev) => !prev);
    setButton({
      icon: active ? fullscreen : fullscreenOff,
      inactive: "fullscreen-control-btn",
      active: "fullscreen-control-btn-active",
      type: "fullscreen",
    });

    if (active) {
      document.exitFullscreen();
    } else {
      document.body.requestFullscreen();
    }
  }

  useEffect(() => {
    return () => {
      document.exitFullscreen();
    };
  }, []);

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