import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import registerServiceWorker from './registerServiceWorker'

import { createStore } from 'redux'

let generatorReducer = (store, action) => {
  switch (action.type) {
    case 'ADD_COUNTER':
      return [...store, { index: store.length, value: 0 }]
    case 'REMOVE_COUNTER':
      return [...store.slice(0, store.length - 1)]
    case 'INCREMENT':
      return [
        ...store.slice(0, action.index),
        Object.assign({}, store[action.index], {
          value: store[action.index].value + 1
        }),
        ...store.slice(action.index + 1)
      ]
    case 'DECREMENT':
      return [
        ...store.slice(0, action.index),
        Object.assign({}, store[action.index], {
          value: store[action.index].value - 1
        }),
        ...store.slice(action.index + 1)
      ]
    case 'CLEAR':
      return [
        ...store.slice(0, action.index),
        Object.assign({}, store[action.index], { value: 0 }),
        ...store.slice(action.index + 1)
      ]
    default:
      return store
  }
}

let store = createStore(generatorReducer, [{ index: 0, value: 0 }])
let Counter = () => {
  return (
    <h1 className='App'>

      {store.getState().map(elem => {
        return (
          <div key={elem.index}>
            <h1>{elem.value}</h1>
            <button
              onClick={() => {
                store.dispatch({
                  type: 'INCREMENT',
                  index: elem.index
                })
              }}
            >
              INCREMENT
            </button>
            <button
              onClick={() => {
                store.dispatch({
                  type: 'DECREMENT',
                  index: elem.index
                })
              }}
            >
              DECREMENT
            </button>
            <button
              onClick={() => {
                store.dispatch({
                  type: 'CLEAR',
                  index: elem.index
                })
              }}
            >
              CLEAR
            </button>
          </div>
        )
      })}
      <button
        onClick={() => {
          store.dispatch({
            type: 'ADD_COUNTER'
          })
        }}
      >
        ADD
      </button>
      <button
        onClick={() => {
          store.dispatch({
            type: 'REMOVE_COUNTER'
          })
        }}
      >
        REMOVE
      </button>
    </h1>
  )
}
store.subscribe(() => {
  ReactDOM.render(<Counter />, document.getElementById('root'))
})
ReactDOM.render(<Counter />, document.getElementById('root'))
registerServiceWorker()