"use client";

import React from 'react';
import { TodoItem } from '@/lib/todoItem';

interface TodoItemComponentProps {
  todoItem: TodoItem;
  onUpdate: (updatedTodo: TodoItem) => void;
}

export default function TodoItemComponent({ 
  todoItem, 
  onUpdate
}: TodoItemComponentProps) {
  const handleToggle = () => {
    onUpdate(todoItem.toggle());
  };

  const handleComplete = () => {
    if (todoItem.isIncomplete()) {
      onUpdate(todoItem.complete());
    }
  };

  const handleMarkIncomplete = () => {
    if (todoItem.isCompleted()) {
      onUpdate(todoItem.markIncomplete());
    }
  };

  return (
    <li className={`flex items-center justify-between space-x-2 p-3 border rounded-lg ${
      todoItem.isCompleted()
        ? 'bg-green-50 border-green-200 text-green-800' 
        : 'bg-white border-gray-200'
    }`}>
      <div className="flex items-center space-x-3">
        <input
          type="checkbox"
          checked={todoItem.isCompleted()}
          onChange={handleToggle}
          className="form-checkbox h-5 w-5 text-green-600"
        />
        <span className={`${todoItem.isCompleted() ? 'line-through' : ''}`}>
          {todoItem.toString()}
        </span>
      </div>
      
      <div className="flex space-x-2">
        {todoItem.isIncomplete() && (
          <button
            onClick={handleComplete}
            className="px-3 py-1 text-sm bg-green-500 text-white rounded hover:bg-green-600"
          >
            完了
          </button>
        )}
        {todoItem.isCompleted() && (
          <button
            onClick={handleMarkIncomplete}
            className="px-3 py-1 text-sm bg-gray-500 text-white rounded hover:bg-gray-600"
          >
            未完了に戻す
          </button>
        )}
      </div>
    </li>
  );
}

"use client";

import React, { useState } from 'react';
import TodoItemComponent from '@/components/todo/TodoItemComponent';
import { TodoItem, ITodoItem } from '@/lib/todoItem';

interface TodoListProps {
  initialTodos: ITodoItem[];
}

export default function TodoList({ initialTodos }: TodoListProps) {
  const [todos, setTodos] = useState<TodoItem[]>(
    initialTodos.map(todo => new TodoItem(todo.id, todo.text, todo.completed))
  );
  const [newTodoText, setNewTodoText] = useState('');

  const handleTodoUpdate = (updatedTodo: TodoItem) => {
    setTodos(prevTodos => 
      prevTodos.map(todo => 
        todo.equals(updatedTodo) ? updatedTodo : todo
      )
    );
  };

  const handleAddTodo = () => {
    if (newTodoText.trim()) {
      const newId = Math.max(0, ...todos.map(todo => todo.id)) + 1;
      const newTodo = TodoItem.create(newId, newTodoText.trim());
      setTodos(prevTodos => [...prevTodos, newTodo]);
      setNewTodoText('');
    }
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleAddTodo();
    }
  };

  return (
    <div className="w-full max-w-2xl mx-auto">
      {/* 新しいTODO追加フォーム */}
      <div className="mb-6 flex gap-2">
        <input
          type="text"
          value={newTodoText}
          onChange={(e) => setNewTodoText(e.target.value)}
          onKeyPress={handleKeyPress}
          placeholder="新しいTODOを入力..."
          className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
        />
        <button
          onClick={handleAddTodo}
          disabled={!newTodoText.trim()}
          className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 disabled:bg-gray-300 disabled:cursor-not-allowed"
        >
          追加
        </button>
      </div>

      {/* TODOリスト */}
      {todos.length > 0 ? (
        <ul className="w-full space-y-2">
          {todos.map((todo) => (
            <TodoItemComponent 
              key={todo.id} 
              todoItem={todo} 
              onUpdate={handleTodoUpdate}
            />
          ))}
        </ul>
      ) : (
        <p className="text-gray-500 text-center py-8">No todos yet!</p>
      )}
    </div>
  );
}

import TodoList from '@/components/todo/TodoList';
import { ITodoItem, TodoItem } from '@/lib/todoItem';

export default function HomePage() {
  const initialTodos: ITodoItem[] = [
    { id: 1, text: 'TypeScriptでTDDを学ぶ', completed: false },
    { id: 2, text: 'Reactコンポーネントを作成する', completed: false },
    { id: 3, text: 'プライベート化を理解する', completed: true },
  ];

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex flex-col">
        <h1 className="text-4xl font-bold mb-8">My TODO List</h1>
        <TodoList initialTodos={initialTodos} />
      </div>
    </main>
  );
}

import { render, screen, fireEvent } from '@testing-library/react';
import TodoItemComponent from './TodoItemComponent';
import { TodoItem } from '@/lib/todoItem';

