mapcomplete/UI/Popup/AddNoteCommentViz.ts

import Translations from "../i18n/Translations"
import { TextField } from "../Input/TextField"
import { SubtleButton } from "../Base/SubtleButton"
import Svg from "../../Svg"
import NoteCommentElement from "./NoteCommentElement"
import { VariableUiElement } from "../Base/VariableUIElement"
import Toggle from "../Input/Toggle"
import { LoginToggle } from "./LoginButton"
import Combine from "../Base/Combine"
import Title from "../Base/Title"
import { SpecialVisualization } from "../SpecialVisualization"

export class AddNoteCommentViz implements SpecialVisualization {
    funcName = "add_note_comment"
    docs = "A textfield to add a comment to a node (with the option to close the note)."
    args = [
        {
            name: "Id-key",
            doc: "The property name where the ID of the note to close can be found",
            defaultValue: "id",
        },
    ]

    public constr(state, tags, args) {
        const t = Translations.t.notes
        const textField = new TextField({
            placeholder: t.addCommentPlaceholder,
            inputStyle: "width: 100%; height: 6rem;",
            textAreaRows: 3,
            htmlType: "area",
        })
        textField.SetClass("rounded-l border border-grey")
        const txt = textField.GetValue()

        const addCommentButton = new SubtleButton(
            Svg.speech_bubble_svg().SetClass("max-h-7"),
            t.addCommentPlaceholder
        ).onClick(async () => {
            const id = tags.data[args[1] ?? "id"]

            if ((txt.data ?? "") == "") {
                return
            }

            if (isClosed.data) {
                await state.osmConnection.reopenNote(id, txt.data)
                await state.osmConnection.closeNote(id)
            } else {
                await state.osmConnection.addCommentToNote(id, txt.data)
            }
            NoteCommentElement.addCommentTo(txt.data, tags, state)
            txt.setData("")
        })

        const close = new SubtleButton(
            Svg.resolved_svg().SetClass("max-h-7"),
            new VariableUiElement(
                txt.map((txt) => {
                    if (txt === undefined || txt === "") {
                        return t.closeNote
                    }
                    return t.addCommentAndClose
                })
            )
        ).onClick(() => {
            const id = tags.data[args[1] ?? "id"]
            state.osmConnection.closeNote(id, txt.data).then((_) => {
                tags.data["closed_at"] = new Date().toISOString()
                tags.ping()
            })
        })

        const reopen = new SubtleButton(
            Svg.note_svg().SetClass("max-h-7"),
            new VariableUiElement(
                txt.map((txt) => {
                    if (txt === undefined || txt === "") {
                        return t.reopenNote
                    }
                    return t.reopenNoteAndComment
                })
            )
        ).onClick(() => {
            const id = tags.data[args[1] ?? "id"]
            state.osmConnection.reopenNote(id, txt.data).then((_) => {
                tags.data["closed_at"] = undefined
                tags.ping()
            })
        })

        const isClosed = tags.map((tags) => (tags["closed_at"] ?? "") !== "")
        const stateButtons = new Toggle(
            new Toggle(reopen, close, isClosed),
            undefined,
            state.osmConnection.isLoggedIn
        )

        return new LoginToggle(
            new Combine([
                new Title(t.addAComment),
                textField,
                new Combine([
                    stateButtons.SetClass("sm:mr-2"),
                    new Toggle(
                        addCommentButton,
                        new Combine([t.typeText]).SetClass("flex items-center h-full subtle"),
                        textField.GetValue().map((t) => t !== undefined && t.length >= 1)
                    ).SetClass("sm:mr-2"),
                ]).SetClass("sm:flex sm:justify-between sm:items-stretch"),
            ]).SetClass("border-2 border-black rounded-xl p-4 block"),
            t.loginToAddComment,
            state
        )
    }
}