import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import Stepper from "@material-ui/core/Stepper";
import Step from "@material-ui/core/Step";
import StepButton from "@material-ui/core/StepButton";
import StepConnector from "@material-ui/core/StepConnector";
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 XTimelineEditUI extends React.Component {
    render() {
        return (_jsxs(_Fragment, { children: [this.props.editMe.renderBaseDataControlEditor(), _jsx(PropertyEditorBoolean, { editObject: this.props.editMe, label: "Values from data", propertyName: "isDynamic", updateCallback: this.props.editMe.controlUpdate }, void 0),
                _jsx(PropertyEditorBoolean, { editObject: this.props.editMe, label: "Show vertical", propertyName: "isVertical", 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: "timelineValues", 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 XTimeline extends BaseDataControl {
    constructor() {
        super();
        this.timelineValues = [];
        this.isVertical = false;
        this.isDynamic = false;
        this.handleChange = (event, newValue) => {
            if (this.valueName) {
                let newIdx = 0;
                newIdx = newValue;
                this.setFormDataValue(this.valueName, this.timelineValues[newIdx]);
            }
        };
        this.valuetext = (index) => {
            return this.getStepValues()[index];
        };
        this.getStepValues = () => {
            let steps = this.timelineValues;
            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(Stepper, Object.assign({ orientation: this.isVertical ? "vertical" : "horizontal", activeStep: this.getValue(), nonLinear: true, alternativeLabel: !this.isVertical, connector: _jsx(StyledTimelineStepConnector, {}, void 0), "data-testid": this.valueName }, { children: this.getStepValues().map((v, index) => (_jsx(Step, Object.assign({ completed: index <= this.getValue() }, { children: _jsx(StyledTimelineItem, Object.assign({ isActive: index <= this.getValue(), color: "inherit", onClick: (e) => this.handleChange(e, index), labelsize: this.labelSize, icon: _jsx(StepIcon, { isActive: index <= this.getValue() }, void 0) }, { children: v }), void 0) }), 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(XTimelineEditUI, { editMe: this }, void 0);
    }
}
const StepIcon = styled.div `
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background-color: ${(prop) => (prop.isActive ? "#4050a6" : "rgba(0, 0, 0, 0.38)")};
`;
const StyledTimelineItem = styled(StepButton) `
    .MuiStepLabel-label {
        text-align: center;
        padding: 5px 20px;
        border-radius: 4px;
        background: ${(prop) => (prop.isActive ? "#4050a6" : "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 ? "#4050a6" : "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 ? "#4050a6" : "rgba(0, 0, 0, 0.38)")};
    }
`;
const StyledTimelineStepConnector = styled(StepConnector) `
    &.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=XTimeline.js.map