<?php

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

	$titleColor = ''.getStyleKitColor($user_data["titleColor"]).'';
	$textColor = ''.getStyleKitColor($user_data["textColor"]).'';
	$separatingLinesColor = ''.getStyleKitColor($user_data["separatingLinesColor"]).'';
	$backgroundColor = ''.getStyleKitColor($user_data["backgroundColor"]).'';
	$gap = ''.$user_data['gap'] / 16 .'rem';
	$expand_icon = $user_data['expand_icon'];
	$pretitle = $user_data['pretitle'];
	$separatingLines = $user_data['separatingLines'];
	$expandIconOptions = array(
	'option_1' => "arrow-down-1",
	'option_2' => "arrow-down-2",
	'option_3' => "plus"
  );
	$isBackgroundEnabled = $user_data['background'];
	$firstItemExpanded = $user_data['firstItemExpanded'] || FALSE;
	$shouldFirstItemBeExpanded = !$isBackgroundEnabled && $firstItemExpanded;

	$titleFonts = '
  .'.$b.'__element--'.$element["id"].' .flex-element-type-accordion__item-header-title,
  .'.$b.'__element--'.$element["id"].' .flex-element-type-accordion__item-pretitle {
    '.fontMixin($user_data, 'titleFont').'
  }';

	$textFonts = '
  .'.$b.'__element--'.$element["id"].' .flex-element-type-accordion__item-text {
    '.fontMixin($user_data, 'textFont').'
  }';

	if (isset($user_data['items'])) {
		$accordionItems = '<div class="flex-element-type-accordion" style="--title-color: '.$titleColor.'; --text-color: '.$textColor.'; --lines-color: '.$separatingLinesColor.'; --bg-color: '.$backgroundColor.'; --gap: '.$gap.';">';
		foreach ($user_data['items'] as $key => $accordionItem) {
			$plusExpandIconModifier = $expand_icon === 'option_3' ? 'less-rotation' : '';
			$separator = $separatingLines ? '<div class="flex-element-type-accordion__item-separator"></div>' : '';
			$firstItemExpandedClass = $shouldFirstItemBeExpanded && $key === 0 ? 'expanded' : '';
			$firstItemExpandStyle = $shouldFirstItemBeExpanded && $key === 0 ? 'display: block;' : 'display: none';

			$pretitleText = '';
			if ($pretitle === 'numbers') {
				$pretitleValue = $key + 1;
				$pretitleText = '<span class="flex-element-type-accordion__item-pretitle">'.$pretitleValue.'.</span>';
			};

			if ($pretitle === 'bullets') {
				$pretitleText = '<span class="flex-element-type-accordion__item-pretitle">●</span>';
			};

			$itemWithBackgroundContent = !$isBackgroundEnabled ? '' : '
        <div class="flex-element-type-accordion__item--background '. $plusExpandIconModifier .'">
        '.$pretitleText.'
        <div class="flex-element-type-accordion__item-body">
          <div class="flex-element-type-accordion__item-header">
            <h4 class="flex-element-type-accordion__item-header-title">'.$accordionItem['title'].'</h4>
            <i class="flex-element-type-accordion__item-header-expand-icon flo-flex-icon-'.$expandIconOptions[$expand_icon].'"></i>
          </div>
          <p class="flex-element-type-accordion__item-text">'.$accordionItem['text'].'</p>
          </div>
        </div>';

			$itemElement = '<div class="flex-element-type-accordion__item '.$firstItemExpandedClass.' '. $plusExpandIconModifier .'">
        '.$pretitleText.'
        <div class="flex-element-type-accordion__item-body">
          <div class="flex-element-type-accordion__item-header">
            <h4 class="flex-element-type-accordion__item-header-title">'.$accordionItem['title'].'</h4>
            <i class="flex-element-type-accordion__item-header-expand-icon flo-flex-icon-'.$expandIconOptions[$expand_icon].'"></i>
          </div>
          <p class="flex-element-type-accordion__item-text" style="'.$firstItemExpandStyle.'">'.$accordionItem['text'].'</p>
          </div>
          '.$itemWithBackgroundContent.'
        </div>
        '.$separator.'
        ';

			$accordionItems .= $itemElement;
		};
		$accordionItems .= '</div>';

		$elMarkup .= '<style>
      '.$titleFonts.'
      '.$textFonts.'
    </style>';

		$elMarkup .= '<div class="'.$b.'__element '.$b.'__element--'.$element["id"].' '.$b.'__element--accordion '.$custom_classes.'" style="'.$elStyles.'">'.$accordionItems.'</div>';
	}

	return $elMarkup;
}
