import * as TodoTaskController from 'TodoTask.js';
import TodoInput from '../Controls/TodoInput';

define TodoTask extends TodoTaskController {

	let TaskView as (.view) {

		input.toggle type=checkbox {
			dualbind
				value = completed
				// emit signal when INPUTs state changes via user input
				x-signal = 'dom: taskChanged'
				;
		}
		label > '~[bind:title]';
		button.destroy x-tap = 'taskRemoved';
	}

	let TaskEdit as (input.edit preserve) extends TodoInput {
		
		dualbind
			value = 'title'
			dom-slot = submit

			// emit `taskChange` signal each time model is changed
			// via user input
			x-signal = 'dom: taskChanged'
			;
				
	}

	/* `+visible` is same as `+if` with one difference:
	 * by falsy condition it still renders the nodes (with display:none)
	 * and `+if` first renders only when the condition becomes true.
	 */
	+visible ($._isVisible(completed, action)) {
		li
			.~[bind:completed ? 'completed']
			.~[bind:state]
			// emit `edit` on `dblclick` event
			x-signal = 'dblclick: edit'
			{
				TaskView;
				TaskEdit;
			}
	}
}
