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

const ERROR_STYLE: CSSProperties = {
    borderColor: "red"
}

export default function Editor({id, name}: { id: number, name: string }) {

    const [style, setStyle] = useState<CSSProperties>({});

    return (
        <div id="main">
            <div id="topbar">
                <div>LEFT</div>
                <TitleInput style={style} default_value={name} on_validated={new_name => {
                    fetch(`${API}/tactic/${id}/edit/name`, {
                        method: "POST",
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            name: new_name,
                        })
                    }).then(response => {
                        if (response.ok) {
                            setStyle({})
                        } else {
                            setStyle(ERROR_STYLE)
                        }
                    })
                }}/>
                <div>RIGHT</div>
            </div>
        </div>
    )
}