<?php

/**
 * Breakpoint Block Template.
 */

$default_mobile = get_option(ConstBlockOrphicOptionName::BREAKPOINT_MOBILE, 768);
$default_tablet_min = get_option(ConstBlockOrphicOptionName::BREAKPOINT_TABLET_MIN, 768);
$default_tablet_max = get_option(ConstBlockOrphicOptionName::BREAKPOINT_TABLET_MAX, 950);
$default_desktop = get_option(ConstBlockOrphicOptionName::BREAKPOINT_DESKTOP, 950);

$display_mode = $attributes['displayMode'] ?? 'desktop';
$is_custom = $attributes['customBreakpoint'] ?? false;
$breakpoint_value = $attributes['breakpointValue'] ?? $default_desktop;
$min_breakpoint = $attributes['minBreakpoint'] ?? $default_tablet_min;
$max_breakpoint = $attributes['maxBreakpoint'] ?? $default_tablet_max;

// Déterminer la classe CSS à utiliser
$class_name = 'wp-block-orphic-ui-breakpoint';

if ($display_mode === 'desktop') {
  if ($is_custom) {
    $class_name .= ' orphic-ui-breakpoint-desktop-' . $breakpoint_value;
  } else {
    $class_name .= ' orphic-ui-breakpoint-desktop-' . $default_desktop; // Valeur par défaut pour desktop
  }
} else if ($display_mode === 'mobile') {
  // Pour mobile, utilisez la valeur par défaut
  if ($is_custom) {
    $class_name .= ' orphic-ui-breakpoint-mobile-' . $breakpoint_value;
  } else {
    $class_name .= ' orphic-ui-breakpoint-mobile-' . $default_mobile; // Valeur par défaut pour mobile
  }
} else if ($display_mode === 'tablet') {
  if ($is_custom) {
    $class_name .= ' orphic-ui-breakpoint-tablet-' . $min_breakpoint . '-' . $max_breakpoint;
  } else {
    $class_name .= ' orphic-ui-breakpoint-tablet-' . $default_tablet_min . '-' . $default_tablet_max; // Valeur par défaut
  }
}

$wrapper_attributes = get_block_wrapper_attributes([
  'class' => $class_name,
]);

?>

<div <?php echo $wrapper_attributes; ?>>
  <div class="breakpoint-content">
    <?php echo $content; ?>
  </div>
</div>