import ReadOnlyTextArea from "./ReadOnlyTextArea";

export default function SideBarInput({ matches, currentWordIndex, replaceWord, setReplaceWord, handleReplaceWord }) {
    const handleKeyDown = (e) => {
        if (e.key === "Enter") {
            e.preventDefault(); // Stop form submission / modal closing
            handleReplaceWord(currentWordIndex, replaceWord);
        }
    };

    return (
        <div className="match-info">
            <div className="match-info-item">
                <label htmlFor="bad-words">Restricted Word</label>
                <input
                    id="bad-words"
                    type="text"
                    value={matches[currentWordIndex]?.bad || ""}
                    readOnly
                    tabIndex={-1}
                    className="modal-input" />
            </div>
            <div className="match-info-item">
                <ReadOnlyTextArea
                    id="alts-text"
                    label="Alternatives"
                    value={
                        Array.isArray(matches[currentWordIndex]?.alts)
                            ? matches[currentWordIndex].alts.join(", ")
                            : matches[currentWordIndex]?.alts || ""
                    }
                />
            </div>
            <div className="match-info-item">
                <ReadOnlyTextArea
                    id="note"
                    label="Note"
                    value={matches[currentWordIndex]?.note || ""}
                />
                <div className="match-info-item">
                    <label htmlFor="replace">Replace with</label>
                    <div className="replace-input-wrapper" id="replace">
                        <input
                            type="text"
                            value={replaceWord}
                            onChange={(e) => setReplaceWord(e.target.value)}
                            onKeyDown={handleKeyDown}
                            className="modal-input" />
                        <button
                            type="button"
                            className="button button-primary"
                            onClick={() => handleReplaceWord(currentWordIndex, replaceWord)}
                        >
                            Replace
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
}