import React, { memo } from 'react';
import { st, classes } from './Proportion.st.css.js';
import { PREDEFINED_RATIOS } from './Proportion.constants';
const ProportionComponent = memo(({ dataHook, className, aspectRatio = 1, children }) => {
    const disabled = aspectRatio === PREDEFINED_RATIOS.none;
    /**
     * This is based on Noam Rosenthal's (noamr@wix.com) solution
     * which can be found here: https://codeburst.io/keeping-aspect-ratio-with-html-and-no-padding-tricks-40705656808b
     *
     * The solution uses the fact that SVGs can maintain aspect ratio's natively.
     * In addition we use an img element for this solution to work correctly in IE
     *
     * TODO: use aspect-ratio instead once Safari 14 is no longer supported
     * */
    const getAspectRatioHolder = () => {
        const width = aspectRatio ? Math.round(Number(aspectRatio) * 100) : 100;
        const height = 100;
        const svg = `<svg viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg" />`;
        return (React.createElement("img", { alt: "", "data-hook": "proportion-aspect", className: classes.ratioHolder, src: `data:image/svg+xml,${encodeURIComponent(svg)}` }));
    };
    const content = disabled ? (children) : (React.createElement("div", { className: classes.contentWrapper }, children));
    return (React.createElement("div", { className: st(classes.root, className), "data-hook": dataHook },
        !disabled && getAspectRatioHolder(),
        content));
});
ProportionComponent.displayName = 'Proportion';
const Proportion = Object.assign(ProportionComponent, {
    PREDEFINED_RATIOS,
});
export default Proportion;
//# sourceMappingURL=Proportion.js.map