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,
    active: "Развернуть",
    inactive: "Свернуть",
    type: "fullscreen",

  })

  function handleClick() {
    setActive((prev) => !prev);
    setButton({
      icon: active ? fullscreen : fullscreenOff,
      active: "Развернуть",
      inactive: "Свернуть",
      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>
  );
};