"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SelectFormControl = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const core_1 = require("@material-ui/core");
const InputLabel_1 = tslib_1.__importDefault(require("@material-ui/core/InputLabel"));
const FormControl_1 = tslib_1.__importDefault(require("@material-ui/core/FormControl"));
const TextEntryFormControl_1 = require("../TextEntryFormControl");
const FormDesignConstants_1 = require("../../Utilities/FormDesignConstants");
const CommonStyled_1 = require("./CommonStyled");
const TextField_1 = tslib_1.__importDefault(require("@material-ui/core/TextField"));
const Remove_1 = tslib_1.__importDefault(require("@mui/icons-material/Remove"));
const IDesignValidationProvider_1 = require("@appglue/common/dist/Common/IDesignValidationProvider");
const StringDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/StringDataDefinition");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
class SelectFormControl extends TextEntryFormControl_1.TextEntryFormControl {
    __type = "Select";
    list = [];
    getRuntimeValidationIssues() {
        let issues = super.getRuntimeValidationIssues() ?? [];
        if (this.valueName) {
            let value = this.getFormDataValue(this.valueName);
            if (value) {
                if (this.list.length === 0 || this.list.indexOf(value) === -1) {
                    let issue = new IDesignValidationProvider_1.ValidationIssue("Value [" + value + "] is not in selection list", this.valueName, this.id);
                    issues.push(issue);
                }
            }
        }
        return issues;
    }
    render() {
        let style = this.getFormContext()?.form?.defaultTextStyle;
        if (this.overrideStyle && this.style)
            style = this.style;
        let size = this.getFormContext()?.form?.defaultTextSize ?? "medium";
        if (this.overrideStyle && this.size)
            size = this.size;
        const issueData = this.getFormContext().getControlContext(this).getRuntimeIssueData();
        const issueText = issueData?.text || "";
        const customWidth = this.fullWidth ? "100%" : this.width ? `${this.width}px` : "200px";
        switch (style) {
            case FormDesignConstants_1.TextControlStyle.LABELED:
                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.jsxs)(StyledFormControl, { size: size, "data-size": size, variant: "outlined", width: customWidth, error: Boolean(issueText), children: [(0, jsx_runtime_1.jsx)(core_1.Select, { defaultValue: "Pizza", value: this.valueName ? this.getFormDataValue(this.valueName) : "", native: true, onChange: this.handleChange, "data-testid": this.valueName, ref: this.ref, children: this.list.map((item, index) => {
                                        return ((0, jsx_runtime_1.jsx)("option", { value: item, children: item }, index));
                                    }) }), (issueText || this.hintText) && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "selectbox"}-hinttext`, children: issueText ? issueText : this.hintText }))] })] }));
            case FormDesignConstants_1.TextControlStyle.SHADED:
                return ((0, jsx_runtime_1.jsxs)(StyledFormControl, { size: size, "data-size": size, variant: "filled", customstyle: "filled", width: customWidth, error: Boolean(issueText), children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: this.valueName }), (0, jsx_runtime_1.jsx)(core_1.Select, { defaultValue: "Pizza", value: this.valueName ? this.getFormDataValue(this.valueName) : "", native: true, onChange: this.handleChange, "data-testid": this.valueName, ref: this.ref, children: this.list.map((item, index) => {
                                return ((0, jsx_runtime_1.jsx)("option", { value: item, children: item }, index));
                            }) }), (issueText || this.hintText) && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "selectbox"}-hinttext`, children: issueText ? issueText : this.hintText }))] }));
            case FormDesignConstants_1.TextControlStyle.OUTLINE:
                return ((0, jsx_runtime_1.jsxs)(StyledFormControl, { size: size, "data-size": size, variant: "outlined", customstyle: "outlined", width: customWidth, error: Boolean(issueText), children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: this.valueName }), (0, jsx_runtime_1.jsx)(core_1.Select, { defaultValue: "Pizza", value: this.valueName ? this.getFormDataValue(this.valueName) : "", native: true, onChange: this.handleChange, "data-testid": this.valueName, ref: this.ref, children: this.list.map((item, index) => {
                                return ((0, jsx_runtime_1.jsx)("option", { value: item, children: item }, index));
                            }) }), (issueText || this.hintText) && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "selectbox"}-hinttext`, children: issueText ? issueText : this.hintText }))] }));
            case FormDesignConstants_1.TextControlStyle.UNDERLINED:
                return ((0, jsx_runtime_1.jsxs)(StyledFormControl, { size: size, "data-size": size, variant: "standard", customstyle: "standard", width: customWidth, error: Boolean(issueText), children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: this.valueName }), (0, jsx_runtime_1.jsx)(core_1.Select, { defaultValue: "Pizza", value: this.valueName ? this.getFormDataValue(this.valueName) : "", native: true, onChange: this.handleChange, "data-testid": this.valueName, ref: this.ref, children: this.list.map((item, index) => {
                                return ((0, jsx_runtime_1.jsx)("option", { value: item, children: item }, index));
                            }) }), (issueText || this.hintText) && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "selectbox"}-hinttext`, children: issueText ? issueText : this.hintText }))] }));
        }
    }
    getAddedData() {
        if (!this.valueName)
            return;
        let def = new StringDataDefinition_1.StringDataDefinition();
        def.name = this.valueName;
        return def;
    }
    renderEditUI() {
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.renderBaseDataControlEditor(), this.renderTextControlBasePropertyEditor(), (0, jsx_runtime_1.jsx)(core_1.List, { style: { width: "100%" }, children: this.list.map((s, idx) => ((0, jsx_runtime_1.jsxs)(core_1.ListItem, { children: [(0, jsx_runtime_1.jsx)(core_1.ListItemText, { children: (0, jsx_runtime_1.jsx)(TextField_1.default, { label: "Option Label", value: s, size: "small", onChange: (event) => {
                                        this.list[idx] = event.target.value;
                                        this.controlUpdate();
                                    } }, idx) }), (0, jsx_runtime_1.jsx)(core_1.ListItemSecondaryAction, { children: (0, jsx_runtime_1.jsx)(core_1.IconButton, { color: "secondary", size: "small", onClick: () => {
                                        this.list.splice(idx, 1);
                                        this.controlUpdate();
                                    }, children: (0, jsx_runtime_1.jsx)(Remove_1.default, {}) }) })] }))) }), (0, jsx_runtime_1.jsx)(core_1.Button, { color: "primary", onClick: () => {
                        this.list.push("");
                        this.controlUpdate();
                    }, children: "Add Item" }), this.renderTextStyleSelectionEditor()] }));
    }
    getStorageData() {
        let retData = super.getStorageData();
        retData = DataUtilities_1.DataUtilities.addStorageData(this, retData, "__type", "list");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "__type", "list");
    }
    handleChange = (event) => {
        if (this.valueName) {
            this.setFormDataValue(this.valueName, event.target.value);
        }
    };
}
exports.SelectFormControl = SelectFormControl;
const StyledFormControl = (0, styled_components_1.default)(FormControl_1.default) `
    width: ${(props) => props.width} !important;

    fieldset {
        border: none !important;
    }

    label {
        padding: 0 5px;
        background-color: ${({ customstyle }) => (customstyle === "outlined" ? UIStyleConstants_1.UIStyleConstants.WHITE_COLOR : "unset")};
    }

    select {
        color: #01244e;
        font-weight: 400 !important;
        line-height: 20px !important;
        border-radius: 5.65107px;
        background-color: ${({ customstyle }) => (customstyle === "filled" ? "#E6E9ED" : "unset")};
        padding-left: ${({ customstyle }) => (customstyle !== "standard" ? "20px" : "0px")};
        padding-right: ${({ customstyle }) => (customstyle !== "standard" ? "20px" : "0px")};

        &:focus {
            border-radius: 5.65107px;
            border: ${({ customstyle }) => customstyle === "filled" || customstyle === "standard" ? "0px" : "1.35302px"}
                solid ${({ error }) => (error ? "#F65C66" : "#1873B9")};
        }

        border: ${({ customstyle }) => (customstyle === "filled" || customstyle === "standard" ? "0px" : "1.35302px")}
            solid ${({ error }) => (error ? "#F65C66" : "#E6E9ED")};
    }

    .MuiFormLabel-root.Mui-focused {
        color: ${({ error }) => (error ? "#F65C66" : "#15466B")};
    }

    .MuiFormHelperText-contained {
        margin-left: 0px;
    }

    .muiselect-select.muiselect-select: focus {
        background-color: ${({ customstyle }) => (customstyle === "filled" ? "#E6E9ED" : "unset")};
    }

    .MuiFilledInput-underline:after,
    .MuiInput-underline:after {
        border-bottom: 1px solid #15466b;
    }

    .MuiFilledInput-underline:before,
    .MuiInput-underline:before {
        border-bottom: 1px solid #677c95;
        opacity: 0.3;
    }
`;
//# sourceMappingURL=SelectFormControl.js.map