<?php
$settings = $this->get_settings_for_display();

extract( wp_parse_args( $settings, [
    'text' => '',
    'icon' => [],
    'image_icon' => [],
    'size_type' => 'flexible',
    
    'action' => 'link',
    'link' => [],
    
    // popup
    'popup_id' => 0,
    'popup_position' => 'center',
    
]) );

$outer_cl = [ 'el-button' ];
$cl = [ 'el-btn' ];

/* size type
--------------------------- */
if ( 'fixed' != $size_type ) {
    $size_type = 'flexible';
}
$cl[] = 'btn-' . $size_type;

/* icon
--------------------------- */
$i = '';
if ( isset( $image_icon['id'] ) && $image_icon['id'] ) {
    $img = wp_get_attachment_image( $image_icon['id'], 'full', false, [ 'class' => 'image-icon' ] );
    if ( $img ) {
        $i = $img;
    }
}
if ( ! $i ) {
    $icon = (array) $icon;
    $icon_class = isset( $icon[ 'value' ] ) ? $icon[ 'value' ] : '';
    if ( $icon_class ) {
        $i = '<i class="' . esc_attr( $icon_class ). '"></i>';
    }
}

/* link
--------------------------- */
if ( ! in_array( $action, [ 'link', 'scroll', 'popup' ] ) ) {
    $action = 'link';
}

if ( 'link' == $action ) {
    if ( ! empty( $settings[ 'link' ][ 'url' ] ) ) {
        $this->add_link_attributes( 'button', $settings['link'] );
        $cl[] = 'btn-link';
    }
   
/* popup goes here, we'll need to render the lightbox
--------------------------- */
} elseif ( 'popup' == $action ) {
    
    $cl[] = 'btn-popup';
    
    /* content 
    ------------------ */
    $popup_cl = [ 'el-popup' ];
    $popup_id = absint( $popup_id );
    if ( ! $popup_id ) {
        $popup_content = '<p class="error">Please select the popup block</p>';
    } else {
        
        ob_start();
        fox_block( $popup_id );
        $popup_content = ob_get_clean();
    }
    
    /* position
    ------------------ */
    if ( ! in_array( $popup_position, [ 'left', 'right', 'center', 'fullscreen' ] ) ) {
        $popup_position = 'center';
    }
    $popup_cl[] = 'popup-'. $popup_position;
    
    if ( 'left' == $popup_position || 'right' == $popup_position ) {
        $popup_cl[] = 'popup-sidebar';
        $popup_cl[] = 'popup-has-size';
    }
    
    /* final
    ------------------ */
    $popup_attr_id = uniqid( 'popup-' );
    $this->add_render_attribute( 'button', 'data-popup', '#' . $popup_attr_id );
    $popup_cl = join( ' ', $popup_cl );
    ?>

<div class="<?php echo esc_attr( $popup_cl ); ?>" id="<?php echo esc_attr( $popup_attr_id ); ?>">

    <div class="popup-inner">
        
        <div class="popup-content">
        
            <?php echo $popup_content; ?>
            
        </div>
        
    </div>
    
    <span class="popup-close">Close</span>
    
</div><!-- .el-popup -->
<div class="el-popup-overlay"></div>
    
    <?php
}

/* final
--------------------------- */
$outer_cl = join( ' ', $outer_cl );

foreach ( $cl as $cl_item ) {
    $this->add_render_attribute( 'button', 'class', $cl_item );
}
?>

<div class="<?php echo esc_attr( $outer_cl ); ?>">
    
    <a <?php $this->print_render_attribute_string( 'button' ); ?>>
        
        <?php if ( 'fixed' == $size_type ) echo '<span class="btn-fixed-inner">'; ?>
        
        <?php if ( $text ) { ?>
        <span class="btn-text"><?php echo $text; ?></span>
        <?php } ?>
        
        <?php if ( $i ) { ?>
        <span class="btn-icon"><?php echo $i; ?></span>
        <?php } ?>
        
        <?php if ( 'fixed' == $size_type ) echo '</span>'; ?>
        
    </a>
    
</div>