/**
 * StatsWidget Component
 *
 * @package Advanced_Customer_Account
 */

import { __ } from '@wordpress/i18n';
import classnames from 'classnames';

/**
 * Loading spinner for stat value.
 *
 * @return {JSX.Element} Loading spinner.
 */
const StatLoadingSpinner = () => (
    <span className="aca-stat__loading">
        <span className="aca-stat__spinner" />
    </span>
);

/**
 * Single stat item component.
 *
 * @param {Object}  props           Component props.
 * @param {string}  props.icon      Dashicon name.
 * @param {string}  props.label     Stat label.
 * @param {string}  props.value     Stat value.
 * @param {string}  props.color     Color theme.
 * @param {boolean} props.isLoading Loading state.
 * @return {JSX.Element} StatItem component.
 */
const StatItem = ( { icon, label, value, color = 'primary', isLoading = false } ) => {
    const classes = classnames( 'aca-stat', `aca-stat--${ color }` );

    return (
        <div className={ classes }>
            <div className="aca-stat__icon">
                <span className={ `dashicons dashicons-${ icon }` } aria-hidden="true" />
            </div>
            <div className="aca-stat__content">
                <span className="aca-stat__value">
                    { isLoading ? <StatLoadingSpinner /> : value }
                </span>
                <span className="aca-stat__label">{ label }</span>
            </div>
        </div>
    );
};

/**
 * Stats widget component.
 *
 * @param {Object}  props           Component props.
 * @param {Object}  props.stats     Stats data.
 * @param {boolean} props.isLoading Loading state.
 * @return {JSX.Element} StatsWidget component.
 */
const StatsWidget = ( { stats, isLoading } ) => {
    // Default values while loading
    const defaultStats = {
        total_orders: 0,
        total_spent: '$0.00',
        pending_orders: 0,
        orders_this_month: 0,
    };

    const data = stats || defaultStats;

    return (
        <div className="aca-stats-widget">
            <StatItem
                icon="cart"
                label={ __( 'Total Orders', 'advanced-customer-account' ) }
                value={ data.total_orders }
                color="primary"
                isLoading={ isLoading }
            />
            <StatItem
                icon="money-alt"
                label={ __( 'Total Spent', 'advanced-customer-account' ) }
                value={ data.total_spent }
                color="success"
                isLoading={ isLoading }
            />
            <StatItem
                icon="clock"
                label={ __( 'Pending', 'advanced-customer-account' ) }
                value={ data.pending_orders }
                color="warning"
                isLoading={ isLoading }
            />
            <StatItem
                icon="calendar-alt"
                label={ __( 'This Month', 'advanced-customer-account' ) }
                value={ data.orders_this_month }
                color="info"
                isLoading={ isLoading }
            />
        </div>
    );
};

export default StatsWidget;