import { component, view, on, action, style } from 'app-decorators';

@style(`
    /** These atrule (@) events will be loaded asynchronous (non blocking) **/
    
    /** will be loaded on load event **/
    @on load {
        @fetch path/to/on/load.css;
    }
    
    /** will be loaded when clicked .up class **/
    @on click .up {
        @fetch path/to/on/click/up.css;
    }

    /** will be loaded when url changed **/
    @action hello/my/friend.html {
        @fetch path/to/on/some/route/action.css;
    }

    /** critical path (inline css will appear immediately) **/
    my-box div {
        width: 100px;
        height: 100px;
    }
`)
@view(`
    <h3>{{head}}</h3>
    <div class="count">{{count}}</div>
    <div>
        <span class="up"> + </span>
        <span class="down"> - </span>
    </div>
    <div>
        <a href="?state=reset">clear count</a>
        <a href="?state=destroy">destroy</a>
        <a href="hello/my/friend.html">destroy</a>
    </div>
`)
@component({
    name: 'my-box'
})
class Item {

    @view.bind count = 0;
    
    @on('click .up') onClickUp() {
        ++this.count
    }
    
    @on('click .down') onClickUp() {
        --this.count
    }
    
    @action('?state={{type}}') onUrlStateChanged({ params }){
        
        let { type } = params;
        if(type === 'reset'){
            this.count = 0;   
        }
        // remove it self
        else if(type === 'destroy') {
            this.parentNode.removeChild(this);
        }
    }
}

export {
    Item
}

let item = Item.create({
    head: 'Some description'
});

document.body.appendChild(item);