【HTML,CSS,JS】ToDoリストアプリ作成（1/5）

// タスク管理とUI管理のクラスをインポート
import { TaskManager } from './taskManager.js';
import { UIManager } from './uiManager.js';

// DOMの読み込みが完了したら実行
document.addEventListener('DOMContentLoaded', () => {
    // タスク管理とUI管理のインスタンスを作成
    const taskManager = new TaskManager();
    const uiManager = new UIManager(taskManager);

    // HTML要素の取得
    const taskForm = document.getElementById('task-form');
    const taskInput = document.getElementById('task-input');
    const dateSelectBtn = document.getElementById('date-select-btn');
    const selectedDateSpan = document.getElementById('selected-date');
    const taskError = document.getElementById('task-error');
    const dateError = document.getElementById('date-error');
    const customCalendar = document.getElementById('custom-calendar');

    // 変数の初期化
    let selectedDate = '';
    let isCalendarVisible = false;
    let currentCalendarDate = new Date();

    // イベントリスナーの設定
    taskForm.addEventListener('submit', handleFormSubmit);
    dateSelectBtn.addEventListener('click', toggleCalendar);
    document.addEventListener('click', handleOutsideClick);

    // フォーム送信時の処理
    function handleFormSubmit(e) {
        e.preventDefault(); // デフォルトの送信動作を防止
        const taskText = taskInput.value.trim(); // 入力されたタスクのテキストを取得

        resetErrors(); // エラーメッセージをリセット

        // バリデーション
        if (!taskText) {
            showError(taskError, 'タスクを入力してください');
            return;
        }

        if (!selectedDate) {
            showError(dateError, '日付を設定してください');
            return;
        }

        // タスクを追加
        uiManager.addTask(taskText, selectedDate);
        resetForm(); // フォームをリセット
    }

    // カレンダーの表示/非表示を切り替え
    function toggleCalendar(e) {
        e.stopPropagation(); // イベントの伝播を停止
        isCalendarVisible ? hideCalendar() : showCalendar();
    }

    // カレンダーを表示
    function showCalendar() {
        const rect = dateSelectBtn.getBoundingClientRect();
        customCalendar.style.display = 'block';
        // カレンダーの位置を設定
        customCalendar.style.top = `${rect.bottom + window.scrollY}px`;
        customCalendar.style.left = `${rect.left + window.scrollX}px`;
        renderCalendar(currentCalendarDate);
        isCalendarVisible = true;
    }

    // カレンダーを非表示
    function hideCalendar() {
        customCalendar.style.display = 'none';
        isCalendarVisible = false;
    }

    // カレンダーをレンダリング
    function renderCalendar(date) {
        const year = date.getFullYear();
        const month = date.getMonth();
        const firstDay = new Date(year, month, 1);
        const lastDay = new Date(year, month + 1, 0);
        
        let calendarHTML = createCalendarHeader(year, month);
        calendarHTML += createCalendarDays(firstDay, lastDay);
        
        customCalendar.innerHTML = calendarHTML;
        
        addCalendarEventListeners(year, month);
    }

    // カレンダーのヘッダー部分を作成
    function createCalendarHeader(year, month) {
        return `
            <div class="calendar-header">
                <button id="prev-month"><</button>
                <span>${year}年${month + 1}月</span>
                <button id="next-month">></button>
            </div>
            <div class="calendar-grid">
                <div class="calendar-day-header">日</div>
                <div class="calendar-day-header">月</div>
                <div class="calendar-day-header">火</div>
                <div class="calendar-day-header">水</div>
                <div class="calendar-day-header">木</div>
                <div class="calendar-day-header">金</div>
                <div class="calendar-day-header">土</div>
        `;
    }

    // カレンダーの日付部分を作成
    function createCalendarDays(firstDay, lastDay) {
        let calendarHTML = '';
        // 月の最初の日までの空白を追加
        for (let i = 0; i < firstDay.getDay(); i++) {
            calendarHTML += '<div></div>';
        }
        // 日付を追加
        for (let i = 1; i <= lastDay.getDate(); i++) {
            calendarHTML += `<div class="calendar-day">${i}</div>`;
        }
        return calendarHTML + '</div>';
    }

    // カレンダーのイベントリスナーを追加
    function addCalendarEventListeners(year, month) {
        // 前月ボタン
        document.getElementById('prev-month').addEventListener('click', (e) => {
            e.stopPropagation();
            currentCalendarDate = new Date(year, month - 1, 1);
            renderCalendar(currentCalendarDate);
        });
        // 次月ボタン
        document.getElementById('next-month').addEventListener('click', (e) => {
            e.stopPropagation();
            currentCalendarDate = new Date(year, month + 1, 1);
            renderCalendar(currentCalendarDate);
        });
        
        // 各日付にクリックイベントを追加
        customCalendar.querySelectorAll('.calendar-day').forEach(day => {
            day.addEventListener('click', () => {
                selectedDate = new Date(year, month, parseInt(day.textContent));
                updateDateDisplay(selectedDate);
                hideCalendar();
            });
        });
    }

    // カレンダー外をクリックした時の処理
    function handleOutsideClick(e) {
        if (!customCalendar.contains(e.target) && e.target !== dateSelectBtn) {
            hideCalendar();
        }
    }

    // 選択された日付の表示を更新
    function updateDateDisplay(date) {
        const days = ['日', '月', '火', '水', '木', '金', '土'];
        selectedDateSpan.textContent = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日(${days[date.getDay()]})`;
    }

    // エラーメッセージをリセット
    function resetErrors() {
        taskError.textContent = '';
        dateError.textContent = '';
    }

    // エラーメッセージを表示
    function showError(element, message) {
        element.textContent = message;
    }

    // フォームをリセット
    function resetForm() {
        taskInput.value = '';
        selectedDate = '';
        selectedDateSpan.textContent = '';
    }

    // 初期表示時にタスクを表示
    uiManager.renderTasks();
});

// タスク管理を行うクラス
export class TaskManager {
    // コンストラクタ
    constructor() {
        // タスクを読み込んで初期化
        this.tasks = this.loadTasks();
    }

    // 新しいタスクを追加するメソッド
    addTask(taskText, date) {
        // 新しいタスクオブジェクトを作成
        const task = {
            id: Date.now(),  // 現在のタイムスタンプをIDとして使用
            text: taskText,  // タスクの内容
            completed: false,  // 完了状態（初期値は未完了）
            date: date  // タスクの日付
        };
        // タスクリストに新しいタスクを追加
        this.tasks.push(task);
        // タスクを保存
        this.saveTasks();
        // 作成したタスクを返す
        return task;
    }

    // タスクを削除するメソッド
    deleteTask(taskId) {
        // 指定されたIDのタスクを除外した新しい配列を作成
        this.tasks = this.tasks.filter(task => task.id !== taskId);
        // 変更を保存
        this.saveTasks();
    }

    // タスクの完了状態を切り替えるメソッド
    toggleTaskStatus(taskId) {
        // 指定されたIDのタスクを見つける
        const task = this.tasks.find(task => task.id === taskId);
        if (task) {
            // タスクが見つかった場合、完了状態を反転
            task.completed = !task.completed;
            // 変更を保存
            this.saveTasks();
        }
    }

    // タスクの内容を編集するメソッド
    editTask(taskId, newText) {
        // 指定されたIDのタスクを見つける
        const task = this.tasks.find(task => task.id === taskId);
        if (task) {
            // タスクが見つかった場合、内容を更新
            task.text = newText;
            // 変更を保存
            this.saveTasks();
        }
    }

    // タスクをローカルストレージに保存するメソッド
    saveTasks() {
        // タスクリストをJSON文字列に変換してローカルストレージに保存
        localStorage.setItem('tasks', JSON.stringify(this.tasks));
    }

    // ローカルストレージからタスクを読み込むメソッド
    loadTasks() {
        // ローカルストレージからタスクのJSON文字列を取得
        const tasksJSON = localStorage.getItem('tasks');
        // JSON文字列が存在する場合はパースして返す、存在しない場合は空配列を返す
        return tasksJSON ? JSON.parse(tasksJSON) : [];
    }

    // 全タスクを取得するメソッド
    getTasks() {
        // タスクを日付順にソートして返す
        return this.tasks.sort((a, b) => new Date(a.date) - new Date(b.date));
    }
}

// UIを管理するクラス
export class UIManager {
    // コンストラクタ
    constructor(taskManager) {
        this.taskManager = taskManager; // TaskManagerのインスタンスを保持
        this.taskList = document.getElementById('task-list'); // タスクリストのDOM要素を取得
    }

    // 新しいタスクを追加するメソッド
    addTask(taskText, date) {
        this.taskManager.addTask(taskText, date); // TaskManagerを使ってタスクを追加
        this.renderTasks(); // タスクリストを再描画
    }

    // タスク要素を作成するメソッド
    createTaskElement(task) {
        const li = document.createElement('li'); // リスト項目要素を作成
        li.className = `task-item ${task.completed ? 'completed' : ''}`; // クラスを設定
        
        // タスク要素の内部HTMLを設定
        li.innerHTML = `
            <input type="checkbox" ${task.completed ? 'checked' : ''}>
            <span class="task-text" title="${task.text}">${task.text}</span>
            <div class="task-actions">
                <button class="edit-btn">編集</button>
                <button class="delete-btn">削除</button>
            </div>
        `;

        this.addTaskEventListeners(li, task); // イベントリスナーを追加

        return li; // 作成したタスク要素を返す
    }

    // タスク要素にイベントリスナーを追加するメソッド
    addTaskEventListeners(li, task) {
        const checkbox = li.querySelector('input[type="checkbox"]');
        const editBtn = li.querySelector('.edit-btn');
        const deleteBtn = li.querySelector('.delete-btn');

        // チェックボックスの状態変更イベント
        checkbox.addEventListener('change', () => this.toggleTaskStatus(task, li));
        // 編集ボタンのクリックイベント
        editBtn.addEventListener('click', () => this.editTask(task));
        // 削除ボタンのクリックイベント
        deleteBtn.addEventListener('click', () => this.deleteTask(task.id));
    }

    // タスクの完了状態を切り替えるメソッド
    toggleTaskStatus(task, li) {
        this.taskManager.toggleTaskStatus(task.id); // TaskManagerを使ってタスクの状態を切り替え
        li.classList.toggle('completed'); // タスク要素のクラスを切り替え
    }

    // タスクを編集するメソッド
    editTask(task) {
        const newText = prompt('タスクを編集:', task.text); // 新しいタスクテキストを入力
        if (newText && newText.trim() !== '') {
            this.taskManager.editTask(task.id, newText.trim()); // TaskManagerを使ってタスクを編集
            this.renderTasks(); // タスクリストを再描画
        }
    }

    // タスクを削除するメソッド
    deleteTask(taskId) {
        this.taskManager.deleteTask(taskId); // TaskManagerを使ってタスクを削除
        this.renderTasks(); // タスクリストを再描画
    }

    // タスクリストを描画するメソッド
    renderTasks() {
        this.taskList.innerHTML = ''; // タスクリストをクリア
        const tasks = this.taskManager.getTasks(); // すべてのタスクを取得
        const groupedTasks = this.groupTasksByDate(tasks); // タスクを日付ごとにグループ化

        // 日付でソート
        const sortedDates = Object.keys(groupedTasks).sort((a, b) => new Date(a) - new Date(b));

        // 各日付のタスクを描画
        sortedDates.forEach(date => {
            const dateHeader = document.createElement('h2');
            dateHeader.textContent = this.formatDate(date); // 日付ヘッダーを作成
            this.taskList.appendChild(dateHeader);

            // その日のタスクを描画
            groupedTasks[date].forEach(task => {
                this.taskList.appendChild(this.createTaskElement(task));
            });
        });
    }

    // タスクを日付ごとにグループ化するメソッド
    groupTasksByDate(tasks) {
        return tasks.reduce((acc, task) => {
            const dateKey = this.formatDateKey(task.date);
            if (!acc[dateKey]) {
                acc[dateKey] = [];
            }
            acc[dateKey].push(task);
            return acc;
        }, {});
    }

    // 日付キーをフォーマットするメソッド
    formatDateKey(dateString) {
        const date = new Date(dateString);
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    }

    // 日付を表示用にフォーマットするメソッド
    formatDate(dateString) {
        const date = new Date(dateString);
        const days = ['日', '月', '火', '水', '木', '金', '土'];
        return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日(${days[date.getDay()]})`;
    }
}