import React from 'react';
import { useState } from "react";
import '../styles/Termekfeltoltes.css';

function Termekfeltoltes() {
    let [ujTermek, setUjTermek] = useState({
        elado: "",
        email: "",
        telefonszam: "",
        termekNev: "",
        leiras: "",
        ar: null
    });

    let esemenykezeles = (event) => {
        let name = event.target.name;
        let value = event.target.value;
        setUjTermek(prevState => ({
            ...prevState,
            [name]: value
        }));
    };

    let feldolgozas = async (event) => {
        try {
            let api = await fetch("http://localhost:8000/termekek", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(ujTermek)
            });

            if (!api.ok) {
                throw new Error(`Hiba történt! Hibajelzés: ${api.status}`);
            }
        } catch (error) {
            console.error("Hiba történt az adatfeltöltés során:", error);
        }
    };

    return (
        <>
            <h1>Termék feltöltése</h1>
            <div>
                <form onSubmit={feldolgozas} action="/termekek">
                    <div>
                        <label>Termék neve:</label>
                        <input type='text' name="termekNev" value={ujTermek.termekNev} onChange={esemenykezeles}/>
                        <label>Termék leírása:</label>
                        <input type='text' name="leiras" value={ujTermek.leiras} onChange={esemenykezeles}/>
                        <label>Termék ára:</label>
                        <input type='number' name="ar" value={ujTermek.ar} onChange={esemenykezeles}/>
                        <label>Eladó neve:</label>
                        <input type='text' name="elado" value={ujTermek.elado} onChange={esemenykezeles}/>
                        <label>Email cím:</label>
                        <input type='email' name="email" value={ujTermek.email} onChange={esemenykezeles}/>
                        <label>Telefonszám:</label>
                        <input type='tel' name="telefonszam" value={ujTermek.telefonszam} onChange={esemenykezeles}/>
                        
                        <select name="atveteliMod">
                            <option value="szemelyes">Személyes átvétel</option>
                            <option value="futar">Futárszolgálat</option>
                            <option value="mindketto">Mindkét lehetőség</option>
                        </select>

                        <button type='submit' name="elkuldes" >Termék feltöltése</button>
                    </div>
                </form>
            </div>
        </>
    );
}

export default Termekfeltoltes;