import {createComponent} from "../src/template";
import {Task} from './types'

type TaskState = {}
type TaskProps = {
    tasks: Task[],
    filter: (task: Task) => boolean,
    removeTask: (id: number) => void,
    toggleDone: (id: number) => void
}

export const TaskComponent = createComponent<TaskState, TaskProps>({}, {
    setup: ({props}) => {
        $(document).on('click', '.task-remove', function () {
            props.removeTask(Number($(this).attr('data-task-id')))
        })

        $(document).on('click', '.task-checkbox', function () {
            props.toggleDone(Number($(this).attr('data-task-id')))
        })
    },
    render: ({props}) => {
        console.log(props.tasks)
        // language=HTML
        return `
            <ul>
              ${props.tasks.filter(props.filter).map(task => `
                <li>
                  <input type="checkbox" class="task-checkbox" data-task-id="${task.id}" ${task.isDone ? 'checked' : ''}>${task.text} <button class="task-remove" data-task-id="${task.id}">削除</button>
                </li>
              `).join('')}
            </ul>
        `
    }
})