import React, { createContext, useContext, useMemo } from "react";
import { useMediaLayout } from "use-media";

const MediaContext = createContext(null);

export const MediaProvider = ({ theme, children }) => {
    const { sm, md, lg, xl } = theme.breakpoints;
    const isSm = useMediaLayout({ maxWidth: md });
    const isMd = useMediaLayout({ minWidth: md, maxWidth: lg });
    const isLg = useMediaLayout({ minWidth: lg, maxWidth: xl });
    const isXl = useMediaLayout({ minWidth: xl });
    let mediaSize = false;
    switch (true) {
        case isSm:
            mediaSize = "sm";
            break;
        case isMd:
            mediaSize = "md";
            break;
        case isLg:
            mediaSize = "lg";
            break;
        case isXl:
            mediaSize = "xl";
            break;
    }
    const value = useMemo(
        () => ({ isSm: isSm, isMd: isMd, isLg: isLg, isXl: isXl, mediaSize: mediaSize }),
        [isSm, isMd, isLg, isXl, mediaSize]
    );
    return <MediaContext.Provider value={value}>{children}</MediaContext.Provider>;
};

export default () => useContext(MediaContext);