import WrongIcon from "/src/assets/wrong-svgrepo-com.svg";
import TickIcon from "/src/assets/tick-circle-svgrepo-com.svg";
import { todo } from '../../types.dt'
interface item extends todo {
    index: Number,
    handleDelete?: () => void
    handleUpdate: () => void
}
const Item = ({ name, index, completed, id, handleDelete, handleUpdate }: item) => {
    const handleClick = (e: React.ChangeEvent<HTMLImageElement>) => {
        // console.log(index)
        handleDelete({ id })
    }
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        handleUpdate({ name: e.target.value, index })
    }
    const handleTick = () => {
        console.log("handletick")
        handleUpdate({ index })
    }
    console.log(name)
    return (
        <div className="item">
            <div className='item-content'>
                <input type='checkbox' id={`item-${index}`} defaultChecked={completed} onChange={handleTick} />
                <input className={`${completed && "strike"}`} readOnly={completed} defaultValue={name} type="text" placeholder="Enter the Name of the List" onChange={handleChange} />
            </div>
            <div className='actions'>
                {
                    !completed ? (
                        <>

                            <img src={WrongIcon} alt="Not Done" onClick={handleClick} className="delete-img" />
                        </>
                    ) : (

                        <img src={TickIcon} alt="Done" />
                    )
                }
            </div>
        </div>
    )
}

export default Item