"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SliderFormControl = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const Slider_1 = tslib_1.__importDefault(require("@material-ui/core/Slider"));
const core_1 = require("@material-ui/core");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const DataFormControl_1 = require("../DataFormControl");
const NumberDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/NumberDataDefinition");
const CommonStyled_1 = require("./CommonStyled");
const PropertyEditorBoolean_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorBoolean");
const PropertyEditorInteger_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorInteger");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
class XSliderEditUI extends react_1.default.Component {
    render() {
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.props.editMe.renderBaseDataControlEditor(), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { editObject: this.props.editMe, propertyName: "showMinMaxValues", label: "Show Min Max Values", updateCallback: this.props.editMe.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { label: "Min", editObject: this.props.editMe, propertyName: "min", updateCallback: this.props.editMe.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { label: "Max", editObject: this.props.editMe, propertyName: "max", updateCallback: this.props.editMe.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { label: "Default Value", editObject: this.props.editMe, propertyName: "defaultValue", updateCallback: () => {
                        this.props.editMe.setValueFromDefaultValue();
                        this.props.editMe.controlUpdate();
                    } }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { label: "Step", editObject: this.props.editMe, propertyName: "step", updateCallback: this.props.editMe.controlUpdate })] }));
    }
}
class SliderFormControl extends DataFormControl_1.DataFormControl {
    __type = "Slider Control";
    min = 0;
    max = 10;
    step = 1;
    defaultValue = this.min;
    showMinMaxValues = false;
    constructor() {
        super();
        this.canFocus = false;
    }
    componentDidMount() {
        this.setValueFromDefaultValue();
    }
    setValueFromDefaultValue() {
        // set value as default value at form data. when default value is updated and value is not set.
        if (this.defaultValue !== undefined && this.valueName && !this.getFormDataValue(this.valueName)) {
            this.setFormDataValue(this.valueName, this.defaultValue);
        }
    }
    render() {
        const issueData = this.getFormContext().getControlContext(this).getRuntimeIssueData();
        const issueText = issueData?.text || "";
        let marks = [];
        if (this.showMinMaxValues) {
            marks = [
                {
                    value: this.min,
                    label: this.min,
                },
                {
                    value: this.max,
                    label: this.max,
                },
            ];
        }
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.label && (0, jsx_runtime_1.jsx)(StyledInputLabel, { children: this.label }), (0, jsx_runtime_1.jsx)(Slider_1.default, { id: this.id, 
                    // to fix for Nan warning.
                    defaultValue: this.getValue() || this.min, "aria-labelledby": "discrete-slider", valueLabelDisplay: "auto", step: this.step, min: this.min, max: this.max, onChange: this.handleChange, "data-testid": `${this.valueName}`, marks: marks, value: this.getValue(), ref: this.ref }), issueText && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `sliderIssueText`, children: issueText }))] }));
    }
    handleChange = (event, newValue) => {
        if (this.valueName) {
            this.setFormDataValue(this.valueName, newValue);
        }
    };
    getValue = () => {
        if (this.valueName) {
            let value = this.getFormDataValue(this.valueName);
            if (typeof value === "undefined") {
                return this.defaultValue;
            }
            return value;
        }
        return this.defaultValue;
    };
    getAddedData() {
        if (!this.valueName)
            return;
        let def = new NumberDataDefinition_1.NumberDataDefinition();
        def.name = this.valueName;
        return def;
    }
    renderEditUI() {
        return (0, jsx_runtime_1.jsx)(XSliderEditUI, { editMe: this });
    }
    getStorageData() {
        let retData = super.getStorageData();
        retData = DataUtilities_1.DataUtilities.addStorageData(this, retData, "__type", "min", "max", "step", "defaultValue", "showMinMaxValues");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "__type", "min", "max", "step", "defaultValue", "showMinMaxValues");
    }
}
exports.SliderFormControl = SliderFormControl;
const StyledInputLabel = (0, styled_components_1.default)(core_1.InputLabel) `
    font-family: Mulish !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 18px !important;
    margin-bottom: 12px !important;
`;
//# sourceMappingURL=SliderFormControl.js.map