'use strict';

import React from 'react';
import PropTypes from 'prop-types';
import {translate} from '../../utils';
import {deprecation} from '../utils/functions';

// @deprecated. use DangerousHTML instead
class Translate extends React.Component<any> {
    static propTypes = {
        children: PropTypes.node.isRequired,
        className: PropTypes.string,
        testAutomationId: PropTypes.string
    };

    static defaultProps = {
        className: null,
        testAutomationId: null
    };

    render() {
        let {
            children,
            className,
            testAutomationId,
            ['data-test-automation-id']: dataTestAutomationId
        } = this.props;
        //FIXME .toString() of children?
        return (
            <span
                className={className}
                data-test-automation-id={testAutomationId || dataTestAutomationId}
                dangerouslySetInnerHTML={{__html: translate(children as any, this.props)}}
            />
        );
    }
}

const DeprecatedTranslate = deprecation(
    Translate,
    'Use `DangerousHTML` component for inserting html or function `translate` for templates/pluralization.'
);

export {DeprecatedTranslate as Translate};
