"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomizableLabelExample = exports.BasicLabelExamples = 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 useStyles = react_make_styles_1.makeStyles({
    exampleContainer: {
        display: 'flex',
        flexDirection: 'row',
        gap: '40px',
    },
    labelContainer: {
        backgroundColor: 'whitesmoke',
        padding: '10px',
        alignSelf: 'center',
    },
    columnOrder: {
        display: 'flex',
        flexDirection: 'column',
        gap: '20px',
        backgroundColor: 'whitesmoke',
        padding: '20px',
    },
    configurationContainer: {
        display: 'flex',
        flexDirection: 'column',
        gap: '20px',
        backgroundColor: 'whitesmoke',
        padding: '20px',
    },
    textField: {
        height: '20px',
        width: '150px',
    },
    checkbox: {
        display: 'flex',
        flexDirection: 'row',
    },
    multilineContainer: {
        width: '200px',
    },
    option: {
        display: 'flex',
        gap: '4px',
        alignItems: 'center',
    },
});
var sizeOptions = ['small', 'medium', 'large'];
var BasicLabelExamples = function () {
    var styles = useStyles();
    return (React.createElement("div", { className: styles.exampleContainer },
        React.createElement("div", { className: styles.columnOrder },
            React.createElement(react_label_1.Label, null, "I'm a simple Label"),
            React.createElement(react_label_1.Label, { disabled: true }, "I'm a disabled Label"),
            React.createElement(react_label_1.Label, { required: true }, "I'm a required Label"),
            React.createElement(react_label_1.Label, { required: "***" }, "I'm a required Label with custom text"),
            React.createElement("div", { className: styles.multilineContainer },
                React.createElement(react_label_1.Label, { required: true }, "Super long label to show overflow into multiple lines"))),
        React.createElement("div", { className: styles.columnOrder },
            React.createElement(react_label_1.Label, { size: "small" }, "I'm a small Label"),
            React.createElement(react_label_1.Label, { size: "medium" }, "I'm a medium Label"),
            React.createElement(react_label_1.Label, { size: "large" }, "I'm a Large Label"))));
};
exports.BasicLabelExamples = BasicLabelExamples;
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];
    return (React.createElement("div", { className: styles.exampleContainer },
        React.createElement("div", { className: styles.configurationContainer },
            React.createElement("div", { className: styles.option },
                React.createElement(react_label_1.Label, { htmlFor: "txtbox1", strong: true }, "Text"),
                React.createElement("input", { id: "txtbox1", type: "text", placeholder: "I'm a label", onChange: function (e) { return setLabelText(e.currentTarget.value); }, className: styles.textField })),
            React.createElement("div", { className: styles.checkbox },
                React.createElement("input", { id: "cbox1", type: "checkbox", onChange: function () { return setStrong(!strong); } }),
                React.createElement(react_label_1.Label, { htmlFor: "cbox1", strong: true }, "Strong")),
            React.createElement("div", { className: styles.checkbox },
                React.createElement("input", { id: "cbox2", type: "checkbox", onChange: function () { return setDisabled(!disabled); } }),
                React.createElement(react_label_1.Label, { htmlFor: "cbox2", strong: true }, "Disabled")),
            React.createElement("div", { className: styles.checkbox },
                React.createElement("input", { id: "cbox3", type: "checkbox", onChange: function () { return setRequired(!required); } }),
                React.createElement(react_label_1.Label, { htmlFor: "cbox3", strong: true }, "Required")),
            React.createElement("div", { className: styles.option },
                React.createElement(react_label_1.Label, { htmlFor: "textbox2", strong: true }, "Required Text"),
                React.createElement("input", { id: "textbox2", type: "text", onChange: function (e) { return setRequiredText(e.currentTarget.value); }, className: styles.textField })),
            React.createElement("div", { className: styles.option },
                React.createElement(react_label_1.Label, { htmlFor: "ddown1", strong: true }, "Size"),
                React.createElement("select", { id: "ddown1", defaultValue: "medium", onChange: function (e) { return setSize(e.currentTarget.value); } }, sizeOptions.map(function (option) { return (React.createElement("option", { key: option, value: option }, option)); })))),
        React.createElement("div", { className: styles.labelContainer },
            React.createElement(react_label_1.Label, { required: required && requiredText !== '' ? requiredText : required, size: size, disabled: disabled, strong: strong }, labelText))));
};
exports.CustomizableLabelExample = CustomizableLabelExample;
//# sourceMappingURL=Label.stories.js.map