import Exir from "../../ui"
import {info} from "../../core/logging"
import {randomHexColor} from "../../ui/util";

export default Exir.createComponent('TodoItem', {
    props: {
        text: "",
    },
    state: {
        done: false
    },
    render(props) {
        return <li style={{
            backgroundColor: randomHexColor(),
            color: randomHexColor(),
            display: 'block',
            padding: '15px',
            margin: '15px',
            border: '3px solid ' + randomHexColor()
        }} onClick={() => this.setState(s => s.done = !s.done)}>
            {this.state.done ?
                <s>{props.text}</s>
                :
                <b>{props.text}</b>
            }
        </li>
    },
    onCreate(props) {
        info('Created item with', props)
    },
    onDestroy(props) {
        info('Destroyed item, with', props)
    },
    onUpdate(props) {
        info('Updated item, with ', props)
    }
})