"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Frame = exports.Nesting = exports.Overrides = exports.Basic = void 0;
var react_make_styles_1 = require("@fluentui/react-make-styles");
var react_provider_1 = require("@fluentui/react-provider");
var react_theme_1 = require("@fluentui/react-theme");
var React = require("react");
var ReactDOM = require("react-dom");
var useStyles = react_make_styles_1.makeStyles({
    root: function (theme) { return ({
        border: "5px solid " + theme.alias.color.neutral.neutralStroke1,
        backgroundColor: theme.alias.color.neutral.neutralBackground1,
        color: theme.alias.color.neutral.neutralForeground1,
        margin: '5px',
        padding: '5px',
    }); },
    primary: function (theme) { return ({
        borderColor: theme.alias.color.neutral.brandForegroundLink,
        color: theme.alias.color.neutral.brandForegroundLink,
    }); },
    overrides: {
        color: 'red',
        borderColor: 'red',
    },
});
var Container = function (props) {
    var classes = useStyles();
    var className = react_make_styles_1.mergeClasses(classes.root, props.primary && classes.primary, props.className);
    return React.createElement("div", { className: className }, props.children);
};
var ContainerWithOverrides = function (props) {
    var classes = useStyles();
    return (React.createElement(Container, { className: classes.root, primary: true }, props.children));
};
var PortalFrame = function (_a) {
    var children = _a.children;
    var _b = React.useState(null), frameRef = _b[0], setFrameRef = _b[1];
    return (React.createElement(React.Fragment, null,
        React.createElement("iframe", { ref: setFrameRef, style: { height: 300, width: 600, border: 0, padding: 20 }, title: "An example of Provider in iframe" }),
        frameRef &&
            ReactDOM.createPortal(children(frameRef.contentDocument), frameRef.contentDocument.body)));
};
var Basic = function () { return (React.createElement(react_provider_1.FluentProvider, { theme: react_theme_1.webLightTheme },
    React.createElement(Container, null, "Hello world!"),
    React.createElement(Container, { primary: true }, "Hello world!"))); };
exports.Basic = Basic;
var Overrides = function () { return (React.createElement(react_provider_1.FluentProvider, { theme: react_theme_1.webLightTheme },
    React.createElement(ContainerWithOverrides, null, "Hello world!"))); };
exports.Overrides = Overrides;
var Nesting = function () { return (React.createElement(react_provider_1.FluentProvider, { theme: react_theme_1.webLightTheme },
    React.createElement(react_provider_1.FluentProvider, { theme: react_theme_1.teamsLightTheme },
        React.createElement(Container, { primary: true }, "Hello world!")))); };
exports.Nesting = Nesting;
var Frame = function () { return (React.createElement(PortalFrame, null, function (externalDocument) { return (React.createElement(react_provider_1.FluentProvider, { targetDocument: externalDocument, theme: react_theme_1.webLightTheme },
    React.createElement(Container, null, "Hello world!"),
    React.createElement(Container, { primary: true }, "Hello world!"))); })); };
exports.Frame = Frame;
//# sourceMappingURL=Basic.stories.js.map