"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StepDescription = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const core_1 = require("@material-ui/core");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const DescriptionText = (0, styled_components_1.default)(core_1.TextField) `
    .MuiOutlinedInput-root.Mui-focused {
        background: rgba(64, 80, 166, 0.05);

        .MuiOutlinedInput-notchedOutline {
            border-bottom: solid 1px rgba(39, 41, 50, 0.35);
        }
    }

    .MuiOutlinedInput-multiline {
        padding: 4px 12px 4px;
    }

    .MuiOutlinedInput-root {
        border-radius: 2px;
    }

    .MuiOutlinedInput-notchedOutline {
        border: none;

        border-bottom: solid 1px transparent;
    }

    .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
        border-color: transparent;
    }
    .MuiInputBase-root {
        color: #606881;

        font-style: normal;
        font-weight: normal;
        font-size: 11px;
        line-height: 140%;
    }

    &.MuiFormControl-root {
        padding: 0 4px 8px;
    }
`;
function StepDescription(props) {
    const [value, setValue] = (0, react_1.useState)(props.step.description);
    const onChange = (event) => {
        setValue(event.target.value);
    };
    const updateStep = () => {
        props.step.description = value;
        props.step.stepUpdate();
    };
    return ((0, jsx_runtime_1.jsx)(DescriptionText, { value: value, onChange: onChange, onBlur: () => updateStep(), multiline: true, fullWidth: true, variant: "outlined", placeholder: "Please type description", "data-testid": `${props.step._id}_description`, classes: {
            root: "Step__description",
        }, InputProps: {
            readOnly: props.readOnly,
        } }));
}
exports.StepDescription = StepDescription;
//# sourceMappingURL=StepDescription.js.map