//
// ViewportContext.tsx
//

import * as React from 'react';
import { isSSR } from '@lib/ssr';

export const ViewportContext = React.createContext({} as ViewportProps);

export const ViewportProvider: React.FC = ({ children }) => {
    const [width, setWidth] = React.useState(isSSR ? 0 : window.innerWidth);
    const [height, setHeight] = React.useState(isSSR ? 0 : window.innerHeight);

    const handleResize = () => {
        setWidth(window.innerWidth);
        setHeight(window.innerHeight);
    };

    React.useEffect(() => {
        window.addEventListener('resize', handleResize);

        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, []);
    return (
        <ViewportContext.Provider value={{ width, height }}>
            {children}
        </ViewportContext.Provider>
    );
};

interface ViewportProps {
    width: number;
    height: number;
}


//
//useViewport.tsx
//
import * as React from 'react';
import { ViewportContext } from '@context';

export const useViewport = () => {
    const { width, height } = React.useContext(ViewportContext);
    return { width, height };
};


//
// ResponsiveLayout.tsx
// This is my component that is handling the responsive rendering
//
import * as React from 'react';
import { useViewport } from '@hooks';
import { mediaQuerySizes, AvailableBreakpoint } from '@tokens';


export const ResponsiveLayout: React.FC<ResponsiveLayoutProps> = ({
    breakpoint,
    mobileView,
    desktopView,
}) => {
    const { width } = useViewport();
    const selectedBreakpoint = mediaQuerySizes[breakpoint];

    return width < selectedBreakpoint ? mobileView() : desktopView();
};

interface ResponsiveLayoutProps {
    breakpoint: AvailableBreakpoint;
    mobileView: () => React.ReactElement | null;
    desktopView: () => React.ReactElement | null;
}


//
// __tokens__/breakpoints.ts
//
// Including this just for reference to show where my breakpoint values are coming from
//
export const mediaQuerySizes: AvailableBreakpoints = {
    xs: 414,
    s: 768,
    m: 960,
    l: 1040,
    xl: 1440,
    xxl: 1640,
};