"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ValueSliderFormControl = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const Slider_1 = tslib_1.__importDefault(require("@material-ui/core/Slider"));
const DataFormControl_1 = require("../DataFormControl");
const CommonStyled_1 = require("./CommonStyled");
const PropertyEditorBoolean_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorBoolean");
const PropertyEditorTextList_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorTextList");
const StringDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/StringDataDefinition");
const PropertyEditorInteger_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorInteger");
const core_1 = require("@material-ui/core");
const PropertyEditorText_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorText");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
class XValueSliderEditUI 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, label: "Select Value To Left", propertyName: "selectValuesToLeft", updateCallback: this.props.editMe.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { editObject: this.props.editMe, label: "Values from data", propertyName: "isDynamic", updateCallback: this.props.editMe.controlUpdate }), (0, jsx_runtime_1.jsx)(core_1.Collapse, { in: this.props.editMe.isDynamic, children: (0, jsx_runtime_1.jsx)(PropertyEditorText_1.PropertyEditorText, { label: "Value Name For Steps", updateCallback: this.props.editMe.controlUpdate, propertyName: "", editObject: this.props.editMe }) }), (0, jsx_runtime_1.jsx)(core_1.Collapse, { in: !this.props.editMe.isDynamic, children: (0, jsx_runtime_1.jsx)(PropertyEditorTextList_1.PropertyEditorTextList, { propertyName: "sliderValues", editObject: this.props.editMe, updateCallback: this.props.editMe.controlUpdate }) }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { label: "Label Size", updateCallback: this.props.editMe.controlUpdate, propertyName: "labelSize", editObject: this.props.editMe })] }));
    }
}
class ValueSliderFormControl extends DataFormControl_1.DataFormControl {
    __type = "Value Slider";
    selectValuesToLeft = false;
    sliderValues = [];
    isDynamic = false;
    labelSize;
    stepsValueName;
    constructor() {
        super();
        this.canFocus = false;
    }
    render() {
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.label && (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledInputLabel, { children: this.label }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(StyledSlider, { min: 0, max: this.sliderValues.length - 1, defaultValue: this.getValue(), step: 1, "aria-labelledby": "track-inverted-slider", track: this.selectValuesToLeft ? "normal" : this.selectValuesToLeft, getAriaValueText: this.valuetext, onChange: this.handleChange, "data-testid": this.valueName, value: this.getValue(), labelsize: this.labelSize, marks: this.getStepValues().map((v, index) => {
                            return {
                                label: v,
                                value: index,
                            };
                        }) }) })] }));
    }
    handleChange = (event, newValue) => {
        if (this.valueName) {
            let newIdx = 0;
            if (Array.isArray(newValue)) {
                newIdx = newValue[newValue.length - 1];
            }
            else {
                newIdx = newValue;
            }
            this.setFormDataValue(this.valueName, this.sliderValues[newIdx]);
        }
    };
    valuetext = (index) => {
        return this.getStepValues()[index];
    };
    getStepValues = () => {
        let steps = this.sliderValues;
        if (this.isDynamic && this.stepsValueName) {
            steps = this.getFormDataValue(this.stepsValueName);
        }
        return steps;
    };
    getValue() {
        let steps = this.getStepValues();
        if (this.valueName) {
            let value = this.getFormDataValue(this.valueName);
            return steps.indexOf(value);
        }
        return -1;
    }
    getAddedData() {
        if (!this.valueName)
            return;
        let def = new StringDataDefinition_1.StringDataDefinition();
        def.list = true;
        def.name = this.valueName;
        return def;
    }
    renderEditUI() {
        return (0, jsx_runtime_1.jsx)(XValueSliderEditUI, { editMe: this });
    }
    getStorageData() {
        let retData = super.getStorageData();
        retData = DataUtilities_1.DataUtilities.addStorageData(this, retData, "__type", "selectValuesToLeft", "sliderValues", "isDynamic", "labelSize", "stepsValueName");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "__type", "selectValuesToLeft", "sliderValues", "isDynamic", "labelSize", "stepsValueName");
    }
}
exports.ValueSliderFormControl = ValueSliderFormControl;
const StyledSlider = (0, styled_components_1.default)(Slider_1.default) `
    .MuiSlider-thumb.MuiSlider-thumbColorPrimary {
        background: #ffffff;
        border: 1px solid #ebebf3;
        box-sizing: border-box;
        box-shadow: 0px 2px 6px -2px rgba(39, 41, 50, 0.16);
        border-radius: 12px;
    }

    .MuiSlider-rail {
        height: 4px;
        background: rgba(39, 41, 50, 0.1);
    }

    .MuiSlider-track {
        height: 4px;
        background: #4050a6;
    }

    .MuiSlider-mark {
        height: 4px;
        background: rgba(39, 41, 50, 0.2);
    }

    .MuiSlider-markLabel {
        font-size: ${(props) => props.labelsize || 9}px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: 0px;
        text-align: center;

        color: rgba(39, 41, 50, 0.8);

        &.MuiSlider-markLabelActive {
            color: rgba(64, 80, 166, 0.8);
        }
    }
`;
//# sourceMappingURL=ValueSliderFormControl.js.map