// An object representing your initial state
const initialState = {
	todo: [
		{
			task: "Finish this project",
			completed: false
		}
	]
}

// An object where each key is a method
const reducers = {
	addToDo: (store, [task]) => {
		store.todo.push(task)
	},
	toggleTodoState: (store, [task]) => {
		store.todo[task].completed = !store.todo[task].completed
	},
	deleteToDo: (store, [task]) => {
		store.todo.splice(task, 1)
	}
}

import React from "react"
import { createStore } from "@coriou/react-easy-store"

const initialState = {
	todo: []
}

const reducers = {
	addToDo: (store, [task, completed]) => {
		store.todo.push({
			task: task,
			completed: completed
		})
	},
	toggleTodoState: (store, [task]) => {
		store.todo[task].completed = !store.todo[task].completed
	}
}

// Create the store and the actions
const { Consumer, actions, store } = createStore(initialState, reducers)

// Can now call actions.addToDo
actions.addToDo("Do something with my life", false)

console.log(store.todo)
// [ { task: 'Do something with my life', completed: false } ]

// Use in React
const Component = () => (
	<>
		<h1>To do list</h1>
		<Consumer inject="todo">
			{({ todo }) => (
				<ul>
					{todo.map((t, i) => (
						<li
							key={i}
							style={{ color: t.completed ? "red" : "green" }}
							onClick={() => actions.toggleTodoState(i)}
						>
							{t.task}
						</li>
					))}
				</ul>
			)}
		</Consumer>
	</>
)

import React from "react"
import { createStore } from "@coriou/react-easy-store"

// Your initial store
const initialState = {
	todo: [
		{
			task: "Finish this project",
			completed: false
		},
		{
			task: "Write a readme",
			completed: true
		}
	]
}

// The « actions » / « reducers »
const reducers = {
	addToDo: (store, [task]) => {
		store.todo.push(task)
	},
	toggleTodoState: (store, [task]) => {
		store.todo[task].completed = !store.todo[task].completed
	},
	deleteToDo: (store, [task]) => {
		store.todo.splice(task, 1)
	}
}

const { Consumer, actions } = createStore(initialState, reducers)

// Your app
const App = () => (
	<>
		<h1>React Easy Store</h1>

		{/** Listening to all store changes */}
		<Consumer>
			{store => {
				return <pre>{JSON.stringify(store, null, 2)}</pre>
			}}
		</Consumer>

		<hr />

		{/** Listening only to "todo" changes */}
		<Consumer inject="todo">
			{({ todo }) => {
				if (!todo.length) return null

				return (
					<>
						<h4>Todo list:</h4>
						<ul>
							{todo.map((td, i) => (
								<li key={i}>
									<span
										onClick={() =>
											actions.toggleTodoState(i)
										}
										style={{
											color: td.completed
												? "green"
												: "red",
											textDecoration: td.completed
												? "line-through"
												: "none",
											cursor: "pointer"
										}}
									>
										{i} - {td.task}
									</span>
									<span
										style={{
											display: "block",
											color: "#BABABA",
											fontSize: "60%"
										}}
									>
										Status:{" "}
										{td.completed ? "Done" : "To do"}
									</span>
									<span
										style={{
											display: "block",
											fontSize: "60%"
										}}
									>
										<a
											href="#"
											onClick={() =>
												actions.deleteToDo(i)
											}
										>
											Delete
										</a>
									</span>
								</li>
							))}
						</ul>
					</>
				)
			}}
		</Consumer>

		<input
			type="text"
			placeholder="Add todo"
			onChange={e => (newToDo = e.target.value)}
			ref={inputElement}
		/>
		<button onClick={add}>Add to list</button>
	</>
)