import { useState, useEffect } from 'react';

function getWindowDimensions() {
    const { innerWidth: width, innerHeight: height } = window;

    return {
        width,
        height
    };
}

function useStoryDimensions(maxRatio = 16/9) {
    const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions())

    useEffect(() => {
        function handleResize() {
            setWindowDimensions(getWindowDimensions());
        }
    
        window.addEventListener("resize", handleResize);
        return () => window.removeEventListener("resize", handleResize);
    }, []);

    const height = windowDimensions.height - 56

    const ratio = Math.max(maxRatio, height / windowDimensions.width)

    return {
        height: height,
        width: Math.round(height / ratio)
    }
}

export default useStoryDimensions