"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXColSpan = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const PHXColSpan = (props) => {
    const { children, className = '', defaultOpen = false, hiddenAction = false, iconInformation, onClickIconInformation, primaryTitle, title, } = props;
    const [isOpen, setIsOpen] = (0, react_1.useState)(defaultOpen);
    const [height, setHeight] = (0, react_1.useState)(defaultOpen ? 'auto' : 0);
    const contentRef = (0, react_1.useRef)(null);
    const toggleCollapse = () => {
        if (!isOpen && contentRef.current) {
            const scrollHeight = contentRef.current.scrollHeight;
            setHeight(scrollHeight);
        }
        else {
            setHeight(0);
        }
        setIsOpen((prev) => !prev);
    };
    (0, react_1.useEffect)(() => {
        if (defaultOpen && contentRef.current) {
            setHeight('auto');
        }
    }, [defaultOpen]);
    return (react_1.default.createElement("div", { className: `${className} mx-auto` },
        react_1.default.createElement("div", { className: primaryTitle ? 'rounded-lg border border-gray-200 bg-white shadow-[0rem_0.0825rem_0rem_#00000012]' : '' },
            react_1.default.createElement("div", { className: primaryTitle ? 'px-4 py-4' : '' },
                react_1.default.createElement("div", { className: 'flex items-center justify-between w-full' },
                    react_1.default.createElement("div", { className: 'flex items-center gap-1' },
                        react_1.default.createElement("span", { className: primaryTitle ? 'text-sm font-semibold leading-5 text-gray-900' : 'text-xs leading-5 text-gray-800' }, title),
                        iconInformation && (react_1.default.createElement("button", { onClick: onClickIconInformation, type: 'button' },
                            react_1.default.createElement("svg", { fill: 'none', height: 20, viewBox: '0 0 20 20', width: 20, xmlns: 'http://www.w3.org/2000/svg' },
                                react_1.default.createElement("path", { d: 'M11 6.5C11 7.05228 10.5523 7.5 10 7.5C9.44772 7.5 9 7.05228 9 6.5C9 5.94772 9.44772 5.5 10 5.5C10.5523 5.5 11 5.94772 11 6.5Z', fill: '#8A8A8A' }),
                                react_1.default.createElement("path", { d: 'M10.75 9.25C10.75 8.83579 10.4142 8.5 10 8.5C9.58579 8.5 9.25 8.83579 9.25 9.25V13.75C9.25 14.1642 9.58579 14.5 10 14.5C10.4142 14.5 10.75 14.1642 10.75 13.75V9.25Z', fill: '#8A8A8A' }),
                                react_1.default.createElement("path", { clipRule: 'evenodd', d: 'M10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17ZM10 15.5C13.0376 15.5 15.5 13.0376 15.5 10C15.5 6.96243 13.0376 4.5 10 4.5C6.96243 4.5 4.5 6.96243 4.5 10C4.5 13.0376 6.96243 15.5 10 15.5Z', fill: '#8A8A8A', fillRule: 'evenodd' }))))),
                    !hiddenAction && (react_1.default.createElement("button", { className: 'flex items-center justify-center transition-transform duration-300 rounded-lg h-7 w-7 hover:bg-gray-100', onClick: toggleCollapse, type: 'button' },
                        react_1.default.createElement("svg", { className: `
                    transform-gpu origin-center transition-transform duration-300
                    ${!isOpen ? 'scale-y-[-1]' : 'scale-y-100'}
                  `, fill: 'none', height: 20, viewBox: '0 0 20 20', width: 20, xmlns: 'http://www.w3.org/2000/svg' },
                            react_1.default.createElement("path", { clipRule: 'evenodd', d: 'M6.23966 11.7996C6.5432 12.0814 7.01775 12.0639 7.2996 11.7603L10 8.85221L12.7004 11.7603C12.9823 12.0639 13.4568 12.0814 13.7603 11.7996C14.0639 11.5177 14.0815 11.0432 13.7996 10.7397L10.5496 7.23966C10.4077 7.08683 10.2086 7 10 7C9.79145 7 9.59232 7.08683 9.45041 7.23966L6.20041 10.7397C5.91856 11.0432 5.93613 11.5177 6.23966 11.7996Z', fill: '#4A4A4A', fillRule: 'evenodd' }))))),
                react_1.default.createElement("div", { style: {
                        maxHeight: isOpen ? height : 0,
                        opacity: isOpen ? 1 : 0,
                        transition: 'all 0.3s ease-in-out',
                        overflow: 'hidden',
                    } },
                    react_1.default.createElement("div", { ref: contentRef, className: 'pt-3 ' }, children))))));
};
exports.PHXColSpan = PHXColSpan;
//# sourceMappingURL=ColSpan.js.map