import React, {
  useCallback,
  useEffect,
  useState,
  ReactElement,
  useRef
} from "https://esm.sh/react@18";
import ReactDOM from "https://esm.sh/react-dom@18";
import throttle from "https://cdn.skypack.dev/lodash@4.17.21/throttle";

type DeviceOrientation = {
  alpha: number | null;
  beta: number | null;
  gamma: number | null;
};

type UseDeviceOrientationData = {
  orientation: DeviceOrientation | null;
  error: Error | null;
  requestAccess: () => Promise<boolean>;
  revokeAccess: () => Promise<void>;
};

const useDeviceOrientation = (): UseDeviceOrientationData => {
  const [error, setError] = useState<Error | null>(null);
  const [orientation, setOrientation] = useState<DeviceOrientation | null>(
    null
  );

  const onDeviceOrientation = throttle(
    (event: DeviceOrientationEvent): void => {
      setOrientation({
        alpha: event.alpha,
        beta: event.beta,
        gamma: event.gamma
      });
    },
    100
  );

  const revokeAccessAsync = async (): Promise<void> => {
    window.removeEventListener("deviceorientation", onDeviceOrientation);
    setOrientation(null);
  };

  const requestAccessAsync = async (): Promise<boolean> => {
    if (!DeviceOrientationEvent) {
      setError(
        new Error("Device orientation event is not supported by your browser")
      );
      return false;
    }

    if (
      DeviceOrientationEvent.requestPermission &&
      typeof DeviceMotionEvent.requestPermission === "function"
    ) {
      let permission: PermissionState;
      try {
        permission = await DeviceOrientationEvent.requestPermission();
      } catch (err) {
        setError(err);
        return false;
      }
      if (permission !== "granted") {
        setError(
          new Error("Request to access the device orientation was rejected")
        );
        return false;
      }
    }

    window.addEventListener("deviceorientation", onDeviceOrientation);

    return true;
  };

  const requestAccess = useCallback(requestAccessAsync, []);
  const revokeAccess = useCallback(revokeAccessAsync, []);

  useEffect(() => {
    return (): void => {
      revokeAccess();
    };
  }, [revokeAccess]);

  return {
    orientation,
    error,
    requestAccess,
    revokeAccess
  };
};

interface IProps {
  orientation: any;
}

const getTransformDegree = (
  value?: number,
  threshold = 30,
  max = 74.9
): number => {
  if (value) {
    const sy = value > 0 ? "" : "-";
    const degree = `${Math.min((Math.abs(value) / threshold) * 100, max)}`;
    return Number(`${sy}${degree}`);
  }
  return 0;
};

const Demo = ({ orientation }: IProps): ReactElement => {
  const degree = getTransformDegree(orientation?.gamma);
  const yDegree = getTransformDegree(orientation?.beta, 20, 40);
  const transform = `translate(${degree}%, ${yDegree}%)`;
  const maskPosition = `${25.565617 + (degree / 100) * 34.133}vw calc(${
    25.565617 + (yDegree / 100) * 34.133
  }vw - 18.4vw)`;

  return (
    <div className="bg">
      <div
        className="hiddenText"
        style={{
          maskPosition,
          "-webkit-mask-position": maskPosition
        }}
      >
        <div>Hidden Text</div>
        <div>Hidden Text</div>
        <div>Hidden Text</div>
        <div>Hidden Text</div>
      </div>
      <div
        className="lens"
        style={{
          transform
        }}
      ></div>
    </div>
  );
};

const App = () => {
  const {
    orientation,
    requestAccess,
    revokeAccess,
    error
  } = useDeviceOrientation();
  const errorElement = error ? (
    <div className="error">{error.message}</div>
  ) : null;
  return (
    <div className="box">
      <button onClick={requestAccess}>Authorize Gyro Access</button>
      {errorElement}
      <Demo orientation={orientation} />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));