<?php

function renderPopupToggleElement($b, $element, $custom_classes, $elStyles, $colors, $viewport) {
  $data = $element['data'];
  $user_data = $data['user_data'];

  $popupID = $user_data["popupID"];
  $type = $user_data["type"];
  $icon = $user_data["icon"];
  $iconSize = $user_data["iconSize"];
  $textOpen = $user_data["textOpen"];
  $textClose = $user_data["textClose"];
  $color = $user_data["color"];
  $colorHover = $user_data["colorHover"];
  $fontData = getFontData($user_data, "textFont");

  $alignment = useVar($user_data, "alignment", "center");
  $alignMap = array(
    'left' => 'flex-start',
    'center' => 'center',
    'right' => 'flex-end'
  );
  $justifyContent = $alignMap[$alignment];

  $iconEl = '
    <div class="flex-element-type-popup-toggle__icon-wrap">
      <i class="
        flex-element-type-popup-toggle__icon
        flex-element-type-popup-toggle__icon--open
        flo-flex-icon-menu-trigger-'.$icon.'
      "></i>
      <i class="
        flex-element-type-popup-toggle__icon
        flex-element-type-popup-toggle__icon--close
        flo-flex-icon-menu-mobile-popup-close
      "></i>
    </div>
  ';
  $textEl = '
    <div
      class="
        flex-element-type-popup-toggle__text
        flex-element-type-popup-toggle__text--open
      "
      data-font="'.$fontData['dataFont'].'"
      style="'.$fontData['style'].'"
      data-toggle-popup-id="'.$popupID.'"
    >
      '.$textOpen.'
    </div>
    <div
      class="
        flex-element-type-popup-toggle__text
        flex-element-type-popup-toggle__text--close
      "
      data-font="'.$fontData['dataFont'].'"
      style="'.$fontData['style'].'"
      data-toggle-popup-id="'.$popupID.'"
    >
      '.$textClose.'
    </div>
  ';
  $trigger = $type === "icon" ? $iconEl : $textEl;

  return '
    <div class="'.$b.'__element '.$b.'__element--'.$element["id"].' '.$b.'__element--popup-toggle '.$custom_classes.'" style="'.$elStyles.'">
      <div
        class="flex-element-type-popup-toggle"
        style="
          --color: '.getStyleKitColor($color).';
          --color-hover:'.getStyleKitColor($colorHover).';
          --icon-size: '.remCalc($iconSize).';
          justify-content: '.$justifyContent.';
          text-align: '.$alignment.';
        "
        data-toggle-popup-id="'.$popupID.'"
      >
        '.$trigger.'
      </div>
    </div>
  ';
}
