// Mithril port of snabbdoms animated list example: https://github.com/paldepind/snabbdom/tree/master/examples/reorder-animation

var nextKey = 11;
var margin = 8;
var sortBy = 'rank';
var totalHeight = 0;
var originalData = [ {
    rank: 1,
    title: '2130',
    desc: 'Η σκούνα',
    elmHeight: 0
}, { 
    rank: 3,
    title: '1001',
    desc: 'Γκαμηλιέρικος',
    elmHeight: 0
}, {
    rank: 4,
    title: '1235',
    desc: 'Η φραγκοσυριανή',
    elmHeight: 0
}, {
    rank: 5,
    title: '1044',
    desc: 'Δέκα παλικάρια',
    elmHeight: 0
}, {
    rank: 6,
    title: '1288',
    desc: 'Παραμύθι με λυπημένο τέλος',
    elmHeight: 0
}, {
    rank: 7,
    title: '1322',
    desc: 'Χορός',
    elmHeight: 0
}, {
    rank: 8,
    title: '18',
    desc: 'Παραπονεμένα λόγια',
    elmHeight: 0
}, {
    rank: 9,
    title: '19',
    desc: 'Σεβάχ',
    elmHeight: 0
}, {
    rank: 10,
    title: '2121',
    desc: 'Μη μου χαλάσεις τ όνειρο',
    elmHeight: 0
} ];
var data = [].slice.call(originalData);

function changeSort( prop ) {
    return function () {
        sortBy = prop;
        data.sort( function ( a, b ) {
            if ( a[ prop ] > b[ prop ] ) {
                return 1;
            }
            if ( a[ prop ] < b[ prop ] ) {
                return -1;
            }
            return 0;
        } );
    };
}

function add() {
    var n = originalData[ Math.floor( Math.random() * 10 ) ];
    data = [ {
        rank: nextKey++,
        title: n.title,
        desc: n.desc,
        elmHeight: 0
    } ].concat( data );
}

function remove( movie ) {
    data = data.filter( function ( m ) {
        return m !== movie;
    } );
}

function delayed_style( delayed ) {
    return function ( el, init, ctx ) {
        var style = typeof delayed === 'function' ? delayed.apply( this, arguments ) : delayed || {};
        for ( var name in style ) {
            el.style[ name ] = style[ name ];
        }
    };
}

function remove_style( options ) {
    options = options || {};
    return function ( ev ) {
        if ( !options.style ) return;
        el = options.accessor ? options.accessor( ev ) : ev.target;
        if ( !el.addEventListener ) return;
        m.startComputation();
        var applied = [];
        var style = typeof options.style == 'function' ? options.style() : options.style || {};
        for ( var name in style ) {
            applied.push( name );
            el.style[ name ] = style[ name ];
        }
        var compStyle = window.getComputedStyle( el );
        var props = compStyle[ 'transition-property' ].split( ', ' );
        var amount = 0;
        for ( var i = 0; i < props.length; ++i ) {
            if ( ~applied.indexOf( props[ i ] ) ) ++amount;
        }
        el.addEventListener( 'transitionend', function ( ev ) {
            if ( ev.target === el ) --amount;
            if ( amount === 0 ) {
                if ( options.rm ) options.rm();
                m.endComputation();
            }
        } );
    };
}

function calculateOffset( el, movie, idx ) {
    movie.elmHeight = el.offsetHeight;
    var lastOffset = 0,
        lastHeight = 0;
    if ( idx > 0 ) {
        var prev = data[ idx - 1 ];
        lastOffset = +prev.offset;
        lastHeight = prev.elmHeight;
    }
    movie.offset = lastOffset + lastHeight + margin;
}

function movieView( movie, idx ) {
    if ( movie.visible === false ) return null;
    return m( '.row', {
        key: movie.rank,
        config: delayed_style( function ( el ) {
            calculateOffset( el, movie, idx );
            return {
                transform: 'translateY(' + movie.offset + 'px)',
                opacity: '1'
            };
        } ),
        style: {
            opacity: '0',
            transform: 'translate(-200px)'
        }
    }, [
        m( 'div', {
            style: {
                fontWeight: 'bold'
            }
        }, movie.rank ),
        m( 'div', [m("a", {"href":"https://mastering.gr/trikkey/trikhordo.php?"+movie.title+".trik"}, 
  movie.title
)]

, ),
        m( 'div', movie.desc ),
        m( '.btn.rm-btn', {
            onclick: remove_style( {
                style: function () {
                    return {
                        transform: 'translateY(' + movie.offset + 'px) translateX(200px)',
                        opacity: '0'
                    };
                },
                accessor: function ( ev ) {
                    return ev.target.parentNode;
                },
                rm: function () {
                    remove( movie );
                }
            } )
        }, 'x' )
    ] );
}

var app = {
    view: function () {
        return m( 'div', [
            m( 'h1', 'Top 10 trikhordo lessons!' ),
            m( 'div', [
                m( 'a.btn.add', {
                    onclick: add
                }, 'Add' ),
                'Sort by: ',
                m( 'span.btn-group', [
                    m( 'a.btn.rank' + ( sortBy === 'rank' ? '.active' : '' ), {
                        onclick: changeSort( 'rank' )
                    }, 'Rank' ),
                    m( 'a.btn.title' + ( sortBy === 'title' ? '.active' : '' ), {
                        onclick: changeSort( 'title' )
                    }, 'Title' ),
                    m( 'a.btn.desc' + ( sortBy === 'desc' ? '.active' : '' ), {
                        onclick: changeSort( 'desc' )
                    }, 'Description' )
                ] )
            ] ),
            m( '.list', {
                style: 'height: ' + ( data[ data.length - 1 ].offset + data[ data.length - 1 ].elmHeight ) + 'px'
            }, data.map( movieView ) )
        ] );
    }
};


m.mount( document.getElementById( 'container' ), app );