<?php

/**
 * Code Manager tab mode
 *
 * @package Code_Manager
 */
namespace Code_Manager;

/**
 * Class Code_Manager_Tabs
 *
 * Builds the Code Manager tab mode IDE
 *
 * @author  Peter Schulz
 * @since   1.0.0
 */
class Code_Manager_Tabs {
    /**
     * Nonce using user login
     *
     * @var string
     */
    protected $wpnonce;

    /**
     * Nonce used to get code from user login
     *
     * @var string
     */
    protected $wpnonce_get_code;

    /**
     * Code_Manager_Tabs constructor
     *
     * Creates a number of wpnonces needed to authorize ajax calls
     *
     * @since   1.0.0
     */
    public function __construct() {
        $this->wpnonce = wp_create_nonce( 'code-manager-' . Code_manager::get_current_user_login() );
        $this->wpnonce_get_code = wp_create_nonce( 'code-manager-get-code' . Code_manager::get_current_user_login() );
    }

    /**
     * Shows the tab mode IDE
     *
     * JavaScript depending on server variables not available in the browser are added here. Generic JavaScript
     * code is added as a script file.
     *
     * @since   1.0.0
     */
    public function show() {
        $cm_message = Code_Manager::get_cm_message();
        ?>
			<script type="text/javascript">
				var wpnonce = '<?php 
        echo esc_attr( $this->wpnonce );
        ?>';
				var wpnonce_get_code = '<?php 
        echo esc_attr( $this->wpnonce_get_code );
        ?>';
				var code_manager_code_groups = [];
				<?php 
        $code_manager_tab = new Code_Manager_Tabs();
        $code_types = $code_manager_tab->get_code_types();
        foreach ( $code_types as $code_type_group => $value ) {
            echo 'code_manager_code_group = [];';
            foreach ( $value as $code_type => $code_type_label ) {
                echo "code_manager_code_group['" . esc_attr( $code_type ) . "'] = '" . esc_attr( $code_type_label ) . "';";
            }
            echo "code_manager_code_groups['" . esc_attr( $code_type_group ) . "'] = code_manager_code_group;";
        }
        ?>
				function filter_code_list() {
					jQuery("#code_manager_code_list > option").each(function() {
						showCode = true;
						if (jQuery("#code_manager_filter_code_type").val()!=="") {
							if (jQuery("#code_manager_filter_code_type").val()!==jQuery(this).data("type")) {
								jQuery(this).hide();
								showCode = false;
							}
						}
						if (showCode && jQuery("#code_manager_filter_code_name").val()!=="") {
							if (!jQuery(this).data("name").toLowerCase().includes(jQuery("#code_manager_filter_code_name").val().toLowerCase())) {
								jQuery(this).hide();
								showCode = false;
							}
						}
						if (showCode) {
							jQuery(this).show();
						}
					});
				}
				<?php 
        if ( 'hide' !== $cm_message ) {
            ?>
						jQuery(function() {
							cm_warning();
						});
						<?php 
        }
        ?>
			</script>
			<div class="wrap">
				<table cellspacing="0" cellpadding="0" border="0" width="100%">
					<tr>
						<td>
							<h1 class="wp-heading-inline">
								<?php 
        echo 'Code Manager';
        echo ' - tab mode';
        ?>
							</h1>
						</td>
						<td style="text-align:right;padding-right:10px;padding-top:4px">
							<a id="disable_preview"
								href="javascript:void(0)"
								class="fas fa-eye-slash cm_menu_title"
								style="line-height: 30px; text-decoration: none"
								title="Turn of preview mode for all code IDs"
							></a>
						</td>
					</tr>
				</table>
				<style>
					#code_manager_code_list {
						background-image: none;
						min-width: 100%;
						width: 100%;
						max-width: 100%;
						font-family: monospace;
						font-size: 90%;
					}
					#code_manager_code_list option {
						width: 100%;
					}
				</style>
				<div id="code_manager_open_frame" style="display: none; background-color: transparent;">
					<p style="margin-top:0">Hold ctrl key to select multiple code blocks, double click to select single code block</p>
					<div style="margin-right:-2px">
						<span>
							<input type="text" placeholder="Filter code name" id="code_manager_filter_code_name" onkeyup="filter_code_list()" autocomplete="off"/>
						</span>
						<span style="float: right">
							<select id="code_manager_filter_code_type" onchange="filter_code_list()"></select>
						</span>
					</div>
					<div>
						<select id="code_manager_code_list" size="14" multiple="multiple">
							<option>Loading data...</option>
						</select>
					</div>
				</div>
				<div id="code_manager_taskbar_tabmode" class="nav-tab-wrapper"></div>
				<div id="code_manager_workspace_tabmode"></div>
				<div class="cm_tab_mode_intro">
					<p>
						<i class="fas fa-hand-point-right"></i>
						Press the "add new code" icon in the toolbar to start writing new code
					</p>
					<p>
						<i class="fas fa-hand-point-right"></i>
						Press the "open existing code" icon in the toolbar to change existing code
					</p>
					<div class="cm_tab_mode_intro_close">
						<a href="#" onclick="javascript:jQuery('.cm_tab_mode_intro').remove()">
							<i class="fas fa-times-circle"></i>
						</a>
					</div>
				</div>
			</div>
			<?php 
    }

    /**
     * Get code types
     *
     * Code types are organized in group to allow grouping in list boxes.
     *
     * @since   1.0.0
     *
     * @return string[][]
     */
    public function get_code_types() {
        $code_types = array(
            'Shortcodes' => array(
                'php shortcode'        => 'PHP Shortcode',
                'javascript shortcode' => 'JavaScript Shortcode',
                'css shortcode'        => 'CSS Shortcode',
                'html shortcode'       => 'HTML Shortcode',
            ),
        );
        return $code_types;
    }

}
