import {Exir} from "../../../ui"
import {info} from "../../../core/logging"
import TodoItem from "./TodoItem"
import httpclient from "../httpclient";
import {randomId} from "../../../ui/utils";

export default Exir.createComponent({
    name: 'TodoList',
    state: {
        text: "ABC",
        items: []
    },
    beforeCreate() {
        // info('Created TodoList', this.$instanceId)
        this.$store.subscribe(this.onStoreUpdate);
        // this.setState(s=>{
            this.state.items = this.$store.getState().items
        // });
    },
    // async Updated() {
    //     // cancel currently pending requests
    //     // httpclient.cancel("todolist")
    //     // // send request
    //     // let response = await httpclient.get('get', {
    //     //     params: { name: 'exir' },
    //     //     cancelToken: "todolist"
    //     // }).then((ajax) => ajax.rs).catch(()=>null)
    //     // console.log(response)
    //
    // },
    onStoreUpdate(storeState) {
        // console.warn(storeState.items)
        // console.log(this.$ref('item0'))
        // console.log(this.$ref('item2'))
        this.setState(state => {
            state.items = [...storeState.items]
        })
    },
    removeItem(key) {
        console.log(key)
        this.setState((state)=>{
            state.items.splice(state.items.findIndex(si=>si.key === key), 1)
        })
        // this.
    },
    render() {
        return (
            <>
                <div className="flex my-4">
                    <input value={this.state.text} type="text"
                           onChange={(_, el) => this.state.text = el.value}
                           className="shadow appearance-none border rounded w-full py-2 px-3 mr-4 text-grey-darker"
                           placeholder="Add Todo"/>
                    <button
                        className="flex-no-shrink p-2 border-2 rounded text-teal border-teal hover:bg-teal"

                        onClick={() => {
                            let len = this.$store.getState().items.length;
                            for (let i = 0; i < 500; i++) {
                                this.$store.dispatch({name: 'additem', payload: {key: len+i, text:this.state.text+(len+i)}})
                            }
                        }}>
                        Add
                    </button>
                    <hr/>
                    <div>{this.state.items.length}</div>
                </div>
                <div id={'list'}>
                    {this.state.items.map((it) => <TodoItem remove={this.removeItem.bind(this)} key={it.key} text={it.text}/>)}
                </div>
                <hr/>
            </>
        )
    },
    // shouldUpdate() {
    //     return true;
    // }
})