import React, { useState, useEffect } from 'react';
import BookmarkList from '../components/BookmarkList';
// ブックマーク追加フォームのコンポーネント
import BookmarkForm from '../components/BookmarkForm';
function HomePage({ onLogout }) {
	// ブックマークの配列を管理するステートを定義
	const [bookmarks, setBookmarks] = useState([]);
	// コンポーネントがマウントされたらブックマークを取得
	useEffect(() => {
		fetchBookmarks();
	}, []); // コンポーネントの初回レンダリング時のみ実行
	// ブックマークを取得する非同期関数
	const fetchBookmarks = async () => {
		// ブックマークを取得するAPIリクエスト
		const response = await fetch('/api/bookmarks');
		if (response.ok) { // レスポンスが成功した場合 
			const data = await response.json(); // JSONデータを取得
			setBookmarks(data); // ステートにブックマークをセット
		}
	};
	// 新しいブックマークを追加する非同期関数
	const handleAddBookmark = async (bookmark) => {
		const response = await fetch('/api/bookmarks', {
			method: 'POST', // POSTリクエスト
			headers: {
				'Content-Type': 'application/json', // タイプをJSONに設定
			},
			body: JSON.stringify(bookmark), // ブックマークをJSONで設定 
		});
		if (response.ok) { // レスポンスが成功した場合
			fetchBookmarks(); // リストを再取得して更新
		}
	};
	// ブックマークを削除するための非同期関数
	const handleDeleteBookmark = async (id) => {
		const response = await fetch(`/api/bookmarks/${id}`, {
			method: 'DELETE', // DELETEリクエスト
		});

		if (response.ok) { // レスポンスが成功した場合
			// ブックマークリストから削除したブックマークを取り除く
			setBookmarks(bookmarks.filter(bookmark => bookmark.id !== id));
		}
	};
	return (
		<div>
			<h2>Bookmark</h2>
			<button onClick={onLogout}>Logout</button>
			<hr />
			<h3>Add Bookmark</h3>
			<BookmarkForm onAddBookmark={handleAddBookmark} />
			<hr />
			<h3>Bookmarks list</h3>
			<BookmarkList bookmarks={bookmarks}
				onDeleteBookmark={handleDeleteBookmark} />
		</div>
	);
}
export default HomePage;