import { jsx as _jsx } from "react/jsx-runtime";
import { useState } from "react";
import { TextField } from "@material-ui/core";
import styled from "styled-components";
const DescriptionText = styled(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-family: Inter;
        font-style: normal;
        font-weight: normal;
        font-size: 11px;
        line-height: 140%;
    }

    &.MuiFormControl-root {
        padding: 0 4px 8px;
    }
`;
export function StepDescription(props) {
    const [value, setValue] = useState(props.step.description);
    const onChange = (event) => {
        setValue(event.target.value);
    };
    const updateStep = () => {
        props.step.description = value;
        props.step.stepUpdate();
    };
    return (_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,
        } }, void 0));
}
//# sourceMappingURL=StepDescription.js.map