import React from 'react';
import PropTypes, { number } from 'prop-types';
import { StyledCard, CardActions, CardCategory, CardContent, StyledCardHeader, CardStatContainer, CardTitle, statIconStyle, StatAction } from './StatsChartStyles';
import { Chart } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, LineController, PointElement, LineElement, BarElement, BarController, Tooltip } from 'chart.js';
import Divider from '@mui/material/Divider';
ChartJS.register(CategoryScale, LinearScale, LineController, PointElement, LineElement, BarElement, BarController, Tooltip);
/**
 * The StatsChart component provides a set of frequently and customizable used chart types (`line` and `bar`).
 */
const StatsChart = ({ chartColor = 'info', iconColor = 'grey', title, text, statText, StatIcon, type = 'line', data, statAction, ...rest }) => {
    return (React.createElement(StyledCard, { disablePadding: true },
        React.createElement(StyledCardHeader, { color: chartColor, subheader: React.createElement(Chart, { type: type, data: data, ...rest }) }),
        React.createElement(CardContent, null,
            React.createElement(CardTitle, { variant: "subtitle1" }, title),
            text && React.createElement(CardCategory, { variant: "subtitle2" }, text)),
        StatIcon || statText ? (React.createElement(React.Fragment, null,
            React.createElement(Divider, null),
            React.createElement(CardActions, null,
                React.createElement(CardStatContainer, null,
                    StatIcon && React.createElement(StatIcon, { style: statIconStyle, color: iconColor }),
                    statText),
                React.createElement(StatAction, null, statAction)))) : null));
};
StatsChart.propTypes = {
    /**
     * @default 'line'
     * Chart type.
     */
    type: PropTypes.oneOf(['line', 'bar']),
    /**
     * Chart title.
     */
    title: PropTypes.string,
    /**
     * The text content of chart.
     */
    text: PropTypes.string,
    /**
     * Chart icon.
     */
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    StatIcon: PropTypes.object,
    /**
     * @default 'grey'
     * Chart icon color.
     */
    iconColor: PropTypes.oneOf(['primary', 'secondary', 'info', 'success', 'warning', 'error']),
    /**
     * @default 'info'
     * Chart color.
     */
    chartColor: PropTypes.oneOf(['primary', 'secondary', 'info', 'success', 'warning', 'error', 'rose', 'dark']),
    /**
     * Chart status text.
     */
    statText: PropTypes.node,
    /**
     * Chart data.
     */
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    //@ts-ignore
    data: PropTypes.shape({
        labels: PropTypes.arrayOf(PropTypes.string).isRequired,
        datasets: PropTypes.arrayOf(PropTypes.shape({
            data: PropTypes.arrayOf(number).isRequired,
            label: PropTypes.string.isRequired,
            backgroundColor: PropTypes.string.isRequired,
            borderColor: PropTypes.string.isRequired
        }).isRequired).isRequired
    }).isRequired,
    /**
     *  Actions to be displayed in the right corner of the card.
     */
    statAction: PropTypes.node
};
export default StatsChart;
//# sourceMappingURL=StatsChart.js.map