import getPathPrefix from '../utils/getPathPrefix';
import { useMediaSelectTo, breakpoints } from '../utils/responsive';
import { useMemo, forwardRef } from 'react';

function ImageWrapper({ src, m_src, alt, ...props }) {
    const path = getPathPrefix(src);
    const m_path = m_src ? getPathPrefix(m_src) : path;

    return ( 
        <picture>
            <source srcSet={path} media="(min-width: 568px)" />
            <source srcSet={m_path} media="(max-width: 567px)" />
            <img src={path} alt={alt} {...props} />
        </picture>
    );
}

const VideoWrapper = forwardRef(function VideoWrapper({
    src,
    m_src,
    autoPlay = true,
    loop = true,
    muted = true,
    playsInline = true,
    ...props
}, ref) {
    const isMobile = useMediaSelectTo(breakpoints.sm);

    const path = useMemo(() => {
        if (typeof isMobile !== 'boolean') return null;
        if (!m_src) return getPathPrefix(src);

        if (isMobile) {
            return getPathPrefix(m_src);
        }
        return getPathPrefix(src);
    }, [isMobile, src, m_src]);

    return (
        <video
            ref={ref}
            src={path}
            autoPlay={autoPlay}
            loop={loop}
            muted={muted}
            playsInline={playsInline}
            webkit-playsinline="true"
            {...props}
        />
    );
});

export { ImageWrapper, VideoWrapper };