import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import Slider from "@material-ui/core/Slider";
import { BaseDataControl } from "./BaseDataControl";
import { StyledInputLabel } from "./XCommonStyled";
import { PropertyEditorBoolean } from "../../CommonUI/PropertyEditing/PropertyEditorBoolean";
import { PropertyEditorTextList } from "../../CommonUI/PropertyEditing/PropertyEditorTextList";
import { StringDataDefinition } from "../../Common/Data/Definitions/StringDataDefinition";
import { PropertyEditorInteger } from "../../CommonUI/PropertyEditing/PropertyEditorInteger";
import { Collapse } from "@material-ui/core";
import { PropertyEditorText } from "../../CommonUI/PropertyEditing/PropertyEditorText";
class XValueSliderEditUI extends React.Component {
    render() {
        return (_jsxs(_Fragment, { children: [this.props.editMe.renderBaseDataControlEditor(), _jsx(PropertyEditorBoolean, { editObject: this.props.editMe, label: "Select Value To Left", propertyName: "selectValuesToLeft", updateCallback: this.props.editMe.controlUpdate }, void 0),
                _jsx(PropertyEditorBoolean, { editObject: this.props.editMe, label: "Values from data", propertyName: "isDynamic", updateCallback: this.props.editMe.controlUpdate }, void 0),
                _jsx(Collapse, Object.assign({ in: this.props.editMe.isDynamic }, { children: _jsx(PropertyEditorText, { label: "Value Name For Steps", updateCallback: this.props.editMe.controlUpdate, propertyName: "", editObject: this.props.editMe }, void 0) }), void 0),
                _jsx(Collapse, Object.assign({ in: !this.props.editMe.isDynamic }, { children: _jsx(PropertyEditorTextList, { propertyName: "sliderValues", editObject: this.props.editMe, updateCallback: this.props.editMe.controlUpdate }, void 0) }), void 0),
                _jsx(PropertyEditorInteger, { label: "Label Size", updateCallback: this.props.editMe.controlUpdate, propertyName: "labelSize", editObject: this.props.editMe }, void 0)] }, void 0));
    }
}
export class XValueSlider extends BaseDataControl {
    constructor() {
        super();
        this.selectValuesToLeft = false;
        this.sliderValues = [];
        this.isDynamic = false;
        this.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]);
            }
        };
        this.valuetext = (index) => {
            return this.getStepValues()[index];
        };
        this.getStepValues = () => {
            let steps = this.sliderValues;
            if (this.isDynamic && this.stepsValueName) {
                steps = this.getFormDataValue(this.stepsValueName);
            }
            return steps;
        };
        this.canFocus = false;
    }
    render() {
        return (_jsxs(_Fragment, { children: [this.label && _jsx(StyledInputLabel, { children: this.label }, void 0),
                _jsx("div", { children: _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,
                            };
                        }) }, void 0) }, void 0)] }, void 0));
    }
    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();
        def.list = true;
        def.name = this.valueName;
        return def;
    }
    renderEditUI() {
        return _jsx(XValueSliderEditUI, { editMe: this }, void 0);
    }
}
const StyledSlider = styled(Slider) `
    .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-family: Inter;
        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=XValueSlider.js.map