import { useState } from "react"
import axios from "axios"

export default function App() {
    const [text, setText] = useState("")
    const [level, setLevel] = useState(1)

    function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
        e.preventDefault()

        axios
            .post('/api/alert', {
                sensor_id: 1,
                text: text,
                level: level
            })
            .then(() => {
                setText("")
            })
            .catch((error) => {
                console.error(error.response.data)
            });
    }

    return (
        <div>
            <img src="/api/video" alt="" />
            <form onSubmit={handleSubmit} >
                <input type="text" name="text" id="text" onChange={(e) => setText(e.target.value)} value={text} />
                <select name="level" id="level" onChange={(e) => setLevel(Number(e.target.value))} value={level}>
                    <option value={3}>High</option>
                    <option value={2}>Medium</option>
                    <option value={1}>Low</option>
                </select>
                <button type="submit">Submit alert</button>
            </form>
        </div>
    )
}