import Icon from "../Icon/Icon";
import IconProp from "../../../Types/Icon/IconProp";
import React, { useEffect, useState, } from "react";
const CollapsibleSection = (props) => {
    var _a, _b;
    const [isCollapsed, setIsCollapsed] = useState((_b = (_a = props.defaultCollapsed) !== null && _a !== void 0 ? _a : props.isCollapsed) !== null && _b !== void 0 ? _b : false);
    useEffect(() => {
        if (props.isCollapsed !== undefined) {
            setIsCollapsed(props.isCollapsed);
        }
    }, [props.isCollapsed]);
    const handleToggle = () => {
        const newCollapsedState = !isCollapsed;
        setIsCollapsed(newCollapsedState);
        if (props.onToggle) {
            props.onToggle(newCollapsedState);
        }
    };
    const variant = props.variant || "default";
    const getContainerClassName = () => {
        const baseClassName = props.className || "";
        switch (variant) {
            case "card":
                return `bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden ${baseClassName}`;
            case "bordered":
                return `border border-gray-200 rounded-lg overflow-hidden ${baseClassName}`;
            default:
                return baseClassName;
        }
    };
    const getHeaderClassName = () => {
        const baseHeaderClassName = props.headerClassName || "";
        switch (variant) {
            case "card":
                return `px-4 py-3 bg-gray-50 ${baseHeaderClassName}`;
            case "bordered":
                return `px-4 py-3 bg-gray-50 ${baseHeaderClassName}`;
            default:
                return `py-2 ${baseHeaderClassName}`;
        }
    };
    const getContentClassName = () => {
        switch (variant) {
            case "card":
                return "px-4 py-3";
            case "bordered":
                return "px-4 py-3";
            default:
                return "py-2";
        }
    };
    return (React.createElement("div", { className: getContainerClassName() },
        React.createElement("div", { className: `flex items-center justify-between cursor-pointer select-none ${getHeaderClassName()}`, onClick: handleToggle, role: "button", tabIndex: 0, onKeyDown: (e) => {
                if (e.key === "Enter" || e.key === " ") {
                    e.preventDefault();
                    handleToggle();
                }
            }, "aria-expanded": !isCollapsed },
            React.createElement("div", { className: "flex items-center flex-1 min-w-0" },
                React.createElement(Icon, { icon: isCollapsed ? IconProp.ChevronRight : IconProp.ChevronDown, className: "w-4 h-4 text-gray-500 mr-2 flex-shrink-0 transition-transform duration-200" }),
                React.createElement("div", { className: "flex-1 min-w-0" },
                    React.createElement("div", { className: "flex items-center" },
                        React.createElement("span", { className: "text-sm font-medium text-gray-900 truncate" }, props.title),
                        isCollapsed && props.badge && (React.createElement("span", { className: "ml-2 flex-shrink-0" }, typeof props.badge === "string" ? (React.createElement("span", { className: "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600" }, props.badge)) : (props.badge)))),
                    props.description && !isCollapsed && (React.createElement("p", { className: "text-xs text-gray-500 mt-0.5 truncate" }, props.description)))),
            props.rightElement && (React.createElement("div", { className: "ml-2 flex-shrink-0", onClick: (e) => {
                    e.stopPropagation();
                } }, props.rightElement))),
        React.createElement("div", { className: `transition-all duration-200 ease-in-out overflow-hidden ${isCollapsed ? "max-h-0 opacity-0" : "max-h-[5000px] opacity-100"}` },
            React.createElement("div", { className: getContentClassName() }, props.children))));
};
export default CollapsibleSection;
//# sourceMappingURL=CollapsibleSection.js.map