import React, { useEffect, useState, useRef } from "react";
import { Button, Card, Col, Container, Form, Nav, Navbar, Row } from "react-bootstrap";

export interface ExampleItem {
id: number;
exampleName: string;
exampleType: 'A' | 'B' | null;
exampleDate: string;
created_at: string;
}

const API_BASE_URL = 'http://localhost:3000/api';

function getImage(type: 'A' | 'B' | null) {
if (type === "A") return "/type-a.png";
if (type === "B") return "/type-b.png";
return "/other-type.png";
}

function BasicExample() {
// Ref for the form section
const formRef = useRef(null);

const [exampleItems, setExampleItems] = useState([]);
const [exampleName, setExampleName] = useState("");
const [exampleDate, setExampleDate] = useState("");
const [exampleType, setExampleType] = useState<"" | "A" | "B">('');
const [actionSuccessMessage, setActionSuccessMessage] = useState("");
const [errorMessage, setErrorMessage] = useState("");

const loadExampleItems = () => {
fetch(`${API_BASE_URL}/examples`)
.then(response => response.json())
.then(data => setExampleItems(data))
.catch(error => console.error("Hiba a betöltéskor:", error));
}

useEffect(() => {
loadExampleItems();
}, []);

const handleExampleAction = async (itemId: number) => {
setActionSuccessMessage("");
setErrorMessage("");
//here is the main problem
try {
const response = await fetch(`${API_BASE_URL}/examples/${itemId}/action`,
{ method: "POST" }
);

if (response.ok) {
setActionSuccessMessage("Sikeres művelet!");
setErrorMessage("");
} else {
setErrorMessage("Hiba a művelet során!");
setActionSuccessMessage("");
}
} catch (error) {
setErrorMessage("Hiba a művelet során!");
setActionSuccessMessage("");
console.error("Hiba:", error);
}
};

const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setActionSuccessMessage("");
setErrorMessage("");

`` const response = await fetch(`${API_BASE_URL}/examples`, { ``  

method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
exampleName,
exampleType: exampleType || null,
exampleDate: exampleDate,
}),
});

if (response.ok) {
setActionSuccessMessage("Sikeres hozzáadás!");
setErrorMessage("");
setExampleName("");
setExampleType("");
setExampleDate("");
loadExampleItems();
} else {
setErrorMessage("Hiba a hozzáadásnál!");
setActionSuccessMessage("");
}
};

// Scroll to form handler
const scrollToForm = () => {
if (formRef.current) {
formRef.current.scrollIntoView({ behavior: "smooth" });
}
};

return (
<>

Example App

  `
`  

{(actionSuccessMessage || errorMessage) && (


{actionSuccessMessage && (

)}
{errorMessage && (

)}


)}

{exampleItems.map((item) => (

{item.exampleName}

Dátum: {new Date(item.exampleDate).toLocaleDateString("hu-HU")}


Létrehozva: {new Date(item.created_at).toLocaleDateString("hu-HU")}

handleExampleAction(item.id)}>
Példa Művelet




))}