import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import styled from "styled-components";
import { Button, IconButton, List, ListItem, ListItemSecondaryAction, ListItemText, Select } from "@material-ui/core";
import InputLabel from "@material-ui/core/InputLabel";
import FormControl from "@material-ui/core/FormControl";
import { BaseTextEntryControl } from "./BaseTextEntryControl";
import { TextControlStyle } from "../FormDesignConstants";
import { StyledInputLabel, StyledFormHelperText } from "./XCommonStyled";
import TextField from "@material-ui/core/TextField";
import RemoveIcon from "@material-ui/icons/Remove";
import { ValidationIssue } from "../../Common/IDesignValidationProvider";
import { StringDataDefinition } from "../../Common/Data/Definitions/StringDataDefinition";
export class XSelectbox extends BaseTextEntryControl {
    constructor() {
        super(...arguments);
        this.list = [];
        this.handleChange = (event) => {
            if (this.valueName) {
                this.setFormDataValue(this.valueName, event.target.value);
            }
        };
    }
    getRuntimeValidationIssues() {
        var _a;
        let issues = (_a = super.getRuntimeValidationIssues()) !== null && _a !== void 0 ? _a : [];
        if (this.valueName) {
            let value = this.getFormDataValue(this.valueName);
            if (value) {
                if (this.list.length === 0 || this.list.indexOf(value) === -1) {
                    let issue = new ValidationIssue("Value [" + value + "] is not in selection list", this.valueName, this.id);
                    issues.push(issue);
                }
            }
        }
        return issues;
    }
    render() {
        var _a, _b, _c, _d, _e;
        let style = (_b = (_a = this.getFormContext()) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.defaultTextStyle;
        if (this.overrideStyle && this.style)
            style = this.style;
        let size = (_e = (_d = (_c = this.getFormContext()) === null || _c === void 0 ? void 0 : _c.form) === null || _d === void 0 ? void 0 : _d.defaultTextSize) !== null && _e !== void 0 ? _e : "medium";
        if (this.overrideStyle && this.size)
            size = this.size;
        const issueData = this.getFormContext().getControlContext(this).getRuntimeIssueData();
        const issueText = (issueData === null || issueData === void 0 ? void 0 : issueData.text) || "";
        const customWidth = this.fullWidth ? "100%" : this.width ? `${this.width}px` : "200px";
        switch (style) {
            case TextControlStyle.LABELED:
                return (_jsxs(_Fragment, { children: [this.label && _jsx(StyledInputLabel, { children: this.label }, void 0),
                        _jsxs(StyledFormControl, Object.assign({ size: size, "data-size": size, variant: "outlined", width: customWidth, error: Boolean(issueText) }, { children: [_jsx(Select, Object.assign({ 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 (_jsx("option", Object.assign({ value: item }, { children: item }), index));
                                    }) }), void 0),
                                (issueText || this.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || "selectbox"}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }), void 0)] }, void 0));
            case TextControlStyle.SHADED:
                return (_jsxs(StyledFormControl, Object.assign({ size: size, "data-size": size, variant: "filled", customstyle: "filled", width: customWidth, error: Boolean(issueText) }, { children: [_jsx(InputLabel, { children: this.valueName }, void 0),
                        _jsx(Select, Object.assign({ 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 (_jsx("option", Object.assign({ value: item }, { children: item }), index));
                            }) }), void 0),
                        (issueText || this.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || "selectbox"}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }), void 0));
            case TextControlStyle.OUTLINE:
                return (_jsxs(StyledFormControl, Object.assign({ size: size, "data-size": size, variant: "outlined", customstyle: "outlined", width: customWidth, error: Boolean(issueText) }, { children: [_jsx(InputLabel, { children: this.valueName }, void 0),
                        _jsx(Select, Object.assign({ 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 (_jsx("option", Object.assign({ value: item }, { children: item }), index));
                            }) }), void 0),
                        (issueText || this.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || "selectbox"}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }), void 0));
            case TextControlStyle.UNDERLINED:
                return (_jsxs(StyledFormControl, Object.assign({ size: size, "data-size": size, variant: "standard", customstyle: "standard", width: customWidth, error: Boolean(issueText) }, { children: [_jsx(InputLabel, { children: this.valueName }, void 0),
                        _jsx(Select, Object.assign({ 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 (_jsx("option", Object.assign({ value: item }, { children: item }), index));
                            }) }), void 0),
                        (issueText || this.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || "selectbox"}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }), void 0));
        }
    }
    getAddedData() {
        if (!this.valueName)
            return;
        let def = new StringDataDefinition();
        def.name = this.valueName;
        return def;
    }
    renderEditUI() {
        return (_jsxs(_Fragment, { children: [this.renderBaseDataControlEditor(), this.renderTextControlBasePropertyEditor(), _jsx(List, Object.assign({ style: { width: "100%" } }, { children: this.list.map((s, idx) => (_jsxs(ListItem, { children: [_jsx(ListItemText, { children: _jsx(TextField, { label: "Option Label", value: s, size: "small", onChange: (event) => {
                                        this.list[idx] = event.target.value;
                                        this.controlUpdate();
                                    } }, idx) }, void 0),
                            _jsx(ListItemSecondaryAction, { children: _jsx(IconButton, Object.assign({ color: "secondary", size: "small", onClick: () => {
                                        this.list.splice(idx, 1);
                                        this.controlUpdate();
                                    } }, { children: _jsx(RemoveIcon, {}, void 0) }), void 0) }, void 0)] }, void 0))) }), void 0),
                _jsx(Button, Object.assign({ color: "primary", onClick: () => {
                        this.list.push("");
                        this.controlUpdate();
                    } }, { children: "Add Item" }), void 0), this.renderTextStyleSelectionEditor()] }, void 0));
    }
}
const StyledFormControl = styled(FormControl) `
    width: ${(props) => props.width} !important;
    fieldset {
        border: none !important;
    }
    label {
        padding: 0 5px;
        background-color: ${({ customstyle }) => (customstyle === "outlined" ? "#FFF" : "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=XSelectbox.js.map