import React, { Component } from 'react';
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import reducer from './redux/reducer/index'
import AddItemPage from './components/index'
const store = createStore(reducer)  //使用createStore創(chuàng)建個store
export default class App extends Component {
  render() {
    return (<Provider store={store}>  //todoList共享store
      <AddItemPage/> //todoList頁面
    </Provider>)
  }
}

import { combineReducers } from 'redux'
?
const addItem = (state = [], action) => {
    switch (action.type) {
      case 'ADD_ITEM':
        return [
          ...state,
          {
            id: action.id,
            text: action.text,
            isDelete: false
          }
        ]
      case 'DELETE_ITEM':
        let newState = [...state]
        console.log(newState)
        action.id.map(item=>{
          newState.splice(item.id,1)
        })
        return newState
      default:
        return state
    }
  }
  
export default combineReducers({
    addItem
})

let nextItemId = 0
export const addTodo = text => ({
  type: 'ADD_ITEM',
  id: nextItemId++,
  text
})
?
export const deleteItem = id => ({
  type: 'DELETE_ITEM',
  id
})

import React, { Component } from 'react';
import { connect } from 'react-redux'
import { addTodo,deleteItem } from '../redux/action'
import ItemList from './itemList'
?
class AddItem extends Component {
    render() {
        const { addItem,doAdd,doDelete } = this.props
        return  <>
        <div>
            <form onSubmit={e => {
            e.preventDefault()
            if (!this.input.value.trim()) {
                return
            }
            doAdd(this.input.value)
            // this.props.dispatch(addTodo(this.input.value))
            this.input.value = ''
            }}>
            <input ref={node => this.input = node} />
            <button type="submit">
                添加
            </button>
            <button type="button" onClick={(e)=>{
                let arr = []
                const checkbox = document.getElementsByName('itemId').forEach(item=> {
                if(item.checked) arr.push(item.value)
                })
                doDelete(arr)
                // this.props.dispatch(deleteItem(arr))
                }}>
                刪除
            </button>
            </form>
    </div>
    <ItemList addItem={addItem}/>
    </>
  }
}
const mapStateToProps = state => {return ({...state})}
const mapDispatchToProps = dispatch => ({
    doAdd:(value)=>dispatch(addTodo(value)),
    doDelete:(arr)=>dispatch(deleteItem(arr))
})
?
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(AddItem)

import React, { Component } from 'react';
class itemList extends Component {
  render() {
    return <>
    {
      this.props.addItem.map(item=>{
          return <div  key={item.id} {...item}>
            <input type='checkbox' name='itemId' value={item?.id}/>
              <li
              style={{
                textDecoration: item?.completed ? 'line-through' : 'none'
              }}
            >
              {item?.text}
            </li>
          </div>
        })
    }
    </>;
  }
}
?
export default itemList