import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import Slider from "@material-ui/core/Slider";
import { InputLabel } from "@material-ui/core";
import styled from "styled-components";
import { BaseDataControl } from "./BaseDataControl";
import { NumberDataDefinition } from "../../Common/Data/Definitions/NumberDataDefinition";
import { StyledFormHelperText } from "./XCommonStyled";
import { PropertyEditorBoolean } from "../../CommonUI/PropertyEditing/PropertyEditorBoolean";
import { PropertyEditorInteger } from "../../CommonUI/PropertyEditing/PropertyEditorInteger";
class XSliderEditUI extends React.Component {
    render() {
        return (_jsxs(_Fragment, { children: [this.props.editMe.renderBaseDataControlEditor(), _jsx(PropertyEditorBoolean, { editObject: this.props.editMe, propertyName: "showMinMaxValues", label: "Show Min Max Values", updateCallback: this.props.editMe.controlUpdate }, void 0),
                _jsx(PropertyEditorInteger, { label: "Min", editObject: this.props.editMe, propertyName: "min", updateCallback: this.props.editMe.controlUpdate }, void 0),
                _jsx(PropertyEditorInteger, { label: "Max", editObject: this.props.editMe, propertyName: "max", updateCallback: this.props.editMe.controlUpdate }, void 0),
                _jsx(PropertyEditorInteger, { label: "Default Value", editObject: this.props.editMe, propertyName: "defaultValue", updateCallback: () => {
                        this.props.editMe.setValueFromDefaultValue();
                        this.props.editMe.controlUpdate();
                    } }, void 0),
                _jsx(PropertyEditorInteger, { label: "Step", editObject: this.props.editMe, propertyName: "step", updateCallback: this.props.editMe.controlUpdate }, void 0)] }, void 0));
    }
}
export class XSlider extends BaseDataControl {
    constructor() {
        super();
        this.min = 0;
        this.max = 10;
        this.step = 1;
        this.defaultValue = this.min;
        this.showMinMaxValues = false;
        this.handleChange = (event, newValue) => {
            if (this.valueName) {
                this.setFormDataValue(this.valueName, newValue);
            }
        };
        this.getValue = () => {
            if (this.valueName) {
                let value = this.getFormDataValue(this.valueName);
                if (typeof value === "undefined") {
                    return this.defaultValue;
                }
                return value;
            }
            return this.defaultValue;
        };
        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 === null || issueData === void 0 ? void 0 : issueData.text) || "";
        let marks = [];
        if (this.showMinMaxValues) {
            marks = [
                {
                    value: this.min,
                    label: this.min,
                },
                {
                    value: this.max,
                    label: this.max,
                },
            ];
        }
        return (_jsxs(_Fragment, { children: [this.label && _jsx(StyledInputLabel, { children: this.label }, void 0),
                _jsx(Slider, { 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 }, void 0),
                issueText && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `sliderIssueText` }, { children: issueText }), void 0))] }, void 0));
    }
    getAddedData() {
        if (!this.valueName)
            return;
        let def = new NumberDataDefinition();
        def.name = this.valueName;
        return def;
    }
    renderEditUI() {
        return _jsx(XSliderEditUI, { editMe: this }, void 0);
    }
}
const StyledInputLabel = styled(InputLabel) `
    font-family: Mulish !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 18px !important;
    margin-bottom: 12px !important;
`;
//# sourceMappingURL=XSlider.js.map