import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { getStatusColor, getStatusLabel, getStatus, } from '../../../utils/getStatusColor/getStatusColor';
import Checkbox from '../../Checkbox';
import Icon from '../../Icon';
import StatusButton from '../../StatusButton';
import Tooltip from '../../Tooltip';
import Typography from '../../Typography';
import StepResultStats from './StepResultStats';
import '../StepLandingTable.scss';
const StepsTitle = ({ isHeaderRequired, isViewPrivilegeMode, onAccordionClick, isBulkEnable, showActionCell, handleMainCheckbox, isAllSelected, isPartialSelected, tableMeta = [], title, totalRows, expanded, actionCell, row, metaData, isClientSide, }) => {
    const columnWidths = tableMeta?.map((col) => col.width);
    const getWidth = (index) => {
        const width = columnWidths[index] ?? 0;
        switch (index) {
            case 0:
                return width + 110;
            case 1:
                return width + (width > 300 ? 60 : 70);
            case 2:
                return width + 20;
            default:
                return 0;
        }
    };
    return (_jsxs("article", { className: "step-title-article", style: {
            ...(!isHeaderRequired &&
                !isClientSide && { backgroundColor: 'var(--hover-color)' }),
        }, children: [_jsx("div", { style: { width: `${getWidth(0)}px` }, children: _jsxs("div", { className: "accordion-header", style: {
                        paddingLeft: isViewPrivilegeMode || isClientSide ? '8px' : '24px',
                    }, children: [!isViewPrivilegeMode && !isClientSide && (_jsx(Checkbox, { onChange: (e) => handleMainCheckbox(title, e.target.checked), checked: isAllSelected(title, totalRows), partial: isPartialSelected(title, totalRows), disabled: totalRows === 0 })), _jsx("div", { className: "header-title", children: _jsx(Typography, { as: "div", fontWeight: "semi-bold", color: isClientSide ? 'var(--brand-color)' : 'var(--nlp-option-color)', cursor: "default", lineHeight: "18px", children: title }) }), isClientSide ? (
                        //TODO: added temporary div will replace with add Icon
                        _jsx("div", { style: { padding: '12px' } })) : (_jsx("div", { className: `accordion-arrow ${expanded ? 'expanded' : ''}`, onClick: () => onAccordionClick(title), children: _jsx(Icon, { name: "arrow_right", color: expanded ? 'var(--brand-color)' : 'var(--default-color)', width: 16, height: 16, className: "steps-arrow-svg" }) })), _jsxs("div", { className: "ff_action_container", children: [metaData && _jsx(StepResultStats, { metaData: metaData }), showActionCell && !isBulkEnable && _jsx(_Fragment, { children: actionCell(row) })] })] }) }), metaData?.message && (_jsx("div", { className: "step-result", style: {
                    width: `${getWidth(1)}px`,
                }, children: _jsx(Tooltip, { title: metaData?.message, placement: "bottom-start", children: _jsx(Typography, { lineHeight: "18px", as: "div", className: "step-result-text", color: getStatusColor(metaData?.status), children: metaData?.message }) }) })), metaData?.status && (_jsx("div", { className: "step-result", style: { width: `${getWidth(2)}px` }, children: _jsx(StatusButton, { label: getStatusLabel(metaData?.status), status: getStatus(metaData?.status), children: metaData?.status }) }))] }));
};
export default StepsTitle;
//# sourceMappingURL=StepsTitle.js.map