import React from 'react';
import { Box, Typography, makeStyles } from '@material-ui/core';
import { SummaryBlock } from '../../../dataDisplay/SummaryBlock';
import { PropTypes } from 'prop-types';
const useStyles = makeStyles((theme) => ({
    circle: {
        width: (props) => props.width || '134px',
        minHeight: (props) => props.height || '134px',
        borderRadius: '50%',
        boxSizing: 'border-box',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        padding: '8px 0px',
        background: (props) => (props === null || props === void 0 ? void 0 : props.background) || theme.palette.background.paper,
        border: (props) => (props === null || props === void 0 ? void 0 : props.borderColor)
            ? `2px solid ${props.borderColor}`
            : `2px solid #BDBDBD`
    },
    cardStat: {
        fontSize: '1.5rem',
        fontWeight: '700',
        color: '#000',
        textAlign: 'center',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        padding: '0px',
        width: (props) => props.width || '134px',
        height: '50%'
    },
    primaryText: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        padding: '0px',
        gap: '8px',
        fontWeight: '400',
        fontSize: '22px',
        fontStyle: 'normal',
        width: (props) => props.width || '134px',
        height: '32px',
        margin: '-4px 0px'
    },
    secondaryText: {
        fontStyle: 'normal',
        fontWeight: '400',
        fontSize: '12px',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        padding: '0px',
        width: (props) => props.width || '134px',
        height: '20px',
        color: 'rgba(0, 0, 0, 0.6)'
    },
    keySummary: {
        fontSize: '1rem',
        fontWeight: '700',
        color: '#000',
        textAlign: 'center',
        lineHeight: '50px',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        padding: '0px',
        width: (props) => props.width || '134px',
        height: '50%',
        borderTop: (props) => (props === null || props === void 0 ? void 0 : props.borderColor)
            ? `2px solid ${props.borderColor}`
            : `2px solid #BDBDBD`
    }
}));
const DEFAULT_SUMMARY_BLOCK = {
    border: 'none',
    width: '69px',
    height: '32px',
    fontStyle: 'normal',
    fontWeight: 400,
    fontSize: '22px',
    label: { color: '#000' }
};
export const CircleGaugeWidget = (props) => {
    const { value, label, textVariant = 'h5', secondaryValue, secondaryStartLabel, background, style: styleProps } = props;
    const classes = useStyles(props);
    return (React.createElement(Box, { className: classes.circle, style: styleProps }, React.createElement(Box, { className: classes.cardStat }, React.createElement(Typography, { className: classes.primaryText }, value), React.createElement(Typography, { className: classes.secondaryText }, label)), React.createElement(Box, { className: classes.keySummary }, secondaryValue && (React.createElement(SummaryBlock, { value: secondaryValue, startLabel: secondaryStartLabel || '', textVariant: textVariant, backgroundColor: background, style: (styleProps === null || styleProps === void 0 ? void 0 : styleProps.summaryBlock) || DEFAULT_SUMMARY_BLOCK })))));
};
CircleGaugeWidget.propTypes = {
    /** @type {string, number} label showed in the bottom part of the circle gauge */
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
    /** @type {?string} optional label */
    label: PropTypes.string,
    /** @type {?string} optional icon to display ticks in the graph */
    textVariant: PropTypes.string,
    /** @type {string, number} optional second value */
    secondaryValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
        .isRequired,
    /** @type {?string}  optional started label */
    secondaryStartLabel: PropTypes.string,
    /** @type {?string} custom background color */
    background: PropTypes.string,
    /** @type {object} optional additional css properties */
    style: PropTypes.object
};
//# sourceMappingURL=CircleGaugeWidget.js.map