import Exir from "../../ui"
import {randomId} from "../../ui/util";
import {store} from "./mystore";

export default Exir.createComponent('List', {
    props: {
        step: 100
    },
    state: {
        a: 0,
        items: [],
        children: []
    },
    onCreate(props) {
        console.log('list created', this.props)
        store.subscribe(this.upd.bind(this))
    },
    onUpdate(props) {
        console.log('list updated', props)
    },
    render() {
        return (<div id={'ListParent' + this.state.a}>
            <button onClick={this.add}>Add {this.state.step}</button>
            <button onClick={this.remove}>Remove {this.props.step}</button>
            <h3>{this.state.items.length}, {this.state.items.length%2===0?<b>Even</b>:<s>Odd</s>}</h3>
            state: {JSON.stringify(store)}
            {[Symbol('ha')]}
            <>
                {
                    this.$children.map((child) => child.$clone())
                }
            </>
            <div>
                {this.state.items.map((idx) => (
                    <div id={'' + this.state.a + idx}>Link {idx}</div>
                ))}
            </div>

        </div>)
    },
    add() {
        // console.log('items', this.state.items.length)
        for (let i = 0; i < this.props.step; i++) {
            this.state.items.push(randomId())
        }
        this.state.a += this.props.step
        // this.$isDirty = true
        this.$update()
    },
    remove() {
        // for (let i = 0; i < this.state.a; i++) {
        for (let i = 0; i < this.props.step; i++) {
            this.state.items.pop()
        }
        // console.log(this.state)
        this.state.a -= this.props.step
        this.$update()
        // }
    },
    upd() {
        // if (this.shouldUpdate(this.props))
        this.$update()
    }
})