"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RatingFormControl = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const material_1 = require("@mui/material");
const core_1 = require("@material-ui/core");
const styles_1 = require("@material-ui/core/styles");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const DataFormControl_1 = require("../DataFormControl");
const PropertyEditorInteger_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorInteger");
const PropertyEditorText_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorText");
const PropertyEditorBoolean_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorBoolean");
const NumberDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/NumberDataDefinition");
const CommonStyled_1 = require("./CommonStyled");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
const StyledInputLabel = (0, styled_components_1.default)(core_1.InputLabel) `
    font-family: Mulish !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 18px !important;
    margin-bottom: 10px !important;
`;
const StyledRatingWrapper = styled_components_1.default.div `
    padding-bottom: ${(props) => (props.showLabels ? "20px" : "0px")};
`;
const StyledRating = (rightContent, leftContent, size, isLabels) => (0, styles_1.withStyles)({
    root: {
        "&::before": isLabels
            ? {
                content: `"${leftContent}"`,
                fontFamily: UIStyleConstants_1.UIStyleConstants.FONT_FAMILY,
                fontStyle: "normal",
                fontWeight: 400,
                fontSize: "14px",
                color: UIStyleConstants_1.UIStyleConstants.GRAY_DARK_COLOR,
                position: "absolute",
                top: size === "small" ? "15px" : "28px",
            }
            : {
                display: "none",
            },
        "&::after": isLabels
            ? {
                content: `"${rightContent}"`,
                fontFamily: UIStyleConstants_1.UIStyleConstants.FONT_FAMILY,
                fontStyle: "normal",
                fontWeight: 400,
                fontSize: "14px",
                color: UIStyleConstants_1.UIStyleConstants.GRAY_DARK_COLOR,
                position: "absolute",
                top: size === "small" ? "15px" : "28px",
                right: "0px",
            }
            : {
                display: "none",
            },
    },
})(material_1.Rating);
class XRatingEditUI 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)(PropertyEditorInteger_1.PropertyEditorInteger, { label: "Star Count", updateCallback: this.props.editMe.controlUpdate, propertyName: "count", editObject: this.props.editMe }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { label: "Show Labels", updateCallback: this.props.editMe.controlUpdate, propertyName: "showLabels", editObject: this.props.editMe }), (0, jsx_runtime_1.jsxs)(core_1.Collapse, { in: this.props.editMe.showLabels, children: [(0, jsx_runtime_1.jsx)(PropertyEditorText_1.PropertyEditorText, { label: "Left Text", updateCallback: this.props.editMe.controlUpdate, propertyName: "left", editObject: this.props.editMe }), (0, jsx_runtime_1.jsx)(PropertyEditorText_1.PropertyEditorText, { label: "Right Text", updateCallback: this.props.editMe.controlUpdate, propertyName: "right", editObject: this.props.editMe })] })] }));
    }
}
class RatingFormControl extends DataFormControl_1.DataFormControl {
    __type = "Rating";
    count = 10;
    left = "Worst";
    right = "Best";
    showLabels = true;
    size = undefined;
    constructor() {
        super();
        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?.text || "";
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.label && (0, jsx_runtime_1.jsx)(StyledInputLabel, { children: this.label }), (0, jsx_runtime_1.jsx)(StyledRatingWrapper, { showLabels: this.showLabels, children: (0, jsx_runtime_1.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 }) }), issueText && issueText.length > 30 && ((0, jsx_runtime_1.jsx)(core_1.Tooltip, { title: issueText, arrow: true, placement: "bottom", children: (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "rating"}-hinttext`, children: issueText.slice(0, 30) + "..." }) })), issueText && issueText.length < 31 && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "rating"}-hinttext`, children: issueText }))] }));
    }
    renderEditUI() {
        return (0, jsx_runtime_1.jsx)(XRatingEditUI, { editMe: this });
    }
    getAddedData() {
        if (!this.valueName)
            return;
        let def = new NumberDataDefinition_1.NumberDataDefinition();
        def.name = this.valueName;
        return def;
    }
    getStorageData() {
        let retData = super.getStorageData();
        retData = DataUtilities_1.DataUtilities.addStorageData(this, retData, "__type", "count", "left", "right", "showLabels", "size");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "__type", "count", "left", "right", "showLabels", "size");
    }
    handleChange = (event, newValue) => {
        if (this.valueName) {
            this.setFormDataValue(this.valueName, newValue);
        }
    };
    getValue = () => {
        if (this.valueName) {
            return this.getFormDataValue(this.valueName);
        }
    };
}
exports.RatingFormControl = RatingFormControl;
//# sourceMappingURL=RatingFormControl.js.map