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

export default Exir.createComponent({
    name: 'TodoItem',
    props: {
        text: "",
    },
    state: {
        done: false
    },
    render({props, state}) {
        // console.log(state, props);
        return (
            <div
                className="block text-center mb-4"
                style={{
                    color: this.state.color,
                    borderRadius: '20px',
                    border: '2px solid ' + this.state.color,
                    padding: '10px 20px',
                    userSelect: 'none'
                }}
                onClick={ ()=> {
                    this.setState(()=>{
                        state.done = (!state.done);
                        // setTimeout(()=>this.rem(), 1)
                        // this.rem();
                    });
                    this.rem()
                    // state.done = (!state.done);
                }}>
                {/*<b style="display: inline-block; min-width: 150px">{props.text}</b>*/}
                {state.done ?
                    <s style="display: inline-block; min-width: 150px">{props.text}-{props.key}</s>
                    :
                    <b style="display: inline-block; min-width: 150px">{props.text}-{props.key}</b>
                }
            </div>
        )
    },
    rem() {
        // this.props.remove(this.$key);
        this.$store.dispatch({name: 'removeitem', payload: {key: this.props.key}});
        // this.$update()
    },
    beforeCreate() {
        this.state.color = randomHexColor();
    },
    Created() {
        // console.log(this.$name, this.$instanceId)
    },
    beforeUpdate(props) {
        // info('Todo', props.text, 'beforeUpdate', this.state.done)
        // this.$store.dispatch({name: 'inc'})
    },
    Updated() {
        // info('Todo', this.props.text, 'Updated', this.state.done)
    },
    Destroyed(props) {
        info(`Destroyed item with ${props}`)
    }
})