import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import { Rating } from "@material-ui/lab";
import { InputLabel, Tooltip } from "@material-ui/core";
import { withStyles } from "@material-ui/core/styles";
import { Collapse } from "@material-ui/core";
import styled from "styled-components";
import { BaseDataControl } from "./BaseDataControl";
import { PropertyEditorInteger } from "../../CommonUI/PropertyEditing/PropertyEditorInteger";
import { PropertyEditorText } from "../../CommonUI/PropertyEditing/PropertyEditorText";
import { PropertyEditorBoolean } from "../../CommonUI/PropertyEditing/PropertyEditorBoolean";
import { NumberDataDefinition } from "../../Common/Data/Definitions/NumberDataDefinition";
import { StyledFormHelperText } from "./XCommonStyled";
const StyledInputLabel = styled(InputLabel) `
    font-family: Mulish !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 18px !important;
    margin-bottom: 10px !important;
`;
const StyledRatingWrapper = styled.div `
    padding-bottom: ${(props) => (props.showLabels ? "20px" : "0px")};
`;
const StyledRating = (rightContent, leftContent, size, isLabels) => withStyles({
    root: {
        "&::before": isLabels
            ? {
                content: `"${leftContent}"`,
                fontFamily: "Mulish",
                fontStyle: "normal",
                fontWeight: 400,
                fontSize: "14px",
                color: "rgba(0, 0, 0, 0.54)",
                position: "absolute",
                top: size === "small" ? "15px" : "28px",
            }
            : {
                display: "none",
            },
        "&::after": isLabels
            ? {
                content: `"${rightContent}"`,
                fontFamily: "Mulish",
                fontStyle: "normal",
                fontWeight: 400,
                fontSize: "14px",
                color: "rgba(0, 0, 0, 0.54)",
                position: "absolute",
                top: size === "small" ? "15px" : "28px",
                right: "0px",
            }
            : {
                display: "none",
            },
    },
})(Rating);
class XRatingEditUI extends React.Component {
    render() {
        return (_jsxs(_Fragment, { children: [this.props.editMe.renderBaseDataControlEditor(), _jsx(PropertyEditorInteger, { label: "Star Count", updateCallback: this.props.editMe.controlUpdate, propertyName: "count", editObject: this.props.editMe }, void 0),
                _jsx(PropertyEditorBoolean, { label: "Show Labels", updateCallback: this.props.editMe.controlUpdate, propertyName: "showLabels", editObject: this.props.editMe }, void 0),
                _jsxs(Collapse, Object.assign({ in: this.props.editMe.showLabels }, { children: [_jsx(PropertyEditorText, { label: "Left Text", updateCallback: this.props.editMe.controlUpdate, propertyName: "left", editObject: this.props.editMe }, void 0),
                        _jsx(PropertyEditorText, { label: "Right Text", updateCallback: this.props.editMe.controlUpdate, propertyName: "right", editObject: this.props.editMe }, void 0)] }), void 0)] }, void 0));
    }
}
export class XRating extends BaseDataControl {
    constructor() {
        super();
        this.count = 10;
        this.left = "Worst";
        this.right = "Best";
        this.showLabels = true;
        this.size = undefined;
        this.handleChange = (event, newValue) => {
            if (this.valueName) {
                this.setFormDataValue(this.valueName, newValue);
            }
        };
        this.getValue = () => {
            if (this.valueName) {
                return this.getFormDataValue(this.valueName);
            }
        };
        this.canFocus = false;
    }
    render() {
        const RatingComponent = StyledRating(this.right, this.left, this.size, this.showLabels);
        const issueData = this.getFormContext()
            .getControlContext(this)
            .getRuntimeIssueData();
        const issueText = (issueData === null || issueData === void 0 ? void 0 : issueData.text) || "";
        return (_jsxs(_Fragment, { children: [this.label && (_jsx(StyledInputLabel, { children: this.label }, void 0)),
                _jsx(StyledRatingWrapper, Object.assign({ showLabels: this.showLabels }, { children: _jsx(RatingComponent, { name: "rating-controller", value: this.getValue() || 0, max: this.count, onChange: (event, newValue) => this.handleChange(event, newValue), size: this.size, precision: 0.5, "data-testid": this.valueName, ref: this.ref }, void 0) }), void 0),
                issueText && issueText.length > 30 && (_jsx(Tooltip, Object.assign({ title: issueText, arrow: true, placement: "bottom" }, { children: _jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || "rating"}-hinttext` }, { children: issueText.slice(0, 30) + "..." }), void 0) }), void 0)),
                issueText && issueText.length < 31 && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || "rating"}-hinttext` }, { children: issueText }), void 0))] }, void 0));
    }
    renderEditUI() {
        return _jsx(XRatingEditUI, { editMe: this }, void 0);
    }
    getAddedData() {
        if (!this.valueName)
            return;
        let def = new NumberDataDefinition();
        def.name = this.valueName;
        return def;
    }
}
//# sourceMappingURL=XRating.js.map