/**
 * File Path: assets/js/wizard/wizard-rail.js
 *
 * MBS Setup Wizard -- Rail (step navigation sidebar) component.
 * Attaches Rail to window.MBSWizardParts.
 *
 * @package MyBookShowroom
 * @since   1.2.0
 */

(function( wp ) {
    'use strict';
    var __ = wp.i18n.__;

    if ( ! wp || ! wp.element ) {
        return;
    }

    var h = wp.element.createElement;
    var P = window.MBSWizardParts = window.MBSWizardParts || {};

    var STEP_META = [
        { title: __( 'Welcome', 'my-book-showroom' ),    sub: __( 'A 2-minute tour', 'my-book-showroom' ) },
        { title: __( 'First book', 'my-book-showroom' ), sub: __( 'Title, author, cover', 'my-book-showroom' ) },
        { title: __( 'Layout', 'my-book-showroom' ),     sub: __( 'How it appears', 'my-book-showroom' ) },
        { title: __( 'Finish', 'my-book-showroom' ),     sub: __( 'Shortcode & license', 'my-book-showroom' ) },
        { title: __( 'All set', 'my-book-showroom' ),    sub: __( "You're live", 'my-book-showroom' ) },
    ];

    function Rail( props ) {
        var step = props.step;
        return h( 'aside', { className: 'mbs-wizard-rail' },
            h( 'div', { className: 'mbs-wizard-rail__logo' },
                h( 'span', { className: 'mbs-wizard-rail__mark' }, 'MBS' ),
                h( 'div', null,
                    h( 'div', { className: 'mbs-wizard-rail__title' }, __( 'My Book Showroom', 'my-book-showroom' ) ),
                    h( 'div', { className: 'mbs-wizard-rail__sub' }, __( 'SETUP', 'my-book-showroom' ) )
                )
            ),
            h( 'ol', { className: 'mbs-wizard-rail__steps' },
                STEP_META.map( function( s, i ) {
                    var n        = i + 1;
                    var isDone   = step > n;
                    var isActive = step === n;
                    var cls = 'mbs-wizard-rail__steps-item' +
                        ( isDone   ? ' is-done'   : '' ) +
                        ( isActive ? ' is-active' : '' );
                    return h( 'li', { key: n, className: cls },
                        h( 'span', { className: 'mbs-wizard-rail__bullet' },
                            isDone ? '\u2713' : String( n )
                        ),
                        h( 'div', null,
                            h( 'div', { className: 'mbs-wizard-rail__step-title' }, s.title ),
                            h( 'div', { className: 'mbs-wizard-rail__step-sub' }, s.sub )
                        )
                    );
                })
            ),
            h( 'div', { className: 'mbs-wizard-rail__tagline' },
                __( 'Deluxe Manuscripts Regally Served', 'my-book-showroom' )
            )
        );
    }

    P.Rail = Rail;

})( window.wp );
