import { useState, useEffect } from 'react';

const getWindowDimensions = () => (
    {
        width: window.innerWidth,
        height: window.innerHeight,
    }
)

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 bottomBarHeight = 56

    const height = windowDimensions.height - bottomBarHeight

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

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

export default useStoryDimensions