import { useState, useEffect, useContext } from 'react'
import Link from 'next/link'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTrash, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons'
import { UserContext } from '../../contexts/UserContext'
import redirect from '../../utils/redirect'
import FunctionPage from '../../components/FunctionPage/FunctionPage'
import FunctionTabs from '../../components/FunctionPage/FunctionTabs'
import FunctionArticle from '../../components/FunctionPage/FunctionArticle'
import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments'
import api from '../../utils/api'
import '../../public/css/pages/FunctionComponent.css'
import '../../public/css/pages/functions/toDoList.css'

const ManageToDo = () => {
  const { isAuth, user } = useContext(UserContext)
  const [inputState, setInputState] = useState({ task: '' })
  const [tasks, setTasks] = useState([])

  useEffect(() => {
    const getTasks = async () => {
      const { data } = await api.get('/tasks', { headers: { Authorization: user.token } })
      setTasks(data)
    }
    if (isAuth && user.token != null) {
      getTasks()
    }
  }, [isAuth])

  const handleChange = (event) => {
    const inputStateNew = { ...inputState }
    inputStateNew[event.target.name] = event.target.value
    setInputState(inputStateNew)
  }

  const handleSubmit = async (event) => {
    event.preventDefault()
    try {
      const { data } = await api.post('/tasks', inputState, { headers: { Authorization: user.token } })
      const newTasks = [...tasks]
      newTasks.push(data)
      setTasks(newTasks)
      setInputState({ task: '' })
    } catch {}
  }

  const handleRemoveTask = async (id, index) => {
    const newTasks = [...tasks]
    try {
      await api.delete(`/tasks/${id}`, { headers: { Authorization: user.token } })
      newTasks.splice(index, 1)
      setTasks(newTasks)
    } catch {}
  }

  const handleEditTask = async (id, index, isCompleted) => {
    try {
      await api.put(`/tasks/${id}`, { isCompleted: !isCompleted }, { headers: { Authorization: user.token } })
      const newTasks = [...tasks]
      const taskObject = newTasks[index]
      taskObject.isCompleted = !isCompleted
      setTasks(newTasks)
    } catch {}
  }

  if (!isAuth) {
    return (
      <p className='text-center'>
                Vous devez être <Link href='/users/login'><a>connecté</a></Link> pour gérer des "tâches à faire".
      </p>
    )
  }

  return (
    <div className='container-fluid'>
      <div className='row justify-content-center'>
        <div className='col-24'>
          <form onSubmit={handleSubmit}>
            <div className='text-center'>
              <label htmlFor='task' className='form-label'>Ajouter une tâche à faire :</label>
              <input value={inputState.task} onChange={handleChange} name='task' id='task' type='text' className='form-control' placeholder='(e.g : Apprendre à coder)' />
            </div>

            <div className='form-group text-center'>
              <button type='submit' className='btn btn-dark'>Envoyer</button>
            </div>
          </form>
        </div>
      </div>

      {(tasks.length > 0) &&
        <div className='row justify-content-center'>
          <div className='col-24 ManageToDo__container'>
            <ul className='ManageToDo__list'>
              {tasks.map((task, index) => {
                return (
                  <li key={task.id} className={`ManageToDo__list-item ${(task.isCompleted) ? 'isCompleted' : ''}`}>
                    <span className='ManageToDo__list-item-span'>{task.task}</span>
                    <div>
                      <button className='ManageToDo__task-btn' title='Supprimer de la liste' onClick={() => handleRemoveTask(task.id, index)}>
                        <FontAwesomeIcon icon={faTrash} />
                      </button>
                      <button className='ManageToDo__task-btn' onClick={() => handleEditTask(task.id, index, task.isCompleted)}>
                        <FontAwesomeIcon {...(task.isCompleted) ? { icon: faTimes } : { icon: faCheck }} />
                      </button>
                    </div>
                  </li>
                )
              })}
            </ul>
          </div>
        </div>}
    </div>
  )
}

const FunctionTabManager = (props) => {
  return (
    <FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
      <div className='FunctionComponent__slide'>
        <ManageToDo />
      </div>
      <div className='FunctionComponent__slide'>
        <FunctionArticle article={props.article} />
      </div>
      <div className='FunctionComponent__slide'>
        <FunctionComments functionId={props.id} />
      </div>
    </FunctionTabs>
  )
}

const toDoList = (props) => (
  <FunctionPage
    FunctionTabManager={FunctionTabManager}
    {...props}
    tabNames={['⚙️ Utilisation', '📝 Article', '📬 Commentaires']}
  />
)

export async function getServerSideProps (context) {
  return api.get('/functions/toDoList')
    .then((response) => ({ props: response.data }))
    .catch(() => redirect(context, '/404'))
}

export default toDoList