// action creators
let nextTodoId = 0;
const addTodo = (text) => ({
  type: 'ADD_TODO',
  id: nextTodoId++,
  text
});

const setVisibilityFilter = (filter) => ({
  type: 'SET_VISIBILITY_FILTER',
  filter
});

const toggleTodo = (id) => ({
  type: 'TOGGLE_TODO',
  id
});

// reducers
const todo = (state, action) => {
  switch(action.type) {
    case 'ADD_TODO':
      return {
        id: action.id,
        text: action.text,
        completed: false
      };
    case 'TOGGLE_TODO':
      return Object.assign({}, state, {completed: !state.completed});
    default:
      return state;
  }
}

const todos = (state = [], action) => {
  switch(action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        todo(undefined, action)
      ]
    case 'TOGGLE_TODO':
      return state.map((t) => t.id !== action.id ? t : todo(t, action));
    default:
      return state;
  }
};

const visibilityFilter = (state = 'SHOW_ALL', action) => {
  switch(action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter;
    default:
      return state;
  }
};

const testAddTodo = () => {
  const action = {
    type: 'ADD_TODO',
    id: 0,
    text: 'Write puns'
  };
  const beforeState = [];
  const afterState = [
    {
      id: 0,
      text: 'Write puns',
      completed: false
    }
  ];

  expect(todos(beforeState, action)).toEqual(afterState);
};

const testToggleTodo = () => {
  const action = {
    type: 'TOGGLE_TODO',
    id: 1
  };
  const beforeState = [
    {
      id: 0,
      text: 'Write puns',
      completed: false
    }, {
      id: 1,
      text: 'do the reduxes',
      completed: false
    }
  ];
  const afterState = [
    {
      id: 0,
      text: 'Write puns',
      completed: false
    }, {
      id: 1,
      text: 'do the reduxes',
      completed: true
    }
  ];

  expect(todos(beforeState, action)).toEqual(afterState);
};

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case 'SHOW_ACTIVE':
      return todos.filter(t => !t.completed);
    case 'SHOW_COMPLETED':
      return todos.filter(t => t.completed);
    case 'SHOW_ALL':
    default:
      return todos;
  }
}

testAddTodo();
testToggleTodo();

console.log('tests passed');

const { Component } = React;
const { createStore, combineReducers } = Redux;
const { connect, Provider } = ReactRedux;
const reducers = Redux.combineReducers({
  todos, visibilityFilter
});

let AddTodo = ({ onAddTodoClick }) => {
  let input;
  return (
    <div>
      <input ref={node => input = node} />
      <button onClick={() => {
          onAddTodoClick(input.value);
          input.value = '';
        }}>
        Add Todo
      </button>
    </div>
  );
};
AddTodo = connect(
  null,
  dispatch => ({
    onAddTodoClick: text => dispatch(addTodo(text))
  })
)(AddTodo);

const Link = ({ active, children, onClick }) => {
  if (active) {
    return <span>{children}</span>
  }

  return (
    <a href='#' onClick={e => {
        e.preventDefault();
        onClick();
      }}>{children}</a>
  );
}

const FilterLink = connect(
  (state, props) => ({
    active: props.filter === state.visibilityFilter
  }),
  (dispatch, props) => ({
    onClick: () => dispatch(setVisibilityFilter(props.filter))
  })
)(Link);

const Footer = () => {
  return (
    <p>
      {'Show: '}
      <FilterLink filter='SHOW_ALL'>All</FilterLink>{' '}
      <FilterLink filter='SHOW_ACTIVE'>Active</FilterLink>{' '}
      <FilterLink filter='SHOW_COMPLETED'>Completed</FilterLink>{' '}
    </p>
  )
};

const Todo = ({ onClick, completed, text }) => {
  return (
    <li onClick={onClick}
        style={{textDecoration: completed ? 'line-through' : 'none'}}
      >
      {text}
    </li>
  )
};

const TodoList = ({todos, onTodoClick}) => {
  return (
    <ul>
      {todos.map(t =>
          <Todo
            key={t.id}
            {...t}
            onClick={() => onTodoClick(t.id)} />
       )}
    </ul>
  )
};

const VisibleTodoList = connect(
  state => ({
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }),
  dispatch => ({
    onTodoClick: (id) => dispatch(toggleTodo(id))
  })
)(TodoList);

const TodoApp = () => (
  <div>
    <AddTodo />
    <VisibleTodoList />
    <Footer />
  </div>
);

ReactDOM.render(
  <Provider store={createStore(reducers)}>
    <TodoApp />
  </Provider>,
  document.getElementById('root')
);