"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MultilineLabelExample = exports.CustomizableLabelExample = void 0;
var React = require("react");
var react_label_1 = require("@fluentui/react-label");
var react_make_styles_1 = require("@fluentui/react-make-styles");
var react_1 = require("@fluentui/react");
var useStyles = react_make_styles_1.makeStyles({
    exampleContainer: {
        display: 'flex',
        flexDirection: 'row',
        gap: '20px',
    },
    labelContainer: {
        backgroundColor: 'whitesmoke',
        padding: '10px',
        alignSelf: 'center',
    },
    configurationContainer: {
        display: 'flex',
        flexDirection: 'column',
        gap: '20px',
        backgroundColor: 'whitesmoke',
        padding: '20px',
    },
    textField: {
        height: '20px',
        width: '150px',
    },
    checkbox: {
        display: 'flex',
        flexDirection: 'row',
    },
    multilineContainer: {
        width: '200px',
        padding: '20px',
    },
});
var SizeOptions = [
    { key: 'small', text: 'Small' },
    { key: 'medium', text: 'Medium' },
    { key: 'large', text: 'Large' },
];
var CustomizableLabelExample = function () {
    var styles = useStyles();
    var _a = React.useState("I'm a label"), labelText = _a[0], setLabelText = _a[1];
    var _b = React.useState('*'), requiredText = _b[0], setRequiredText = _b[1];
    var _c = React.useState(false), strong = _c[0], setStrong = _c[1];
    var _d = React.useState(false), disabled = _d[0], setDisabled = _d[1];
    var _e = React.useState(false), required = _e[0], setRequired = _e[1];
    var _f = React.useState('medium'), size = _f[0], setSize = _f[1];
    var updateLabelText = function (event, val) {
        if (val) {
            setLabelText(val);
        }
    };
    var updateRequiredText = function (event, val) {
        setRequiredText(val);
    };
    var updateStrong = function (ev, checked) {
        setStrong(checked);
    };
    var updateDisabled = function (ev, checked) {
        setDisabled(checked);
    };
    var updateRequired = function (ev, checked) {
        setRequired(checked);
    };
    var updateSize = function (ev, item) {
        if (item && typeof item.key === 'string') {
            setSize(item.key);
        }
    };
    return (React.createElement("div", { className: styles.exampleContainer },
        React.createElement("div", { className: styles.configurationContainer },
            React.createElement("div", null,
                React.createElement(react_label_1.Label, { strong: true }, "Text"),
                React.createElement(react_1.TextField, { placeholder: "I'm a label", onChange: updateLabelText, className: styles.textField })),
            React.createElement("div", { className: styles.checkbox },
                React.createElement(react_1.Checkbox, { onChange: updateStrong }),
                React.createElement(react_label_1.Label, { strong: true }, "Strong")),
            React.createElement("div", { className: styles.checkbox },
                React.createElement(react_1.Checkbox, { onChange: updateDisabled }),
                React.createElement(react_label_1.Label, { strong: true }, "Disabled")),
            React.createElement("div", { className: styles.checkbox },
                React.createElement(react_1.Checkbox, { onChange: updateRequired }),
                React.createElement(react_label_1.Label, { strong: true }, "Required")),
            React.createElement("div", null,
                React.createElement(react_label_1.Label, { strong: true }, "Required Text"),
                React.createElement(react_1.TextField, { onChange: updateRequiredText, className: styles.textField })),
            React.createElement("div", null,
                React.createElement(react_label_1.Label, { strong: true }, "Size"),
                React.createElement(react_1.Dropdown, { defaultSelectedKey: 'medium', options: SizeOptions, onChange: updateSize }))),
        React.createElement("div", { className: styles.labelContainer },
            React.createElement(react_label_1.Label, { required: required && requiredText ? requiredText : '', size: size, disabled: disabled, strong: strong }, labelText))));
};
exports.CustomizableLabelExample = CustomizableLabelExample;
var MultilineLabelExample = function () {
    var styles = useStyles();
    return (React.createElement("div", { className: styles.multilineContainer },
        React.createElement(react_label_1.Label, { strong: true, required: true }, "Super long label to show overflow into multiple lines")));
};
exports.MultilineLabelExample = MultilineLabelExample;
//# sourceMappingURL=Label.stories.js.map