import React, {
  Component,
  FormEvent,
  ChangeEvent,
  KeyboardEvent,
  MouseEvent,
  KeyboardEventHandler,
  ChangeEventHandler
} from 'react'
import _ from 'lodash'
import { TodoForm, TodoList } from './components'
import './App.css'
import 'bulma/css/bulma.css'

type todo = { todo: string; isChecked: boolean; editMode: boolean }
type onChangeAndIndex = (
  e: ChangeEvent<HTMLInputElement>,
  index: number
) => void
type formAndIdex = (
  e: FormEvent<HTMLFormElement> | MouseEvent<HTMLButtonElement>,
  index: number
) => void
type onClickAndIndex = (e: MouseEvent<HTMLButtonElement>, index: number) => void
export interface State {
  activeTodos: todo[]
  todoObject: todo
  tempTodo: todo
}

export interface Actions {
  add: KeyboardEventHandler
  change: ChangeEventHandler
  edit: onChangeAndIndex
  update: formAndIdex
  cancel: onClickAndIndex
  toggleEditMode: onClickAndIndex
  toggleDone: onChangeAndIndex
  remove: onClickAndIndex
}

export default class extends Component<{}, State> {
  private todoDefault = { todo: '', isChecked: false, editMode: false };

  state = {
    activeTodos: [this.todoDefault],
    completedTodos: [this.todoDefault],
    todoObject: this.todoDefault,
    tempTodo: this.todoDefault
  }

  private handleAdd = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      this.setState((prevState: State) => ({
        activeTodos: [...prevState.activeTodos, prevState.todoObject],
        todoObject: { todo: '', isChecked: false, editMode: false }
      }))
    }
  }

  private handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const todoText = e.currentTarget.value
    this.setState((prevState: State) => ({
      todoObject: {
        todo: todoText,
        isChecked: prevState.todoObject.isChecked,
        editMode: false
      }
    }))
  }

  private handleEdit = (e: ChangeEvent<HTMLInputElement>, index: number) => {
    let list = [...this.state.activeTodos]
    const todoText = e.currentTarget.value
    list[index] = {
      todo: todoText,
      isChecked: list[index].isChecked,
      editMode: true
    }
    this.setState({ activeTodos: list })
  }

  private handleUpdate = (
    e: FormEvent<HTMLFormElement> | MouseEvent<HTMLButtonElement>,
    index: number
  ) => {
    e.preventDefault()
    const list = [...this.state.activeTodos]
    if (list.length > 0) {
      list[index] = {
        todo: list[index].todo,
        isChecked: list[index].isChecked,
        editMode: false
      }
      if (list[index].todo) this.setState({ activeTodos: list })
    }
  }

  private handleCancel = (
    e: FormEvent<HTMLFormElement> | MouseEvent<HTMLButtonElement>,
    index: number
  ) => {
    const list = [...this.state.activeTodos]
    if (list.length > 0) {
      list[index] = this.state.tempTodo
      list[index].editMode = false
      this.setState({ activeTodos: list })
    }
  }

  private handleToggleEditMode = (
    e: MouseEvent<HTMLSpanElement>,
    index: number
  ) => {
    let list = [...this.state.activeTodos]
    list[index] = {
      todo: list[index].todo,
      isChecked: list[index].isChecked,
      editMode: true
    }
    this.setState((prevState: State) => {
      let tempList = []
      tempList = [...prevState.activeTodos]
      return {
        tempTodo: tempList[index],
        activeTodos: list
      }
    })
  }

  private handleToggleDone = (
    e: ChangeEvent<HTMLInputElement>,
    index: number
  ) => {
    let list = [...this.state.activeTodos]
    list[index].isChecked = this.state.activeTodos[index] && !this.state.activeTodos[index].isChecked
    this.setState({
      activeTodos: list
    })
  }

  private handleRemove = (
    e: MouseEvent<HTMLButtonElement>,
    index: number
  ) => {
    let list = [...this.state.activeTodos]
    const newList = _.remove(list, (item: todo, i: number) => {
      return i !== index
    })
    this.setState({
      activeTodos: newList
    })
  }

  actions: Actions = {
    add: this.handleAdd,
    change: this.handleChange,
    edit: this.handleEdit,
    update: this.handleUpdate,
    cancel: this.handleCancel,
    remove: this.handleRemove,
    toggleEditMode: this.handleToggleEditMode,
    toggleDone: this.handleToggleDone
  }

  render () {
    return (
      <div className="columns is-centered section">
        <div className="column is-10-mobile is-8-tablet is-6-desktop">
          <h1>TODO</h1>
          <TodoForm state={this.state} actions={this.actions} />
          <TodoList state={this.state} actions={this.actions} />
        </div>
      </div>
    )
  }
}