import React, { useEffect, useState } from 'react';
import store from './Store'
const Todo = ({ todo, lp }) => {
    const [timer, setTimer] = useState('')
    useEffect(() => {
        if (todo.status === 'Done') {
            clearInterval(timer)
        }
        else if (todo.minutes <= 0 && todo.seconds <= 0 && todo.status === 'Todo') {

            clearInterval(timer)

            store.dispatch({ type: "SET_TODO_EXPIRED", payload: { id: todo.id } })
        }
        else if (!todo.started && todo.status === "Todo") {

            setTimer(setInterval(() => {

                store.dispatch({ type: "CLOCK_TICKING", payload: { id: todo.id } })


            }, 1000))
        }
    }, [todo])
    const handleDone = () => {
        console.log(todo);

        if (todo.status === 'Todo') {
            store.dispatch({ type: 'CHANGE_TODO_STATUS', payload: { status: "Done", id: todo.id } })
        }
        else {
            store.dispatch({ type: 'CHANGE_TODO_STATUS', payload: { status: "Todo", id: todo.id } })
        }

    }


    const setStyle = () => {
        let col;
        if (todo.status === 'Done') {
            col = 'green'
        }
        else if (todo.status === 'Expired') {
            col = 'yellow'
        }
        return {
            backgroundColor: col
        }

    }
    const message = () => {
        let mes;
        if (todo.status === 'Done') {
            mes = 'Task Done'
        }
        else if (todo.status === 'Expired') {
            mes = 'Task Expired'
        }
        else {
            mes = 'Task in progress'
        }
        return mes
    }
    const displayedMinutes = todo.minutes >= 10 ? todo.minutes : `0${todo.minutes}`
    const displayedSeconds = todo.seconds >= 10 ? todo.seconds : `0${todo.seconds}`
    return (
        <div className='todo' style={setStyle()}>
            <p>{lp}.</p>
            <p>{todo.description}</p>
            {todo.status === 'Todo' && <p>{displayedMinutes} : {displayedSeconds} </p>}
            {todo.status !== 'Expired' && <button onClick={handleDone}>{todo.status !== 'Done' ? 'done' : 'undo'}</button>}
            <p>{message()}</p>
        </div>
    );
}

export default Todo;