<?php

/**
 * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
 */

// Get default breakpoints from options
$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);

// Desktop breakpoint
$desktop_breakpoint = isset($attributes['customBreakpointDesktop']) && $attributes['customBreakpointDesktop']
  ? $attributes['breakpointValueDesktop']
  : $default_desktop;

// Tablet breakpoint
if (isset($attributes['customBreakpointTablet']) && $attributes['customBreakpointTablet']) {
  $tablet_min = $attributes['breakpointValueTabletMin'];
  $tablet_max = $attributes['breakpointValueTabletMax'];
  $tablet_class = "tablet-{$tablet_min}-{$tablet_max}";
} else {
  $tablet_class = "tablet-{$default_tablet_min}-{$default_tablet_max}";
}

// Mobile breakpoint
$mobile_breakpoint = isset($attributes['customBreakpointMobile']) && $attributes['customBreakpointMobile']
  ? $attributes['breakpointValueMobile']
  : $default_mobile;

$wrapper_attributes = get_block_wrapper_attributes(['class' => 'wp-block-orphic-ui-spacer-responsive']);
?>
<div <?php echo $wrapper_attributes; ?>>
  <div
    class="orphic-ui-spacer-responsive-desktop desktop-<?php echo $desktop_breakpoint; ?>"
    style="height: <?php echo $attributes['desktop']; ?>px;"></div>
  <div
    class="orphic-ui-spacer-responsive-tablet <?php echo $tablet_class; ?>"
    style="height: <?php echo $attributes['tablet']; ?>px;"></div>
  <div
    class="orphic-ui-spacer-responsive-mobile mobile-<?php echo $mobile_breakpoint; ?>"
    style="height: <?php echo $attributes['mobile']; ?>px;"></div>
</div>