<script>
	import { todos } from '$lib/stores/todos.js';
	let todo_text = '';
	let todo_type = 'active';
	let filteredTodo = [];
	let addTodo = () => {
		if (todo_text.length > 0) {
			const todo = {
				text: todo_text,
				date: Date.now,
				done: false
			};
			todo_text = '';
			if (todo_type == 'done') todo_type = 'all';
			$todos = [todo, ...$todos];
		}
	};
	let solveTodo = (todo) => {
		if (todo.done) {
			todo.done = false;
		} else {
			todo.done = true;
		}
		$todos = $todos;
	};
	let clearTodo = (todo) => {
		$todos = $todos.filter((x) => x != todo);
	};
	let filterTodo = (type) => {
		todo_type = type;
		switch (type) {
			case 'active':
				filteredTodo = $todos.filter((todo) => !todo.done);
				break;
			case 'done':
				filteredTodo = $todos.filter((todo) => todo.done);
				break;
			case 'all':
				filteredTodo = $todos;
				break;
		}
	};
	$: {
		filteredTodo = $todos;
		filterTodo(todo_type);
	}
</script>

<div class="panel">
	<h2 class="title">todo</h2>
	<hr />
	<div class="todo-input">
		<input class="todo-text" bind:value={todo_text} placeholder="title" />
		<button
			on:click={addTodo}
			disabled={todo_text.length == 0}
			class="todo-add {todo_text.length == 0 ? 'disabled' : ''}">add</button
		>
	</div>
	<div class="todo-filter">
		<button on:click={() => filterTodo('active')} class={todo_type == 'active' ? 'disabled' : ''}
			>active</button
		>
		<button on:click={() => filterTodo('done')} class={todo_type == 'done' ? 'disabled' : ''}
			>done</button
		>
		<button on:click={() => filterTodo('all')} class={todo_type == 'all' ? 'disabled' : ''}
			>all</button
		>
	</div>
	<ul class="todo-list">
		{#each filteredTodo as todo}
			<li class="todo {todo.done ? 'done' : ''}">
				<p>{todo.text}</p>
				<div class="todo-buttons">
					{#if todo.done}
						<button class="clear" on:click={() => clearTodo(todo)}>✗</button>
					{/if}
					<button class="solve" on:click={() => solveTodo(todo)}>✓</button>
				</div>
			</li>
		{/each}
	</ul>
</div>

<style>
	* {
		--cream: #fef9ef;
		--blue: #227c9d;
		--blue-disabled: #aabac0;
		--green: #17c3b2;
		--yellow: #ffcb77;
		--red: #fe6d73;
	}

	.panel {
		padding-top: 1rem;
		padding-bottom: 1rem;
		background-color: var(--cream);
		font-size: 1rem;
		font-family: 'Atkinson Hyperlegible', sans-serif;
	}
	@media only screen and (min-width: 500px) {
		.panel {
			margin-left: auto;
			margin-right: auto;
			width: 500px;
			border: solid var(--cream) 0px;
			border-radius: 10px;
		}
	}

	.title {
		margin-left: 2rem;
		font-weight: 400;
		font-size: 3rem;
		color: var(--yellow);
	}

	hr {
		margin-left: 1rem;
		margin-bottom: 1rem;
		border: 2px solid var(--yellow);
	}

	button {
		padding: 5px;
		margin: 0px;
		background-color: var(--blue);
		border: solid var(--blue) 1px;
		border-radius: 5px;
		color: white;
		font-family: 'Atkinson Hyperlegible', sans-serif;
		font-size: 1rem;
	}

	.todo-input {
		font-size: 0px;
		margin: 1rem;
		display: flex;
	}
	.todo-text {
		padding: 1rem;
		margin: 0px;
		border: solid white 2px;
		border-right: 0px;
		border-radius: 0px;
		border-bottom-left-radius: 5px;
		border-top-left-radius: 5px;
		font-family: 'Atkinson Hyperlegible', sans-serif;
		font-size: 1rem;
		width: 100%;
	}

	.todo-text:focus {
		outline: none;
		border-bottom-color: var(--blue);
	}

	.todo-add {
		padding: 1rem;
		border-bottom-left-radius: 0px;
		border-top-left-radius: 0px;
	}

	.disabled {
		background-color: var(--blue-disabled);
		border-color: var(--blue-disabled);
	}

	button:active {
		background-color: var(--yellow);
		border-color: var(--yellow);
		color: black;
	}

	button:active.disabled {
		background-color: var(--blue-disabled);
		border-color: var(--blue-disabled);
		color: white;
	}

	.todo-filter {
		margin-top: 1rem;
		display: flex;
		align-items: center;
		padding-left: 1rem;
	}

	.todo-filter button {
		padding-left: 1rem;
		padding-right: 1rem;
		margin-right: 1px;
		border-bottom-left-radius: 0px;
		border-bottom-right-radius: 0px;
	}

	.todo-list {
		margin-left: 1rem;
		margin-right: 1rem;
		padding: 1rem;
		padding-bottom: 0.5rem;
		background-color: var(--blue-disabled);
		border-bottom-left-radius: 0px;
		border-top-right-radius: 5px;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
		/* list
        * padding 1.5rem
       todo
        * content 1.0rem
        * padding 1.0rem
        * marging 0.5rem
       button
        * padding 6px
        * border  6px
       total
        (1.5 + 2.5*3)rem (9rem)
        + (12*3)px       (36px)
    */
		min-height: calc(11.5rem + 48px);
	}

	.todo {
		padding: 0.5rem;
		margin-bottom: 0.5rem;
		background-color: var(--cream);
		border-radius: 5px;
		display: flex;
		align-items: center;
	}

	.todo-buttons {
		margin-left: auto;
	}

	.todo.done {
		background-color: var(--cream);
	}

	/* common properties */
	.todo button {
		width: 2rem;
		height: 2rem;
		padding: 0rem;
		border: solid 0.2rem;
		border-radius: 1rem;
	}

	/* sovle button */
	.todo button.solve {
		background-color: var(--cream);
		border-color: var(--green);
		color: transparent;
	}
	.todo.done button.solve {
		background-color: var(--cream);
		color: var(--green);
	}

	/* clear button */
	.todo button.clear {
		background-color: var(--red);
		border-color: var(--red);
		color: var(--cream);
	}

	/* active buttons */
	.todo button:active {
		background-color: var(--yellow);
		border-color: var(--yellow);
	}
	.todo.done button:active {
		background-color: var(--yellow);
		border-color: var(--yellow);
	}
</style>
