import React, { Component, } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import hljs from 'highlight.js';
//
// import {
//   SoftCopy,
// } from '../Copy';
//
// import {
//   SoftButtonIcon,
// } from '../ButtonIcon';
//
// import {
//   SoftOverlayMask,
// } from '../OverlayMask';
//
// import {
//   SoftFocusTrap,
// } from '../FocusTrap';
import { keyCodes } from '../../services';
// import {SoftI18n} from '../I18n';
const fontSizeToClassNameMap = {
    s: 'softCodeBlock--fontSmall',
    m: 'softCodeBlock--fontMedium',
    l: 'softCodeBlock--fontLarge',
};
export const FONT_SIZES = Object.keys(fontSizeToClassNameMap);
const paddingSizeToClassNameMap = {
    none: '',
    s: 'softCodeBlock--paddingSmall',
    m: 'softCodeBlock--paddingMedium',
    l: 'softCodeBlock--paddingLarge',
};
export const PADDING_SIZES = Object.keys(paddingSizeToClassNameMap);
/**
 * This is the base component extended by SoftCode and SoftCodeBlock. These components
 * share the same propTypes definition with SoftCodeBlockImpl.
 */
export class SoftCodeBlockImpl extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isFullScreen: false,
        };
        this.highlight = () => {
            // @ts-ignore
            if (this.props.language) {
                hljs.highlightBlock(this.code);
                if (this.codeFullScreen) {
                    hljs.highlightBlock(this.codeFullScreen);
                }
            }
        };
        this.onKeyDown = event => {
            if (event.keyCode === keyCodes.ESCAPE) {
                event.preventDefault();
                event.stopPropagation();
                this.closeFullScreen();
            }
        };
        this.toggleFullScreen = () => {
            this.setState((prevState) => ({
                isFullScreen: !prevState.isFullScreen,
            }));
        };
        this.closeFullScreen = () => {
            this.setState({
                isFullScreen: false,
            });
        };
    }
    componentDidMount() {
        this.highlight();
    }
    componentDidUpdate() {
        this.highlight();
    }
    render() {
        const { inline, children, className, fontSize, language, overflowHeight, paddingSize, transparentBackground, isCopyable, ...otherProps } = this.props;
        const classes = classNames('softCodeBlock', fontSizeToClassNameMap[fontSize], paddingSizeToClassNameMap[paddingSize], {
            'softCodeBlock--transparentBackground': transparentBackground,
            'softCodeBlock--inline': inline,
            'softCodeBlock-isCopyable': isCopyable,
        }, className);
        const codeClasses = classNames('softCodeBlock__code', language);
        const optionalStyles = {};
        if (overflowHeight) {
            optionalStyles.height = overflowHeight;
        }
        const codeSnippet = (React.createElement("code", Object.assign({ ref: ref => {
                this.code = ref;
            }, className: codeClasses }, otherProps), children));
        const wrapperProps = {
            className: classes,
            style: optionalStyles
        };
        if (inline) {
            return (React.createElement("span", Object.assign({}, wrapperProps), codeSnippet));
        }
        let copyButton;
        // if (isCopyable) {
        //   copyButton = (
        //     <div className="softCodeBlock__copyButton">
        //       <SoftI18n token="softCodeBlock.copyButton" default="Copy">
        //         {copyButton => (
        //           <SoftCopy textToCopy={children}>
        //             {(copy) => (
        //               <SoftButtonIcon
        //                 size="s"
        //                 onClick={copy}
        //                 iconType="copy"
        //                 color="text"
        //                 aria-label={copyButton}
        //               />
        //             )}
        //           </SoftCopy>
        //         )}
        //       </SoftI18n>
        //     </div>
        //   );
        // }
        let fullScreenButton;
        // if (!inline && overflowHeight) {
        //   fullScreenButton = (
        //     <SoftI18n
        //       tokens={['softCodeBlock.fullscreenCollapse', 'softCodeBlock.fullscreenExpand']}
        //       defaults={['Collapse', 'Expand']}
        //     >
        //       {([fullscreenCollapse, fullscreenExpand]) => (
        //         <SoftButtonIcon
        //           className="softCodeBlock__fullScreenButton"
        //           size="s"
        //           onClick={this.toggleFullScreen}
        //           iconType={this.state.isFullScreen ? 'cross' : 'fullScreen'}
        //           color="text"
        //           aria-label={this.state.isFullScreen ? fullscreenCollapse : fullscreenExpand}
        //         />
        //       )}
        //     </SoftI18n>
        //   );
        // }
        let codeBlockControls;
        if (copyButton || fullScreenButton) {
            codeBlockControls = (React.createElement("div", { className: "softCodeBlock__controls" },
                fullScreenButton,
                copyButton));
        }
        let fullScreenDisplay;
        // if (this.state.isFullScreen) {
        //   {/*
        //     Force fullscreen to use large font and padding.
        //   */
        //   }
        //   const fullScreenClasses = classNames(
        //     'softCodeBlock',
        //     fontSizeToClassNameMap[fontSize],
        //     'softCodeBlock-paddingLarge',
        //     'softCodeBlock-isFullScreen',
        //     className,
        //   );
        //
        //   fullScreenDisplay = (
        //     <SoftOverlayMask>
        //       <SoftFocusTrap clickOutsideDisables={true}>
        //         <div className={fullScreenClasses}>
        //           <pre className="softCodeBlock__pre">
        //             <code
        //               ref={ref => {
        //                 this.codeFullScreen = ref;
        //               }}
        //               className={codeClasses}
        //               tabIndex={0}
        //               onKeyDown={this.onKeyDown}
        //             >
        //               {children}
        //             </code>
        //           </pre>
        //
        //           {codeBlockControls}
        //         </div>
        //       </SoftFocusTrap>
        //     </SoftOverlayMask>
        //   );
        // }
        return (React.createElement("div", Object.assign({}, wrapperProps),
            React.createElement("pre", { className: "softCodeBlock__pre" }, codeSnippet),
            codeBlockControls,
            fullScreenDisplay));
    }
}
SoftCodeBlockImpl.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    paddingSize: PropTypes.oneOf(PADDING_SIZES),
    /**
     * Sets the syntax highlighting for a specific language
     */
    language: PropTypes.string,
    overflowHeight: PropTypes.number,
    fontSize: PropTypes.oneOf(FONT_SIZES),
    transparentBackground: PropTypes.bool,
    /**
     * Displays the passed code in an inline format. Also removes any margins set.
     */
    inline: PropTypes.bool,
    /**
     * Displays an icon button to copy the code snippet to the clipboard.
     */
    isCopyable: PropTypes.bool,
};
SoftCodeBlockImpl.defaultProps = {
    transparentBackground: false,
    paddingSize: 'l',
    fontSize: 's',
    isCopyable: false,
};
//# sourceMappingURL=SoftCodeBlockImpl.js.map