/**
 *  I check if the necessary params are present in the config struct passed to 
 *  js ui uitil functions
 *
 *  @param {object} skv_obj config object
 *  @param {array} arr_required_props array of properties required to be present in skv_obj
 *  @return {boolean} are required props present in skv_obj?
 */

function hasRequiredProps( skv_obj, arr_required_props ){
    var has_required_keys = true;
    arr_required_props.forEach( function( key ){
        if( !skv_obj.hasOwnProperty( key ) ){
            has_required_keys = false;
            return
        }
    });
    return has_required_keys;
}

/**
 *  Build html strings of attributes for elements
 *
 *  @param {object} skv_attributes object of key - (simple or complex) value pairs
 *  @return {string} html string of attributes 
 */

function printAttributes( skv_attributes ){

    var str_html = '';

    for( var key in skv_attributes ){
        var value = skv_attributes[ key ];
        str_html += ' ' + key + '=' + JSON.stringify( skv_attributes[ key ] ); 
    }

    return str_html;
}

/**
 *  I build markup for SVGs
 *
 *  @param {string} str_icon_class name of the icon
 *  @param {string} str_wrapper_class class of div to wrap SVG in [optional]
 *  @return {string} html markup
 */


function printSVG( str_icon_class, str_wrapper_classes ){

    var str_use = str_icon_class.replace( '-', '--' );

    var str_html = 
          '<svg class="icon-cd-' + str_icon_class + '">'
        +     '<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/css/assets/icons/dist/icons.svg#icon-cd_' + str_use + '"></use>'
        + '</svg>';

    if( typeof str_wrapper_classes !== 'undefined' ){
        return '<div class="' + str_wrapper_classes + '">' + str_html + '</div>';
    }
    
    return str_html;
}


/**
 *  I build button markup
 *
 *  @param {object} skv_config config object which must contain required props and may dontain others
 *  @return {string} html markup
 */


function printButtonMarkup( skv_cfg ){

    var has_required_props = hasRequiredProps( skv_cfg, [ 'str_content' ] );
    if( !has_required_props ){
        throw "Not all required props were passed to printButtonMarkup fn "
            + "in the skv_cfg param";
    }

    var str_html = '<button ';
    str_html += printAttributes( skv_cfg.skv_attributes || {} );
    str_html += '>'
        + '<span class="btn__content">';

    str_html += ( skv_cfg.str_icon && skv_cfg.str_icon.length 
                    ? printSVG( skv_cfg.str_icon ) 
                    : '' );

    str_html += skv_cfg.str_content
        +       '</span>'
        +   '</button>';

    return str_html;
}

/**
 *  I build select dropdown markup with a CTA button
 *
 *  @param {object} skv_config config object which must contain required props and may dontain others
 *  @return {string} html markup
 */

function printSelectMarkup( skv_cfg ){

    var arr_required_props = [ 'arr_options', 'skv_attributes', 'str_label' ];
    var has_required_props = hasRequiredProps( skv_cfg, arr_required_props );

    if( !has_required_props ){
        throw "Not all required props were passed to printSelectMarkup fn "
            + "in the skv_cfg param";
    }

    var str_html = '';
    skv_cfg.skv_attributes.id = skv_cfg.skv_attributes.id.replace( /\s/, '' );
    var arr_reqd_btn_props = [ 'str_content', 'str_icon', 'skv_attributes' ];
    var skv_local_btn_cfg = {
        'str_content' : 'Go',
        'str_icon'    : '',
        'skv_attributes' : {
            'class' : 'btn--primary'
        }
    }

    str_html += ( skv_cfg.str_label && skv_cfg.str_label.length
            ? '<label for="' + skv_cfg.str_id + '">' + skv_cfg.str_label + '</label>'
            : '' )
        + '<div class="select">'
        + '<select ' //'id="' + skv_cfg.str_id + '" name="' + skv_cfg.str_id + '">';
        + printAttributes( skv_cfg.skv_attributes )
        + '>';

    // loop over data and add options
    // TODO: potentially handle structs with separate display / value
    skv_cfg.arr_options.forEach( function( str_option ){

        var str_selected_attr = '';

        // check to see if there is a selected option value passed in and whether
        // it matches the option looped 
        if(
            skv_cfg.selected_option_value &&
            skv_cfg.selected_option_value == str_option
        ) {
            str_selected_attr = ' selected';
        }

        str_html += '<option value="' + str_option + '"' + str_selected_attr + '>' + str_option + '</option>';
    });    
    
    str_html += '</select>'
        + printSVG( 'collapse-down', 'select__arrow' )
        + '</div>';

    if( hasRequiredProps( skv_cfg.skv_btn, arr_reqd_btn_props ) ){
        skv_local_btn_cfg = skv_cfg.skv_btn;
    }

    str_html += printButtonMarkup( skv_local_btn_cfg );
    str_html += '</div>'

    str_html = ( skv_cfg.str_wrap_classes && skv_cfg.str_wrap_classes.length 
            ? '<div class="' + skv_cfg.str_wrap_classes + '">' + str_html + '</div>'
            : str_html );

    return str_html;

}
/**
 * build markup for a seed alert
 * @param {string} type of alert (error, warning, info)
 * @param {string} heading title of alert
 * @param {string} content of alert
 */

function buildAlertMartup(type, heading, content) {
    return '<div class="alert alert--' + type + '">' +
        '<p class="alert__heading" > ' + heading + '</p >' +
        '<p class="alert__content">' + content + '</p>' +
        '</div > ';
}