import React from 'react';
import { makeStyles, Typography, Box, useTheme } from '@material-ui/core';
import { PropTypes } from 'prop-types';
import { useSplitDecimal } from '../../hooks/useSplitDecimal';
import { grey } from '@material-ui/core/colors';
import clsx from 'clsx';
import { FluentIcon } from '../../utilities/iconLibrary/FluentIcon';
import { getEllipseColor } from '../../utilities/style/colorConverter';
const useStyles = makeStyles(theme => ({
    rootContainer: {
        backgroundColor: props => (props === null || props === void 0 ? void 0 : props.backgroundColor) || theme.palette.background.paper,
        borderLeft: props => ((props === null || props === void 0 ? void 0 : props.noLeftBorder) ? '0px' : 'solid 1px'),
        borderRight: props => ((props === null || props === void 0 ? void 0 : props.noRightBorder) ? '0px' : 'solid 1px'),
        height: props => props === null || props === void 0 ? void 0 : props.height,
        width: props => props === null || props === void 0 ? void 0 : props.width
    },
    labelOverflow: {
        whiteSpace: 'nowrap',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        fontWeight: '400',
    },
    labelValue: {
        fontWeight: '400',
        fontSize: '16px',
    },
    labelText: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'flex-start',
        padding: '0px 10px',
        color: grey[500],
        fontSize: props => (props === null || props === void 0 ? void 0 : props.labelVariant) === 'caption' && '12px',
        fontWeight: props => ((props === null || props === void 0 ? void 0 : props.labelVariant) === 'caption' ? '400' : '500'),
    },
    iconWrapper: {
        marginLeft: theme.spacing(1),
    },
}));
/**
 * `SummaryBlock` component
 */
export const SummaryBlock = props => {
    const { value, startLabel, label, icon, style, primary, secondary, textVariant, labelVariant = 'caption', children, valueIsDecimal = true, iconColor, } = props;
    const { textValue } = useSplitDecimal(value);
    const theme = useTheme();
    const classes = useStyles(props);
    return (React.createElement(Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", className: classes.rootContainer, style: Object.assign({ gap: '2px' }, style) }, React.createElement(Box, { display: "flex", justifyContent: "center", alignItems: "center", alignSelf: "stretch" }, primary ? (primary) : (React.createElement(React.Fragment, null, startLabel && (React.createElement(Typography, { variant: "caption", className: clsx(classes.labelOverflow) }, startLabel)), React.createElement(Typography, { variant: textVariant, className: clsx(textVariant ? {} : classes.labelValue, classes.labelOverflow), style: style === null || style === void 0 ? void 0 : style.mainLabel }, textValue.mainLabel), valueIsDecimal && textValue.decimalLabel && (React.createElement(Typography, { variant: "caption", className: clsx(classes.labelOverflow) }, ".", textValue.decimalLabel)), icon && (React.createElement("div", { className: classes.iconWrapper }, React.createElement(FluentIcon, { component: icon, color: iconColor ? getEllipseColor(theme, iconColor) : null })))))), secondary ? (secondary) : (React.createElement(Typography, { variant: labelVariant, className: clsx(classes.labelText, classes.labelOverflow), style: style === null || style === void 0 ? void 0 : style.label }, label)), children));
};
SummaryBlock.propTypes = {
    /** @type {?string} main label, if you pass a number with decimals the card will show the decimals in the left side */
    value: PropTypes.string.isRequired,
    /** @type {?string} label showed in the bottom part of the block summary */
    label: PropTypes.string,
    /** @type {?string} optional symbol to put at the right side of the value */
    startLabel: PropTypes.string,
    /** @type {?elementType} optional icon to display in the left side of the value */
    icon: PropTypes.elementType,
    /** @type {?object} optional additional css properties */
    style: PropTypes.object,
    /** @type {?object}  render prop if you want to pass a custom react element instead of the predefined value */
    primary: PropTypes.elementType,
    /** @type {?object} render prop if you want to pass a custom react element instead of the predefined label*/
    secondary: PropTypes.elementType,
    /** @type {?string} optional variant for the main text e.g ['caption', 'subtitle'] */
    textVariant: PropTypes.string,
    /** @type {?string} optional variant for the label e.g ['caption', 'subtitle'] */
    labelVariant: PropTypes.string,
    /** @type {?string} optional background color for the full content */
    backgroundColor: PropTypes.string,
    /** @type {?elementType} optional children element */
    children: PropTypes.elementType,
};
//# sourceMappingURL=SummaryBlock.js.map