import { atom, useAtomValue, useSetAtom } from "jotai";
import { useEffect } from "react";
import { Dimensions } from "react-native";

const orientationAtom = atom<"vertical" | "horizontal">("vertical");

export function useListenOrientationChange() {
    const setOrientationAtom = useSetAtom(orientationAtom);
    useEffect(() => {
        const windowSize = Dimensions.get("window");
        const { width, height } = windowSize;
        if (width < height) {
            setOrientationAtom("vertical");
        } else {
            setOrientationAtom("horizontal");
        }
        const subscription = Dimensions.addEventListener("change", e => {
            if (e.window.width < e.window.height) {
                setOrientationAtom("vertical");
            } else {
                setOrientationAtom("horizontal");
            }
        });

        return () => {
            subscription?.remove();
        };
    }, []);
}

export default function useOrientation() {
    return useAtomValue(orientationAtom);
}