import Exir from "@/ui"
import {info} from "@/core/logging"
import {randomHexColor} from "@/ui_old/util"

export default function TodoItemFn(props) {
    let [done, setDone] = this.useState(false)

    this.useEffect(() => {
        info('Todo', props.text, 'Updated', done)
        this.$store.dispatch({name: 'inc'})
    })

    function rem() {
        this.$store.dispatch({name: 'removeitem', payload: props.text})
    }

    return (
        <li
            className="block text-center mb-4"
            style={{
                color: randomHexColor(),
                borderRadius: '20px',
                border: '2px solid ' + randomHexColor(),
                padding: '10px 20px',
                userSelect: 'none'
            }}
            onClick={() => {setDone(!done); rem.call(this)}}>
            {done ?
                <s style="display: inline-block; min-width: 150px">{props.text}</s>
                :
                <b style="display: inline-block; min-width: 150px">{props.text}</b>
            }
        </li>
    )
}