import { useEffect } from "react";

import { useStore } from "@/store";

export default function useAndroidKeyboardOverlap() {
  const setAndroidKeyboardOverlap = useStore.use.setAndroidKeyboardOverlap();

  useEffect(() => {
    // saving the initial viewport height to compare with the updated one in the future
    window.androidInnerHeight = window.innerHeight;
  }, []);

  useEffect(() => {
    if(/Android/i.test(navigator.userAgent)) {
      window.addEventListener('resize', () => {
        if (window?.androidInnerHeight > window.innerHeight) {
          setAndroidKeyboardOverlap(true);
        } else {
          setAndroidKeyboardOverlap(false);
        }
      });
    }
  }, [setAndroidKeyboardOverlap]);
}