<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;
}

class ToDoContainer extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            toDoItems: [],
            completedItemIds: []
        }
    }

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

    addToDoItem = (text) => {
        const newToDoItem = {
            text,
            id: this.generateID()
        }

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

        this.setState({toDoItems})
    }

    toggleItemCompleted = (toDoItemId) => {
        const toDoItemIndexInCompletedItemIds = this.state.completedItemIds.indexOf(toDoItemId)

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

        this.setState({completedItemIds})
    }

    componentDidMount() {
        let saveToDos = localStorage.getItem('todos')

        try {
            saveToDos = JSON.parse(saveToDos)
            this.setState(Object.assign({}, this.state, saveToDos))
        } catch (error) {
            console.log('保存的待办事项不存在')
        }
    }

    componentDidUpdate() {
        localStorage.setItem('todos', JSON.stringify(this.state))
    }

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

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

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


class ToDoInput extends React.Component {
    constructor(props){
        super(props)
        this.state={
            text: ''
        }
    }

    handleChange = e => {
        this.setState({text: e.currentTarget.value})
    }

    addToDoItem = () => {
        this.props.onAdd(this.state.text)
        this.setState({text: ''})
    }

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

class ToDoItem extends React.Component {
    constructor(props) {
        super(props)
        this.state={
            completed: false
        }
    }

    toggleItemCompleted = () => {
        this.props.toggleItemCompleted(this.props.id)
    }

    static getDerivedStateFromProps(props, state) {
        const toDoItemIndexInCompletedItemIds = props.completedItemIds.indexOf(props.id)

        return { completed: toDoItemIndexInCompletedItemIds > -1}
    }

    render() {
        return (
          <li className="todo__item">
            <input
              id={`completed-${this.props.id}`}
              type="checkbox"
              onChange={this.toggleItemCompleted}
              checked={this.state.completed}
            />
            <label htmlFor={`completed-${this.props.id}`}>{this.props.text}</label>
          </li>
        )
    }
}

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