import {createTemplate} from "../src/template";
import {App} from "../src/App";

import {TaskComponent} from "./TaskList"
import {Task} from "./types";

const state = {
    text: '',
    tasks: [{
        id: 1,
        text: 'サンプル',
        isDone: false
    }] as Task[],
    filterDone: false,
    id: 2
}

const [template, reload] = createTemplate(state, {
    setup: ({s}) => {

        const [taskTemplate, taskReload] = TaskComponent({
            tasks: state.tasks,
            filter: (task) => state.filterDone ? task.isDone : true,
            removeTask: id => {
                const idx = state.tasks.findIndex(v => v.id === id)
                state.tasks.splice(idx, 1)
                taskReload.fire()
            },
            toggleDone: id => {
                const idx = state.tasks.findIndex(v => v.id === id)
                state.tasks[idx].isDone = !state.tasks[idx].isDone
                taskReload.fire()
            }
        })
        taskReload.on(() => {
            const taskList = $('#js-task-list')
            taskList.empty()
            taskList.append(taskTemplate())
        })

        $(document).on('input', '#js-task_input', () => {
            const input = $('#js-task_input')
            s.text = String(input.val())
        })
        $(document).on('click', '.add_button', () => {
            s.tasks.push({
                id: s.id,
                text: s.text,
                isDone: false
            })
            s.id++
            $('#js-task_input').val('')
            s.text = ''
            taskReload.fire()
        })

        $(document).on('click', '#js-filter-done', () => {
            state.filterDone = !state.filterDone
            const input = $('#js-filter-done')
            input.prop('checked', state.filterDone)
            taskReload.fire()
        })

        return {
            taskList: taskTemplate
        }
    },
    render: ({context}) => {
        // language=HTML
        return `
            <div>
              <h1>タスク一覧</h1>
              <label>
                <input type="checkbox" id="js-filter-done">
                完了済みのみ表示する
              </label>
              <div id="js-task-list">
                ${context.taskList()}              
              </div>
              <input id="js-task_input"">
              <button class="add_button">追加</button>
            </div>
        `
    }
})

new App('#app', template, reload)