import React from "react";
import "../style/editor.css";
import TitleInput from "../components/TitleInput";
import {API} from "../Constants";

export default function Editor({id, name}: { id: number, name: string }) {
    return (
        <div id="main">
            <div id="topbar">
                <div>LEFT</div>
                <TitleInput default_value={name} on_validated={name => update_tactic_name(id, name)}/>
                <div>RIGHT</div>
            </div>
        </div>
    )
}

function update_tactic_name(id: number, new_name: string) {
    //FIXME avoid absolute path as they would not work on staging server
    fetch(`${API}/tactic/${id}/edit/name`, {
        method: "POST",
        body: JSON.stringify({
            name: new_name
        })
    }).then(response => {
        if (!response.ok)
            alert("could not update tactic name!")
    })
}