import { Select, SelectItem, Stack, TextInput } from "@carbon/react";
import React, { useState } from "react";
import { getTitleId } from "../helpers";
export const DropdownSelect = ({ title, label, elements, selectedElement, setSelectedElement, exceptionTitle, exceptionLabel, exceptionValue, }) => {
    let showSuggestion = false;
    const [suggestion, setSuggestion] = useState((selectedElement ?? "").split(" - ").length > 0
        ? (selectedElement ?? "").split(" - ")[1]
        : "");
    const setElement = (input) => {
        showSuggestion = input === exceptionValue;
        if (showSuggestion) {
            setSelectedElement(`${input} - ${suggestion}`);
        }
        else {
            setSelectedElement(input);
        }
    };
    const elementWithoutSuggestion = () => {
        return selectedElement?.split(" - ")[0];
    };
    const calculateSuggestion = (input) => {
        const rawElement = elementWithoutSuggestion() ?? "";
        setSuggestion(input);
        setElement(rawElement);
    };
    const titleId = getTitleId(title);
    const exceptionTitleId = getTitleId(exceptionTitle);
    return (React.createElement(React.Fragment, null,
        React.createElement(Stack, null, (() => {
            return (React.createElement(React.Fragment, null,
                React.createElement("div", { style: {
                        display: "grid",
                        gridTemplateColumns: "58% 42%",
                    } },
                    React.createElement(Stack, { gap: 1 },
                        React.createElement("h4", { id: titleId }, title),
                        (() => {
                            if (label) {
                                return React.createElement("p", { className: "cds--modal-header__label" }, label);
                            }
                            return React.createElement(React.Fragment, null);
                        })(),
                        " "),
                    React.createElement(Select, { key: `select-${Math.random() * 10000}`, id: `select-${Math.random() * 10000}`, size: "lg", defaultValue: elements[0].value, "aria-labelledby": titleId, labelText: "", onChange: (event) => {
                            const element = elements.find((e) => e.value === event.target.value);
                            if (element)
                                setElement(element.value);
                        }, value: elementWithoutSuggestion() }, elements.map((e) => (React.createElement(SelectItem, { key: `selectItem-${Math.random() * 10000}`, id: `selectItem-${Math.random() * 10000}`, value: e.value, text: e.label })))),
                    (() => {
                        if (elementWithoutSuggestion() === exceptionValue) {
                            return (React.createElement(React.Fragment, null,
                                React.createElement("div", { style: { marginTop: "24px" } }),
                                React.createElement("div", { style: { marginTop: "24px" } }),
                                React.createElement(Stack, { gap: 1 },
                                    React.createElement("h4", { id: exceptionTitleId }, exceptionTitle),
                                    React.createElement("p", { className: "cds--modal-header__label" }, exceptionLabel)),
                                React.createElement(TextInput, { style: { height: "48px" }, id: `text-input-element-${Math.random() * 1000}`, placeholder: "Enter your suggestion", labelText: "", value: suggestion, onChange: (event) => {
                                        calculateSuggestion(event.target.value);
                                    }, "aria-labelledby": exceptionTitleId, "aria-label": exceptionTitle })));
                        }
                        return React.createElement(React.Fragment, null);
                    })())));
        })())));
};
