import React, { Component, } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { SoftOverlayMask, } from '../OverlayMask';
import { SoftIcon, } from '../Icon';
import { SoftFocusTrap, } from '../FocusTrap';
import { keyCodes } from '../../services';
const sizeToClassNameMap = {
    s: 'softImage--small',
    m: 'softImage--medium',
    l: 'softImage--large',
    xl: 'softImage--xlarge',
    fullWidth: 'softImage--fullWidth',
    original: '',
};
export const SIZES = Object.keys(sizeToClassNameMap);
const fullScreenIconColorMap = {
    light: 'ghost',
    dark: 'default',
};
export class SoftImage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isFullScreen: false,
        };
        this.onKeyDown = event => {
            if (event.keyCode === keyCodes.ESCAPE) {
                event.preventDefault();
                event.stopPropagation();
                this.closeFullScreen();
            }
        };
        this.closeFullScreen = () => {
            this.setState({
                isFullScreen: false,
            });
        };
        this.openFullScreen = () => {
            this.setState({
                isFullScreen: true,
            });
        };
    }
    render() {
        const { className, url, size, caption, hasShadow, allowFullScreen, fullScreenIconColor, alt, ...rest } = this.props;
        const classes = classNames('softImage', sizeToClassNameMap[size], {
            'softImage--hasShadow': hasShadow,
            'softImage--allowFullScreen': allowFullScreen,
        }, className);
        let optionalCaption;
        if (caption) {
            optionalCaption = (React.createElement("figcaption", { className: "softImage__caption" }, caption));
        }
        let optionalIcon;
        if (allowFullScreen) {
            optionalIcon = React.createElement(SoftIcon, { type: "fullScreen", color: fullScreenIconColorMap[fullScreenIconColor], className: "softImage__icon" });
        }
        let fullScreenDisplay;
        if (this.state.isFullScreen) {
            fullScreenDisplay = (React.createElement(SoftOverlayMask, { onClick: this.closeFullScreen },
                React.createElement(SoftFocusTrap, { clickOutsideDisables: true },
                    React.createElement("figure", { ref: node => {
                            this.figure = node;
                        }, className: "softImageFullScreen", onClick: this.closeFullScreen, tabIndex: 0, onKeyDown: this.onKeyDown },
                        React.createElement("img", { src: url, className: "softImageFullScreen__img", alt: alt }),
                        optionalCaption))));
        }
        return (React.createElement("figure", Object.assign({ className: classes, onClick: allowFullScreen ? this.openFullScreen : undefined }, rest),
            React.createElement("img", { src: url, className: "softImage__img", alt: alt }),
            optionalCaption,
            optionalIcon,
            fullScreenDisplay));
    }
}
SoftImage.propTypes = {
    alt: PropTypes.string.isRequired,
    size: PropTypes.string.isRequired,
    fullScreenIconColor: PropTypes.string,
};
SoftImage.defaultProps = {
    size: 'original',
    fullScreenIconColor: 'light',
};
//# sourceMappingURL=SoftImage.js.map