import control from "images/icons/control.svg";
import controlOff from "images/icons/HandOff.svg";

import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";

import { Button } from "components/shared/Button/Button";

export const ControlButton: React.FC<any> = ({
  onClick,
  isSidebarWide,
  isActive,
}) => {
  const { t } = useTranslation();

  const [button, setButton] = useState({
    icon: control,
    active: "request-control-btn",
    inactive: "request-control-btn-disable",
    type: "control",
  });

  useEffect(() => {
    setButton({ ...button, icon: isActive ? control : controlOff });
  }, [isActive]);

  function handleClick() {
    onClick();
  }

  return (
    <div style={{pointerEvents: "none"}} onClick={handleClick} className="toolbar-button-area">
      <Button
        isSidebarWide={isSidebarWide}
        button={button}
        active={isActive}
      ></Button>
    </div>
  );
};