describe('TodoItemComponentのテスト', () => {
  it('未完了のTODOアイテムを表示すること', () => {
    const todo = TodoItem.create(1, 'TypeScriptでTDDを学ぶ');
    const onUpdate = jest.fn();
    render(<TodoItemComponent todoItem={todo} onUpdate={onUpdate} />);
    
    expect(screen.getByText(/TypeScriptでTDDを学ぶ/)).toBeInTheDocument();
    expect(screen.getByRole('checkbox')).not.toBeChecked();
    expect(screen.getByText('完了')).toBeInTheDocument();
  });

  it('完了済みのTODOアイテムを表示すること', () => {
    const todo = TodoItem.createCompleted(1, 'TypeScriptでTDDを学ぶ');
    const onUpdate = jest.fn();
    render(<TodoItemComponent todoItem={todo} onUpdate={onUpdate} />);
    
    expect(screen.getByRole('checkbox')).toBeChecked();
    expect(screen.getByText('未完了に戻す')).toBeInTheDocument();
  });

  it('チェックボックスクリックでonUpdateが正しい値で呼ばれること', () => {
    const todo = TodoItem.create(1, 'TypeScriptでTDDを学ぶ');
    const onUpdate = jest.fn();
    render(<TodoItemComponent todoItem={todo} onUpdate={onUpdate} />);
    
    fireEvent.click(screen.getByRole('checkbox'));
    
    // onUpdateが呼ばれ、引数が正しいことを確認
    expect(onUpdate).toHaveBeenCalledTimes(1);
    const calledWith = onUpdate.mock.calls[0][0];
    expect(calledWith.isCompleted()).toBe(true);
    expect(calledWith.equals(todo)).toBe(true);
  });

  it('完了ボタンクリックでonUpdateが呼ばれること', () => {
    const todo = TodoItem.create(1, 'TypeScriptでTDDを学ぶ');
    const onUpdate = jest.fn();
    render(<TodoItemComponent todoItem={todo} onUpdate={onUpdate} />);
    
    fireEvent.click(screen.getByText('完了'));
    
    expect(onUpdate).toHaveBeenCalledTimes(1);
    const calledWith = onUpdate.mock.calls[0][0];
    expect(calledWith.isCompleted()).toBe(true);
  });

  it('未完了に戻すボタンクリックでonUpdateが呼ばれること', () => {
    const todo = TodoItem.createCompleted(1, 'TypeScriptでTDDを学ぶ');
    const onUpdate = jest.fn();
    render(<TodoItemComponent todoItem={todo} onUpdate={onUpdate} />);
    
    fireEvent.click(screen.getByText('未完了に戻す'));
    
    expect(onUpdate).toHaveBeenCalledTimes(1);
    const calledWith = onUpdate.mock.calls[0][0];
    expect(calledWith.isCompleted()).toBe(false);
  });

  it('意図を明確にするメソッドが正しく動作すること', () => {
    const incompleteTodo = TodoItem.create(1, 'テスト');
    const completedTodo = TodoItem.createCompleted(2, 'テスト2');
    
    // 未完了のTODO
    expect(incompleteTodo.isCompleted()).toBe(false);
    expect(incompleteTodo.isIncomplete()).toBe(true);
    
    // 完了済みのTODO
    expect(completedTodo.isCompleted()).toBe(true);
    expect(completedTodo.isIncomplete()).toBe(false);
  });
});

import { render, screen, fireEvent } from '@testing-library/react';
import TodoList from './TodoList';
import { ITodoItem } from '@/lib/todoItem';

describe('TodoListの統合テスト', () => {
  const initialTodos: ITodoItem[] = [
    { id: 1, text: 'TypeScriptでTDDを学ぶ', completed: false },
    { id: 2, text: 'Reactコンポーネントを作成する', completed: false },
    { id: 3, text: 'プライベート化を理解する', completed: true },
  ];

  it('TODOリストが正しく表示されること', () => {
    render(<TodoList initialTodos={initialTodos} />);
    
    expect(screen.getByText(/TypeScriptでTDDを学ぶ/)).toBeInTheDocument();
    expect(screen.getByText(/Reactコンポーネントを作成する/)).toBeInTheDocument();
    expect(screen.getByText(/プライベート化を理解する/)).toBeInTheDocument();
  });

  it('チェックボックスクリックで実際に状態が変更されること', () => {
    render(<TodoList initialTodos={initialTodos} />);
    
    // 未完了のTODOのチェックボックスをクリック
    const checkboxes = screen.getAllByRole('checkbox');
    const incompleteCheckbox = checkboxes.find(cb => !cb.checked);
    fireEvent.click(incompleteCheckbox!);
    
    // 状態が更新されることを確認（チェックボックスがチェックされる）
    expect(incompleteCheckbox).toBeChecked();
  });

  it('空のリストの場合は適切なメッセージを表示すること', () => {
    render(<TodoList initialTodos={[]} />);
    
    expect(screen.getByText('No todos yet!')).toBeInTheDocument();
  });
});