import React from 'react';
import PropTypes from 'prop-types';
import MuiTypography from './TypographyStyles';
import Tooltip from '@mui/material/Tooltip';
import * as R from 'ramda';
const emphasisToCSSProps = {
    bold: { fontWeight: 'bold' },
    italic: { fontStyle: 'italic' },
    overline: { textDecoration: 'overline' },
    'line-through': { textDecoration: 'line-through' },
    underline: { textDecoration: 'underline' }
};
const getCSSPropsFromEmphasis = (emphasis) => R.prop(emphasis, emphasisToCSSProps);
const parseEmphasis = (emphasis) => {
    if (!emphasis)
        return {};
    if (R.is(String, emphasis))
        return getCSSPropsFromEmphasis(emphasis);
    if (R.is(Array, emphasis))
        // Parse all emphasis array values in order to concatenate all the associated CSS object properties
        return R.reduce((acc, elem) => {
            // Retrieves the associated CSS object for an emphasis value
            const cssObj = getCSSPropsFromEmphasis(elem);
            /**
             * If 2 or more CSS objects have the same property, we need to merge their values
             * e.g.
             * - overline => { textDecoration: 'overline' },
             * - line-through => { textDecoration: 'line-through' }
             * becomes:
             * { textDecoration: 'overline line-through' }
             */
            return R.mergeWithKey((prop, val1, val2) => (R.includes(prop, Object.getOwnPropertyNames(acc)) ? `${val1} ${val2}` : val2), acc, cssObj);
        }, {}, emphasis);
    return {};
};
/**
 * Use typography to present your design and content as clearly and efficiently as possible.
 */
const Typography = ({ tooltip, emphasis, style, variant = 'inherit', ...rest }) => {
    const base = React.createElement(MuiTypography, { style: { ...style, ...parseEmphasis(emphasis) }, variant: variant, ...rest });
    return tooltip ? (React.createElement(Tooltip, { title: tooltip, placement: "bottom-start" }, base)) : (base);
};
Typography.propTypes = {
    /**
     * If provided, a text will appear on hover.
     */
    tooltip: PropTypes.node,
    /**
     * Inline styles object.
     */
    style: PropTypes.object,
    /**
     * The color of the text.
     */
    color: PropTypes.oneOf(['initial', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary', 'error']),
    /**
     * Controls the text emphasis. Different font styles can be used individually or in combination.
     */
    emphasis: PropTypes.oneOfType([
        PropTypes.oneOf(['bold', 'italic', 'underline', 'line-through', 'overline']),
        PropTypes.arrayOf(PropTypes.oneOf(['bold', 'italic', 'underline', 'line-through', 'overline']).isRequired)
    ]),
    /**
     * @default 'inherit'
     * Applies the theme typography styles.
     */
    variant: PropTypes.oneOf([
        'body1',
        'body2',
        'button',
        'caption',
        'h1',
        'h2',
        'h3',
        'h4',
        'h5',
        'h6',
        'inherit',
        'overline',
        'subtitle1',
        'subtitle2'
    ])
};
export default Typography;
//# sourceMappingURL=Typography.js.map