import { __assign, __extends } from "tslib";
import * as React from 'react';
import { Icon, Stack, TooltipHost } from '@fluentui/react';
import { CollapsibleSection, CollapsibleSectionTitle, } from '@fluentui/react-experiments/lib/CollapsibleSection';
// TODO: convert this example to use extendComponent
// This is our customized component making use of default CollapsibleSectionTitle while using slots
// to add the tooltip and icon. This would also have to be modified to add a prop for tooltip content (not done here)
var CustomizedCollapsibleSectionTitle = function (props) {
    var titleText = {
        text: {
            render: function (renderProps, DefaultComponent) { return (
            // Supplement the default title text with an icon. Wrap in a Stack for proper placement.
            React.createElement(Stack, { grow: true, horizontal: true, horizontalAlign: "space-between" },
                React.createElement(DefaultComponent, __assign({}, renderProps), props.text),
                React.createElement(Icon, { iconName: "warning", styles: { root: { color: 'red' } } }))); },
        },
    };
    // Wrap the entire title in a Tooltip
    return (React.createElement(TooltipHost, { content: "This is the tooltip" },
        React.createElement(CollapsibleSectionTitle, __assign({}, props, { slots: titleText }))));
};
var CollapsibleSectionSlotsExample = /** @class */ (function (_super) {
    __extends(CollapsibleSectionSlotsExample, _super);
    function CollapsibleSectionSlotsExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    CollapsibleSectionSlotsExample.prototype.render = function () {
        return (React.createElement("div", null,
            React.createElement("p", null, "This CollapsibleSection has been customized with a TooltipHost around its entire title and an icon in its title."),
            React.createElement(Stack, { maxWidth: 200, styles: { root: { border: '1px solid black' } } },
                React.createElement(CollapsibleSection, { key: 1, defaultCollapsed: true, title: "Shorthand Title Text", slots: {
                        title: {
                            component: CustomizedCollapsibleSectionTitle,
                        },
                    } }, "Content 1"))));
    };
    return CollapsibleSectionSlotsExample;
}(React.Component));
export { CollapsibleSectionSlotsExample };
//# sourceMappingURL=CollapsibleSection.Slots.Example.js.map