<div id="app"></div>

@import 'https://fonts.googleapis.com/css?family=Share+Tech+Mono';

@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css';

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
    width: 100vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/jess-harding-lqT6NAmTaiY-unsplash.jpg'),radial-gradient(#28a3dd, #0d7751);
    background-size: cover;
    background-position: center;
    font-family: "Share Tech Mono", monospace;
    font-size: 2rem;
    background-blend-mode: multiply,screen, overlay;
}

.container {
    position: relative;
    background-size: cover;
    background-position: center;
    backdrop-filter: blur(20px);
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    padding:2vw;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: .3s ease;
    margin: 3vw;
}

h1 {
  position: relative;
  z-index: 1;
  border-left: 5px solid #ed2553;
  margin: 0 0 3vh -2vw;
  padding: 10px 0 10px 2vw;
  color: #ed2553;
  font-size: 32px;
  font-weight: 600;
  text-transform: uppercase;
}
p {
  font-family: "Share Tech Mono", monospace;
  margin: 1em 0;
  text-align: center;
}

input[type="text"]{
    padding: 5px 15px;
    border: 1px solid #ccc;
    border-radius: 3px;
    min-width: 30vw;
    box-sizing: border-box;
    font-family: "Share Tech Mono", monospace;
    color: #2C3E50;
    font-size: 16px;
    min-height: 48px;
}

button {
  padding: 0;
  border: none;
  transform: rotate(4deg);
  transform-origin: center;
  text-decoration: none;
  padding-bottom: 3px;
  border-radius: 5px;
  box-shadow: 0 2px 0 #494a4b;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background-image: url("data:image/gif;base64,R0lGODlhBAAEAIABAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5NUY1OENCRDdDMDYxMUUyOTEzMEE1MEM5QzM0NDVBMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5NUY1OENCRTdDMDYxMUUyOTEzMEE1MEM5QzM0NDVBMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk1RjU4Q0JCN0MwNjExRTI5MTMwQTUwQzlDMzQ0NUEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjk1RjU4Q0JDN0MwNjExRTI5MTMwQTUwQzlDMzQ0NUEzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAQAAAQAsAAAAAAQABAAAAgYEEpdoeQUAOw==");
  background-color: rgba(0, 255, 196, 0.7);
  margin-left: 15px;
  white-space: nowrap;
}

button span {
  background: #f1f5f8;
  display: block;
  padding: 5px 10px;
  border-radius: 5px;
  border: 2px solid #494a4b;
}

button:active, 
button:focus {
  transform: translateY(4px);
  padding-bottom: 0px;
  outline: 0;
}

strong {
  font-size: 2rem;
  color: #ed2553;
}

.todo__container{
  background: #fff;
    margin: 1vw 0 3vw;
    position: relative;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
  
  &::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 50px;
    overflow: hidden;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
    z-index: -1;
  }
}

.todo__lists {
  margin: 0;
  padding: 0;
  list-style: none;
  
  li {
    border-bottom: 1px solid #ededed;
  }
}

input[type="checkbox"] {
	text-align: center;
	width: 40px;
	height: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
	border: none; /* Mobile Safari */
	-webkit-appearance: none;
	appearance: none;
	opacity: 0;
  left: -100%;
}

input[type="checkbox"] + label {
	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
	background-repeat: no-repeat;
	background-position: center left;
}

input[type="checkbox"]:checked + label {
	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
  color: #d9d9d9;
	text-decoration: line-through;
}

.todo__item label {
	word-break: break-all;
	padding: 15px 15px 15px 60px;
	display: block;
	line-height: 1.2;
	transition: color 0.4s;
  min-height: 68px;
}

.toto__input {
  display: flex;
  align-items: center;
  padding:16px;
}

const ToDoInput = ({onAdd}) => {
    const [text, setText] = React.useState('')
    const onTextChange = React.useCallback((e) => setText(e.currentTarget.value), [setText])

    const addToDoItem = React.useCallback(() => {
        onAdd(text)
        setText('')
    }, [onAdd, text, setText])

    return (
        <div className="toto__input">
            <input 
                type="text"
                onChange={onTextChange}
                value={text}
                placeholder="在这里输入待办事项...(^_^)"
            />
            <button onClick={addToDoItem}><span>添加</span></button>
        </div>
    )
}

// ToDoItem Component with Function Components
const ToDoItem = ({id, text, toggleItemCompleted, completedItemIds}) => {
    const [completed, setCompleted] = React.useState(false)

    const toDoItemIndexInCompletedItemIds = completedItemIds.indexOf(id)
    
    const isCompleted = toDoItemIndexInCompletedItemIds > -1

    if (isCompleted != completed) {
        setCompleted(isCompleted)
    }

    const onToggle = React.useCallback(() => {
        toggleItemCompleted(id)
    },[toggleItemCompleted, id])

    return (
        <li className="todo__item">
            <input 
                type="checkbox"
                id={`completed-${id}`}
                onChange={onToggle}
                checked={completed}
            />
            <label htmlFor={`completed-${id}`}>{text}</label>
        </li>
    )
}

const generateID = () => {
    return `${Date.now().toString(36)}-${(Math.random() + 1).toString(36).substring(7)}`
}

const reducer = (state, action) => {
    if (action.type === 'toggleItemCompleted') {
        const {toDoItemId} = action

        const toDoItemIndexInCompletedItemIds = state.completedItemIds.indexOf(toDoItemId)

        const completedItemIds = toDoItemIndexInCompletedItemIds === -1 ? state.completedItemIds.concat([toDoItemId]) : ([...state.completedItemIds.slice(0, toDoItemIndexInCompletedItemIds), ...state.completedItemIds.slice(toDoItemIndexInCompletedItemIds + 1)])

        return {...state, completedItemIds}
    }

    if (action.type === 'addToDoItem') {
        const newToDoItem = {
            text: action.text,
            id: generateID()
        }

        const toDoItems = state.toDoItems.concat([newToDoItem])

        return {...state, toDoItems}
    }

    return state
}

const initialState = {
    toDoItems: [],
    completedItemIds: []
}

const initState = (state) => {
    let savedToDos = localStorage.getItem('todos')

    try {
        savedToDos = JSON.parse(savedToDos)
        return Object.assign({}, state, savedToDos)
    } catch (err) {
        console.log(`Saved todos non-existent or corrupt. Trashing saved todos.`)
        return state
    }
}

const ToDoContainer = () => {
    const [state, dispatch] = React.useReducer(reducer, initialState, initState)

    React.useEffect(() => {
        localStorage.setItem('todos', JSON.stringify(state))
    })

    const toggleItemCompleted = React.useCallback((toDoItemId) => {
        dispatch({type: 'toggleItemCompleted', toDoItemId})
    }, [dispatch])

    const toDoList = state.toDoItems.map( toDoItem => {
        return (
            <ToDoItem 
                key={toDoItem.id}
                completedItemIds={state.completedItemIds}
                toggleItemCompleted={toggleItemCompleted}
                {...toDoItem}
            />
        )
    })

    const addToDoItem = React.useCallback((text) => {
        dispatch({type: 'addToDoItem', text})
    }, [dispatch])

    const toDoInput = (
        <ToDoInput onAdd={addToDoItem} />
    )

    return (
        <div className="container">
            <h1>待办事项...(^_^)</h1>
            <div className="todo__container">
                <ul className="todo__lists">
                    {toDoList}
                </ul>
                {toDoInput}
            </div>
        </div>
    )
}


const rootElement = document.getElementById("app");
ReactDOM.render(<ToDoContainer />, rootElement);