"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TimelineFormControl = 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 Stepper_1 = tslib_1.__importDefault(require("@material-ui/core/Stepper"));
const Step_1 = tslib_1.__importDefault(require("@material-ui/core/Step"));
const StepButton_1 = tslib_1.__importDefault(require("@material-ui/core/StepButton"));
const StepConnector_1 = tslib_1.__importDefault(require("@material-ui/core/StepConnector"));
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");
const UIStyleConstants_1 = require("@appglue/common/src/Common/UIStyleConstants");
class XTimelineEditUI 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: "Values from data", propertyName: "isDynamic", updateCallback: this.props.editMe.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { editObject: this.props.editMe, label: "Show vertical", propertyName: "isVertical", 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: "timelineValues", 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 TimelineFormControl extends DataFormControl_1.DataFormControl {
    __type = "Timeline";
    timelineValues = [];
    isVertical = false;
    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)(Stepper_1.default, { orientation: this.isVertical ? "vertical" : "horizontal", activeStep: this.getValue(), nonLinear: true, alternativeLabel: !this.isVertical, connector: (0, jsx_runtime_1.jsx)(StyledTimelineStepConnector, {}), "data-testid": this.valueName, children: this.getStepValues().map((v, index) => ((0, jsx_runtime_1.jsx)(Step_1.default, { completed: index <= this.getValue(), children: (0, jsx_runtime_1.jsx)(StyledTimelineItem, { isActive: index <= this.getValue(), color: "inherit", onClick: (e) => this.handleChange(e, index), labelsize: this.labelSize, icon: (0, jsx_runtime_1.jsx)(StepIcon, { isActive: index <= this.getValue() }), children: v }) }, index))) }) })] }));
    }
    handleChange = (event, newValue) => {
        if (this.valueName) {
            let newIdx = 0;
            newIdx = newValue;
            this.setFormDataValue(this.valueName, this.timelineValues[newIdx]);
        }
    };
    valuetext = (index) => {
        return this.getStepValues()[index];
    };
    getStepValues = () => {
        let steps = this.timelineValues;
        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)(XTimelineEditUI, { editMe: this });
    }
    getStorageData() {
        let retData = super.getStorageData();
        retData = DataUtilities_1.DataUtilities.addStorageData(this, retData, "__type", "timelineValues", "isVertical", "isDynamic", "labelSize", "stepsValueName");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "__type", "timelineValues", "isVertical", "isDynamic", "labelSize", "stepsValueName");
    }
}
exports.TimelineFormControl = TimelineFormControl;
const StepIcon = styled_components_1.default.div `
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background-color: ${(prop) => (prop.isActive ? UIStyleConstants_1.UIStyleConstants.BLUE_COLOR : "rgba(0, 0, 0, 0.38)")};
`;
const StyledTimelineItem = (0, styled_components_1.default)(StepButton_1.default) `
    .MuiStepLabel-label {
        text-align: center;
        padding: 5px 20px;
        border-radius: 4px;
        background: ${(prop) => (prop.isActive ? UIStyleConstants_1.UIStyleConstants.BLUE_COLOR : "rgba(0, 0, 0, 0.38)")};
        color: white !important;
        position: relative;
        font-size: ${(props) => props.labelsize || 9}px;
    }

    .MuiStepLabel-label.MuiStepLabel-alternativeLabel {
        margin-top: 5px !important;
    }

    .MuiStepLabel-label:before {
        content: "";
        position: absolute;
        bottom: 100%;
        left: -10px;
        top: 50%;
        transform: translate(0px, -50%);
        border: 5px solid transparent;
        border-right-color: ${(prop) => (prop.isActive ? UIStyleConstants_1.UIStyleConstants.BLUE_COLOR : "rgba(0, 0, 0, 0.38)")};
    }

    .MuiStepLabel-label.MuiStepLabel-alternativeLabel:before {
        left: 50%;
        top: -10px;
        transform: translate(-50%, 0px);
        border: 5px solid transparent;
        border-bottom-color: ${(prop) => (prop.isActive ? UIStyleConstants_1.UIStyleConstants.BLUE_COLOR : "rgba(0, 0, 0, 0.38)")};
    }
`;
const StyledTimelineStepConnector = (0, styled_components_1.default)(StepConnector_1.default) `
    &.MuiStepConnector-alternativeLabel {
        top: 10px;
        left: calc(-50% + 12px);
        right: calc(50% + 12px);
        position: absolute;
    }

    .MuiStepConnector-lineHorizontal {
        border-top-width: 4px;
    }

    &.MuiStepConnector-vertical {
        padding: 0px;
        margin-left: 10px;
    }

    .MuiStepConnector-lineVertical {
        border-left-width: 4px;
    }

    &.MuiStepConnector-active .MuiStepConnector-line {
        border-color: #4050a6;
    }

    &.MuiStepConnector-completed .MuiStepConnector-line {
        border-color: #4050a6;
    }
`;
//# sourceMappingURL=TimelineFormControl.js.map