import { classy } from '@audentio/utils/src/classy';
import { throttle } from '@audentio/utils/src/throttle';
import ContentCopyIcon from 'mdi-react/ContentCopyIcon';
import React, { Component } from 'react';
import { Tooltip } from '../Tooltip';
import style from './CodeBlock.scss';
export class CodeBlock extends Component {
    constructor() {
        super(...arguments);
        this.state = {
            copied: false,
        };
        /* eslint-disable */
        this.copyToClipboard = (str) => {
            const el = document.createElement('textarea'); // Create a <textarea> element
            el.value = str; // Set its value to the string that you want copied
            el.setAttribute('readonly', ''); // Make it readonly to be tamper-proof
            el.style.position = 'absolute';
            el.style.left = '-9999px'; // Move outside the screen to make it invisible
            document.body.appendChild(el); // Append the <textarea> element to the HTML document
            const selected = document.getSelection().rangeCount > 0 // Check if there is any content selected previously
                ? document.getSelection().getRangeAt(0) // Store selection if found
                : false; // Mark as false to know no selection existed before
            el.select(); // Select the <textarea> content
            document.execCommand('copy'); // Copy - only works as a result of a user action (e.g. click events)
            document.body.removeChild(el); // Remove the <textarea> element
            if (selected) {
                // If a selection existed before copying
                document.getSelection().removeAllRanges(); // Unselect everything on the HTML document
                document.getSelection().addRange(selected); // Restore the original selection
            }
            clearTimeout(this.copyTimer);
            this.setState({
                copied: true,
            });
            this.copyTimer = setTimeout(() => {
                this.setState({
                    copied: false,
                });
            }, 1000);
        };
        /* eslint-enable */
        this.runHighlighter = throttle(() => {
            // const { language } = this.props;
            // if (!language) return;
            // // component not mounted
            // if (!this._isMounted) return;
            // loadLanguage(language).then(() => {
            //     Prism.highlightElement(this.__code);
            // });
        }, 500, false);
    }
    componentDidMount() {
        this._isMounted = true;
        this.runHighlighter();
    }
    shouldComponentUpdate(nextProps, nextState) {
        // update if source changed
        return (this.getSource(nextProps.children) !== this.getSource(this.props.children) ||
            this.state.copied !== nextState.copied);
    }
    componentDidUpdate() {
        this.runHighlighter();
    }
    componentWillUnmount() {
        this._isMounted = false;
    }
    getSource(children) {
        if (typeof children === 'object') {
            const stringchildren = children.filter((child) => typeof child === 'string');
            return stringchildren.join();
        }
        if (typeof children === 'string')
            return children;
        return children || '';
    }
    fixWhiteSpace($code) {
        if (typeof $code !== 'string')
            return $code;
        let code;
        // remove first newline
        code = $code.replace(/[\s]+\n/, '');
        // remove extra indentation (due to JSX indent)
        const $indent = code.match(/[\s]+/);
        if ($indent) {
            const indent = $indent[0].replace(/\n([\s])/, '$1');
            const codelines = code.split('\n');
            code = codelines
                .map(line => {
                if (line.indexOf(indent) === 0) {
                    return line.replace(indent, '');
                }
                return line;
            })
                .join('\n');
        }
        return code.trim();
    }
    render() {
        const { label, children, language, fixWhiteSpace, className } = this.props;
        let code = this.getSource(children);
        if (fixWhiteSpace) {
            code = this.fixWhiteSpace(code);
        }
        return (<pre className={classy(style.container, className)}>
                {label && (<div ref={ref => {
            this.__label = ref;
        }} className={style.label}>
                        {label}
                    </div>)}

                <Tooltip position="left" content={this.state.copied ? 'Copied!' : 'Copy'}>
                    <span onClick={() => {
            this.copyToClipboard(code);
        }} className={style.copyToClipboard}>
                        <ContentCopyIcon />
                    </span>
                </Tooltip>

                <code ref={ref => {
            this.__code = ref;
        }} className={classy(style.code, language && `language-${language}`)}>
                    {code}
                </code>
            </pre>);
    }
}
CodeBlock.defaultProps = {
    highlight: true,
    fixWhiteSpace: true,
    theme: 'tomorrow',
};
//# sourceMappingURL=CodeBlock.jsx.map