import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
import { FluentProvider } from '@fluentui/react-provider';
import { webLightTheme, teamsLightTheme } from '@fluentui/react-theme';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
var useStyles = 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 = 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)));
};
export var Basic = function () { return (React.createElement(FluentProvider, { theme: webLightTheme },
    React.createElement(Container, null, "Hello world!"),
    React.createElement(Container, { primary: true }, "Hello world!"))); };
export var Overrides = function () { return (React.createElement(FluentProvider, { theme: webLightTheme },
    React.createElement(ContainerWithOverrides, null, "Hello world!"))); };
export var Nesting = function () { return (React.createElement(FluentProvider, { theme: webLightTheme },
    React.createElement(FluentProvider, { theme: teamsLightTheme },
        React.createElement(Container, { primary: true }, "Hello world!")))); };
export var Frame = function () { return (React.createElement(PortalFrame, null, function (externalDocument) { return (React.createElement(FluentProvider, { targetDocument: externalDocument, theme: webLightTheme },
    React.createElement(Container, null, "Hello world!"),
    React.createElement(Container, { primary: true }, "Hello world!"))); })); };
//# sourceMappingURL=Basic.stories.js.map