"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PropertyEditorSection = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const Collapse_1 = tslib_1.__importDefault(require("@material-ui/core/Collapse"));
const DropdownOpenIcon_1 = require("../Icon/DropdownOpenIcon");
const PropertyEditorSection = (props) => {
    const [open, setOpen] = (0, react_1.useState)(props.startOpen);
    (0, react_1.useEffect)(() => {
        setOpen(props.startOpen);
    }, [props.startOpen]);
    return ((0, jsx_runtime_1.jsxs)(PropertyEditorSectionRender, { children: [(0, jsx_runtime_1.jsxs)(HeaderRender, { children: [props.label && (0, jsx_runtime_1.jsx)(Label, { children: props.label }), (0, jsx_runtime_1.jsx)(ActionRender, { open: open, onClick: (event) => {
                            event.stopPropagation();
                            setOpen(!open);
                            props.updateCallback();
                        }, children: (0, jsx_runtime_1.jsx)(DropdownOpenIcon_1.DropdownOpenIcon, {}) })] }), (0, jsx_runtime_1.jsx)(Collapse_1.default, { in: open, children: (0, jsx_runtime_1.jsx)(PropertyEditorSectionBody, { children: props.renderUI() }) })] }));
};
exports.PropertyEditorSection = PropertyEditorSection;
const PropertyEditorSectionRender = styled_components_1.default.div `
    display: flex;
    flex-direction: column;
    justify-content: center;
`;
const HeaderRender = styled_components_1.default.div `
    display: flex;
`;
const Label = styled_components_1.default.label `
    font-size: 14px;
`;
const ActionRender = styled_components_1.default.div `
    margin-left: auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    ${(props) => props.open && `transform: rotate(180deg);`}
`;
const PropertyEditorSectionBody = styled_components_1.default.div `
    display: flex;
    flex-direction: column;

    > * {
        margin-bottom: 10px !important;
    }
`;
//# sourceMappingURL=PropertyEditorSection.js.map