import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import Typography from '../Typography';
import Icon from '../Icon';
import './StatusCard.scss';
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 default StatusCard;
//# sourceMappingURL=StatusCard.js.map