<?php

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

  if (isset($user_data['paths']) && sizeof($user_data['paths'])) {
    $use_link = isset($user_data['isLinkable']) ? $user_data['isLinkable'] : false;
    $gradientClass = isset($user_data['useGradient']) && $user_data['useGradient'] ? 'has-gradient' : '';
    $strokeCap = isset($user_data['strokeCap']) && $user_data['strokeCap'] === true ? 'stroke-linecap="round"' : '';
    $elMarkup .= '<div class="'.$b.'__element '.$b.'__element--'.$element["id"].' '.$b.'__element--vector '.$gradientClass.' '.$custom_classes.'" style="'.$elStyles.'">';
    $elMarkup .= '<svg
      width="'.$user_data['svgSizes']['w'].'"
      height="'.$user_data['svgSizes']['h'].'"
      viewBox="0 0 '.$user_data['svgSizes']['w'].' '.$user_data['svgSizes']['h'].'"
      fill="none"
      '.$strokeCap.'
      style="'.$elStyles.'">';

    foreach ($user_data['paths'] as &$path) {
      if(isset($path['data']) && strlen($path['data'])) {
        $borderWidth = isset($user_data['borderWidth']) && $user_data['useBorder'] ? $user_data['borderWidth'] : '0px';
        $borderColor = $user_data['borderColor'];
        $stroke = $user_data['useBorder'] ? 'stroke="'.parseColor($user_data['borderColor'], $colors).'" ' : ' ';
        $fill = isset($user_data['backgroundColor']) && $user_data['useBg'] ? 'fill="'.parseColor($user_data['backgroundColor'], $colors).'" ' : ' ';
        $windingRule = isset($path['windingRule']) ? 'fill-rule="'.strtolower($path['windingRule']).'" ' : ' ';
        $elMarkup .= '<path
          class=""
          '.$stroke.'
          '.$fill.'
          '.$windingRule.'
          d="'.$path['data'].'"
          stroke-width="'.$borderWidth.'"></path>';
      }
    }

    $elMarkup .= '</svg>';

    if ($use_link) {
      $target = isset($user_data['targetBlank']) && $user_data['targetBlank'] ? "_blank" : "_self";
      $elMarkup .= '
        <a
          class="'.$b.'__element--image-link"
          href="'.$user_data['blockLink'].'"
          target="'.$target.'"
        ></a>
      ';
    }

    $elMarkup .= '</div>';
  }
  return $elMarkup;
}
