<?php
/**
 * This file displays the information about all the integrations provided by the plugin
 *
 * @package object-data-sync-for-salesforce\Helper\view
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

use MoSfSyncSalesforce\Helper\Plugin_Constants;
use MoSfSyncSalesforce\Services\Utils;

/**
 * Function that iterates and displays all the integrations provided in the form of tile view.
 *
 * @return void
 */
function mo_sf_sync_show_integrations() {
	$recommended_integrations = Utils::mo_sf_sync_get_recommended_integrations();
	?>
	<div class="mo-sf-sync-tab-content mo-sf-sync-integration-container">
		<?php

		if ( ! empty( $recommended_integrations ) ) {
			?>
			<div class="mo-sf-sync-integration-category">
					<button class="mo-sf-sync-integration-dropdown-toggle recommended_integrations">
						<div class="mo-sf-sync-recommended-integrations-container">
							<h5>Recommended Integrations</h5>
							<p class="mo-sf-sync-recommendation-notice">We noticed that you are using third-party WordPress plugins. Check out these recommended integrations that we support.</p>
						</div>
						<?php
						Utils::mo_sf_sync_render_image(
							'chevron.png',
							array(
								'alt'    => 'chevron',
								'width'  => '15px',
								'height' => '15px',
								'class'  => 'mo_sf_sync_chevron_img',
							)
						);
						?>
					</button>
					<div class="mo-sf-sync-dropdown-content mo-sf-sync-inte-active-block">
						<div class="mo_sf_sync_integration_container_wrapper">
						<?php
						foreach ( $recommended_integrations as $key ) {
							mo_sf_sync_get_integration_tile( $key['slug'], $key['title'], $key['description'], $key['url'], $key['category'] );
						}
						?>
					</div>
				</div>
			</div>
			<?php
		}

		$idx = 0;
		foreach ( Plugin_Constants::INTEGRATIONS_TAB_CATEGORIES as $integration_type ) {
			$active = false;
			if ( empty( $recommended_integrations ) && 0 === $idx ) {
				$active = true;
			}
			?>
			<div class="mo-sf-sync-integration-category">
				<button class="mo-sf-sync-integration-dropdown-toggle <?php echo $active ? 'recommended_integrations' : ''; ?>"  >
					<div class="mo-sf-sync-recommended-integrations-container">
						<h5><?php echo esc_html( $integration_type['title'] ); ?></h5>
					</div>
					<?php
					Utils::mo_sf_sync_render_image(
						'chevron.png',
						array(
							'alt'    => 'chevron',
							'width'  => '15px',
							'height' => '15px',
							'class'  => 'mo_sf_sync_chevron_img',
						)
					);
					?>
				</button>
				<div class="mo-sf-sync-dropdown-content <?php echo $active ? esc_attr( 'mo-sf-sync-inte-active-block' ) : ''; ?>"  >
					<div class="mo_sf_sync_integration_container_wrapper">
					<?php
					foreach ( $integration_type['plugins'] as $key ) {
						mo_sf_sync_get_integration_tile( $key['slug'], $key['title'], $key['description'], $key['url'] );
					}
					?>
				</div>
			</div>
		</div>
			<?php
			++$idx;
		}
		?>
	</div>
	<?php
}

/**
 * Function to display each Integration's details provided by the plugin.
 *
 * @param string $integration_name  The name of the Integration.
 * @param string $integration_title The title of the Integration.
 * @param string $integration_desc  The brief description of the Integration.
 * @param string $integration_url   The page URL of the Integration.
 * @param string $category          The category of the Integration.
 * @return void
 */
function mo_sf_sync_get_integration_tile( $integration_name, $integration_title, $integration_desc, $integration_url, $category = '' ) {
	?>
	<div class="mo-sf-sync-integration-card" >
		<div class="mo-sf-sync-integration-header">
			<?php
				Utils::mo_sf_sync_render_image(
					'integrations/' . $integration_name . '.png',
					array(
						'alt'   => esc_attr( $integration_title ),
						'class' => 'mo-sf-sync-integration-logo',
					)
				);
			?>
			<div>
				<h4 class="mo-sf-sync-integration-title"><?php echo esc_html( $integration_title ); ?></h4>
				<?php
				if ( ! empty( $category ) ) {
					echo '<span class="mo-sf-sync-integration-span">' . esc_html( $category ) . '</span>';
				}
				?>
			</div>
		</div>
		<div class="mo-sf-sync-integration-desc-container">
			<p class="mo-sf-sync-integration-desc"><?php echo esc_html( $integration_desc ); ?></p>
		</div>
		<div class="mo-sf-sync-integration-actions">
			<a class="mo-sf-btn-primary" href="<?php echo esc_url( $integration_url ); ?>" target="_blank">Learn More</a>
		</div>
	</div>
	<?php
}
