import React from "react";
import { use } from "../ui/Context";
import { Exploit } from "./Exploit";

const getComputedStyle = window.getComputedStyle;
export function Unclickable(): React.ReactElement {
  const player = use.Player();

  function unclickable(event: React.MouseEvent<HTMLDivElement>): void {
    if (!event.target || !(event.target instanceof Element)) return;
    const display = getComputedStyle(event.target as Element).display;
    const visibility = getComputedStyle(event.target as Element).visibility;
    if (display === "none" && visibility === "hidden" && event.isTrusted) player.giveExploit(Exploit.Unclickable);
  }

  return (
    <div id="unclickable" onClick={unclickable} style={{ display: "none", visibility: "hidden" }}>
      Click on this to upgrade your Source-File -1!
    </div>
  );
}