import * as React from 'react'
import CommentInput from './CommentInput'
import CommentList from './CommentList'

import './App.css'

interface IState {
  comments: Array<any>;
}

class App extends React.Component<{}, IState> {
  public state: IState = {
    comments: []
  }

  componentWillMount() {
    let data: any = localStorage.getItem('comments')
    this.setState({comments: JSON.parse(data)})
  }

  private saveData = (data: any) => {
    localStorage.setItem('comments', JSON.stringify(data))
  }

  private handleSubmitComment = (comment: any) => {
    if (!comment) return
    if (!comment.username) return alert('请输入用户名')
    if (!comment.content) return alert('请输入评论内容')

    const {comments} = this.state
    comments.push(comment)
    this.setState({comments})

    this.saveData(comments)
  }

  private handleDeleteComment = (index: number) => {
    let {comments} = this.state
    comments.splice(index, 1)
    this.setState({comments})

    this.saveData(comments)
  }

  render() {
    return (
      <div className="wrapper">
        <CommentInput onSubmit={this.handleSubmitComment}/>
        <CommentList
          onDeleteComment={this.handleDeleteComment}
          comments={this.state.comments}
        />
      </div>
    )
  }
}

export default App;