<?php

/**
 * Search Bar Block Template.
 */

$search_bar_id = $attributes['searchBarId'] ?? 0;

// Si aucune search bar n'est sélectionnée, on affiche un message par défaut
if ($search_bar_id === 0) {
  return;
}

// Récupère la configuration de la search bar
$config = get_post_meta($search_bar_id, '_orphic_search_bar_config', true);
if (empty($config)) {
  return;
}

// Décode la configuration JSON
$config = json_decode($config, true);
if (empty($config)) {
  return;
}

// Récupère les différentes configurations
$style_config = $config['style_config'] ?? array();
$search_config = $config['search_config'] ?? array();
$display_config = $config['display_config'] ?? array();

// Prépare les classes CSS
$wrapper_attributes = get_block_wrapper_attributes([
  'class' => 'wp-block-orphic-ui-search-bar'
]);

// Prépare les données de recherche pour le frontend
$search_data = array(
  'post_types' => $search_config['post_types'] ?? array('post', 'page'),
  'taxonomies' => $search_config['taxonomies'] ?? array(),
  'weights' => $search_config['weights'] ?? array(
    'title' => 10,
    'content' => 5,
    'excerpt' => 7
  ),
);

// Configuration de l'URL personnalisée
$url_config = array(
  'is_custom_url' => $search_config['is_url_custom_search'] ?? false,
  'custom_url' => $search_config['url_custom_search'] ?? '',
  'home_url' => $search_config['home_url'] ?? '',
  'url_custom_params' => $search_config['url_custom_params'] ?? '',
);

// Définit les variables CSS pour les styles
$css_variables = array(
  '--search-input-bg' => $style_config['input_bg'] ?? '#ffffff',
  '--search-input-text-color' => $style_config['input_text_color'] ?? '#172b4d',
  '--search-input-placeholder-color' => $style_config['input_placeholder_color'] ?? 'rgba(0, 0, 0, 0.4)',
  '--search-input-border-color' => $style_config['input_border_color'] ?? '#ebecf0',
  '--search-input-border-width' => $style_config['input_border_width'] ?? '1px',
  '--search-input-border-style' => $style_config['input_border_style'] ?? 'solid',
  '--search-input-border-radius' => $style_config['input_border_radius'] ?? '6px',
  '--search-input-padding' => $style_config['input_padding'] ?? '12px',
  '--search-input-box-shadow' => $style_config['input_box_shadow'] ?? '0 2px 4px rgba(0, 0, 0, 0.05)',
  '--search-button-bg' => $style_config['button_color'] ?? '#0065ff',
  '--search-button-text-color' => $style_config['button_text_color'] ?? '#ffffff',
  '--search-button-hover-bg' => $style_config['button_hover_color'] ?? '#0052cc',
  '--search-button-border-radius-top-left' => $style_config['button_border_radius_top_left'] ?? '6px',
  '--search-button-border-radius-top-right' => $style_config['button_border_radius_top_right'] ?? '6px',
  '--search-button-border-radius-bottom-left' => $style_config['button_border_radius_bottom_left'] ?? '6px',
  '--search-button-border-radius-bottom-right' => $style_config['button_border_radius_bottom_right'] ?? '6px',
  '--search-button-padding-top' => $style_config['button_padding_top'] ?? '12px',
  '--search-button-padding-right' => $style_config['button_padding_right'] ?? '12px',
  '--search-button-padding-bottom' => $style_config['button_padding_bottom'] ?? '12px',
  '--search-button-padding-left' => $style_config['button_padding_left'] ?? '12px',
  '--search-dropdown-bg' => $style_config['dropdown_bg_color'] ?? '#ffffff',
  '--search-dropdown-padding' => $style_config['dropdown_padding'] ?? '8px',
  '--search-dropdown-border-width' => $style_config['dropdown_border_width'] ?? '1px',
  '--search-dropdown-border-style' => $style_config['dropdown_border_style'] ?? 'solid',
  '--search-dropdown-border-color' => $style_config['dropdown_border_color'] ?? '#ebecf0',
  '--search-dropdown-border-radius' => $style_config['dropdown_border_radius'] ?? '6px',
  '--search-dropdown-width' => $style_config['dropdown_width'] === 'full' ? '100%' : 'calc(100% - 150px)',
  '--search-dropdown-item-padding' => $style_config['dropdown_item_padding'] ?? '10px 15px',
  '--search-dropdown-item-text-color' => $style_config['dropdown_item_text_color'] ?? '#172b4d',
  '--search-dropdown-item-hover-bg' => $style_config['dropdown_item_hover_bg_color'] ?? '#f4f5f7',
  '--search-dropdown-item-hover-text-color' => $style_config['dropdown_item_hover_text_color'] ?? '#0052cc'
);

// Convertit les variables CSS en style inline
$style_string = '';
foreach ($css_variables as $var => $value) {
  $style_string .= $var . ':' . $value . ';';
}

$button_position = $style_config['button_position'] ?? 'integrated';
$button_display_type = $style_config['button_display_type'] ?? 'text';
$button_text = $style_config['button_text'] ?? 'Search';
$button_icon = isset($style_config['button_icon']) ? html_entity_decode($style_config['button_icon']) : '🔍';

// Prépare l'URL de l'endpoint REST pour la recherche
$rest_url = rest_url('orphic-ui/v1/search');
$nonce = wp_create_nonce('wp_rest');

?>

<div <?php echo $wrapper_attributes; ?>
  data-search-config='<?php echo esc_attr(wp_json_encode($search_data)); ?>'
  data-url-config='<?php echo esc_attr(wp_json_encode($url_config)); ?>'
  data-rest-url="<?php echo esc_attr($rest_url); ?>"
  data-nonce="<?php echo esc_attr($nonce); ?>"
  data-no-results-message="<?php echo esc_attr($style_config['input_no_results_message'] ?? 'No results found'); ?>"
  style="<?php echo esc_attr($style_string); ?>">
  <div class="search-container">
    <div class="search-preview">
      <div class="search-preview-input-wrapper">
        <input
          type="search"
          placeholder="<?php echo esc_attr($style_config['input_text_place_holder'] ?? 'Search term'); ?>"
          class="search-input"
          autocomplete="off" />
        <?php if ($button_position === 'integrated'): ?>
          <button class="search-button" data-display="<?php echo esc_attr($button_display_type); ?>">
            <?php if ($button_display_type === 'text'): ?>
              <?php echo esc_html($button_text); ?>
            <?php else: ?>
              <span><?php echo $button_icon; ?></span>
            <?php endif; ?>
          </button>
        <?php endif; ?>
      </div>
      <?php if ($button_position === 'right'): ?>
        <button class="search-button search-preview-external-button" data-display="<?php echo esc_attr($button_display_type); ?>">
          <?php if ($button_display_type === 'text'): ?>
            <?php echo esc_html($button_text); ?>
          <?php else: ?>
            <span><?php echo $button_icon; ?></span>
          <?php endif; ?>
        </button>
      <?php endif; ?>
      <div class="search-results-dropdown" style="display: none;">

      </div>
    </div>
  </div>
</div>