import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import Typography from '../Typography/Typography.js';
import Icon from '../Icon/Icon.js';

const StatusCard = ({ icon, status, count, text, style = { width: '196.4px' }, resetToggle, onSelectedStatus = (_status) => { }, }) => {
    const [isToggled, setIsToggled] = useState(false);
    const hideStatusText = [
        'total defects',
        'defect density',
        'open defects',
        'closed defects',
        'quality score',
    ];
    const swapCountAndText = hideStatusText.includes(status.toLowerCase());
    const redBackground = hideStatusText.includes(status.toLowerCase());
    const handleSelectStatus = (status) => {
        if (hideStatusText.includes(status.toLowerCase())) {
            return;
        }
        setIsToggled(true);
        onSelectedStatus(status);
    };
    useEffect(() => {
        setIsToggled(!resetToggle);
    }, [resetToggle]);
    const handleStaticCard = () => {
        if (status.toLowerCase() === 'defect density') {
            return (jsxs(Fragment, { children: [count.toString().padStart(2, '0'), jsx(Typography, { fontSize: "15px", fontWeight: "semi-bold", children: "/ Modules" })] }));
        }
        else if (status.toLowerCase() === 'quality score') {
            return `${parseFloat(count.toString()).toFixed(2)}%`;
        }
        else {
            return count.toString().padStart(2, '0');
        }
    };
    return (jsxs("div", { className: `ff-card-container ${status.toLowerCase()} ${isToggled ? 'toggled' : ''}`, style: style, onClick: () => handleSelectStatus(status), children: [jsxs("div", { className: "ff-status-bar", children: [jsx("div", { children: jsx(Icon, { name: icon, height: 20, width: 20, hoverEffect: false }) }), !hideStatusText.includes(status.toLowerCase()) && (jsx(Typography, { fontWeight: "semi-bold", fontSize: "10px", textAlign: "center", lineHeight: "15px", className: "ff-status-text", as: "div", children: status.charAt(0).toUpperCase() + status.slice(1).toLowerCase() }))] }), jsx("div", { className: `ff-content ${redBackground ? 'red-background' : ''}`, children: swapCountAndText ? (jsxs(Fragment, { children: [jsx(Typography, { fontWeight: "semi-bold", fontSize: "10px", className: "ff-text", lineHeight: "15px", color: 'var(--ff-chip-text-color)', children: text }), jsx(Typography, { fontWeight: "semi-bold", fontSize: "24px", className: "ff-number", lineHeight: "36px", children: handleStaticCard() })] })) : (jsxs(Fragment, { children: [jsx(Typography, { fontWeight: "semi-bold", fontSize: "24px", className: "ff-number", lineHeight: "24px", color: isToggled ? 'var(--base-bg-color)' : '', children: count.toString().padStart(2, '0') }), jsx(Typography, { className: "ff-text", lineHeight: "18px", color: isToggled ? 'var(--base-bg-color)' : 'var(--ff-chip-text-color)', children: text })] })) })] }));
};

export { StatusCard as default };
//# sourceMappingURL=StatusCard.js.map
