import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import './PromptContainer.scss';
import Icon from '../Icon';
import Tooltip from '../Tooltip';
import Typography from '../Typography';
const PromptContainer = ({ id = 0, serialNumber, activeId, setActiveId, children, onIconClick, numberChildren, onContainerClick, onNextClick, onPreviousClick, disabled, isEditAccess, versionsLength, count, hiddenActions = [], }) => {
    const [isExpanded, setIsExpanded] = useState(false);
    const [showReadMore, setShowReadMore] = useState(false);
    const contentRef = useRef(null);
    const hiddenListIcons = Array.isArray(hiddenActions)
        ? hiddenActions
        : hiddenActions
            ? [hiddenActions]
            : [];
    const actions = [
        {
            action: 'delete',
            title: 'Delete',
            color: 'var(--ff-delete-button-attachment)',
        },
        {
            action: 'edit',
            title: 'Edit',
            color: 'var(--label-edit-text-label-color)',
        },
        {
            action: 'regenerate',
            title: 'Regenerate',
            color: 'var(--label-edit-text-label-color)',
        },
    ];
    const handleContainerClick = () => {
        setActiveId(id);
        onContainerClick();
    };
    const handleNavigationClick = (e, callback) => {
        e.stopPropagation();
        callback();
    };
    const handleIconClick = (e, action) => {
        e.stopPropagation();
        onIconClick(action);
    };
    const handleReadMoreClick = () => {
        if (contentRef.current) {
            const computedStyle = getComputedStyle(contentRef.current);
            let lineHeight = parseFloat(computedStyle.fontSize) * 1.2;
            const maxHeight = lineHeight * 6;
            if (contentRef.current.scrollHeight > maxHeight) {
                setShowReadMore(true);
            }
        }
    };
    useEffect(() => {
        if (contentRef.current) {
            handleReadMoreClick();
        }
    }, []);
    const toggleExpand = (e) => {
        e.stopPropagation();
        setIsExpanded(!isExpanded);
    };
    return (_jsxs("div", { className: `ff-prompt-container-Block ${activeId === id ? 'active' : 'inactive'} `, onClick: handleContainerClick, children: [_jsx(Typography, { fontSize: 8, className: "ff-prompt-number-bg-color", as: "span", children: `Test cases ${serialNumber}` }), _jsxs(_Fragment, { children: [_jsxs("div", { className: `ff-prompt-content ${isExpanded ? 'expanded' : ''}`, ref: contentRef, children: [children, isExpanded && (_jsxs(_Fragment, { children: [_jsx("span", { role: "button", "aria-label": "toggleExpand", onClick: toggleExpand, className: "read-less-btn", children: _jsx(Typography, { color: "var(--brand-color)", fontWeight: "semi-bold", className: "read-more-btn-text", children: "Read Less" }) }), ' '] }))] }), showReadMore && !isExpanded && (_jsx("div", { role: "button", "aria-label": "toggleExpand", onClick: toggleExpand, className: "read-more-btn", children: _jsx(Typography, { color: "var(--brand-color)", fontWeight: "semi-bold", className: "read-more-btn-text", children: "Read More" }) }))] }), _jsxs("div", { className: "ff-prompt-icons", children: [_jsx("div", { className: "ff-prompt-icons-leftside", children: actions
                            .filter((act) => !hiddenListIcons.includes(act.action))
                            .map((act, index) => {
                            const isDelete = act?.action === 'delete';
                            const isRegenerate = act?.action === 'regenerate';
                            const shouldDisableIcon = (isEditAccess && isDelete) ||
                                (isRegenerate && (versionsLength ?? 0) >= 3) ||
                                disabled;
                            return (_jsx(Tooltip, { title: act.title, placement: "bottom", children: _jsx(Icon, { disabled: shouldDisableIcon, name: act.action, color: act.color, hoverEffect: true, onClick: (e) => handleIconClick(e, act.action) }) }, `${act?.title}-${index}`));
                        }) }), _jsxs("div", { className: "ff-prompt-icons-rightside", children: [_jsx(Icon, { disabled: count === 1, className: "ff-prompt-icons-style", name: "arrow_left_accordian", color: "var(--table-column-text-color)", width: 18, height: 18, onClick: (e) => handleNavigationClick(e, onPreviousClick), cursorType: 'pointer' }), numberChildren, _jsx(Icon, { disabled: count === versionsLength, className: "ff-prompt-icons-style", name: "arrow_right_icon", color: "var(--table-column-text-color)", width: 18, height: 18, onClick: (e) => handleNavigationClick(e, onNextClick), cursorType: 'pointer' })] })] })] }));
};
export default PromptContainer;
//# sourceMappingURL=PromptContainer.js.map