<?php
/**
 * Rewards widget sharing options content view.
 *
 * @package Awesomemotive\Rewardswp\Views\Admin\Parts
 * @since 1.0.0
 */

namespace Awesomemotive\Rewardswp\Views\Admin\Parts;

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

use Awesomemotive\Rewardswp\Abstracts\AbstractView;
use Awesomemotive\Rewardswp\Factories\OptionsFactory;
use Awesomemotive\Rewardswp\Helpers\IconHelper;
use Awesomemotive\Rewardswp\Interfaces\ViewInterface;
use Awesomemotive\Rewardswp\Settings\Options\Referrals\SharingOption;
use function Awesomemotive\Rewardswp\Helpers\get_view_component;
use function Awesomemotive\Rewardswp\Helpers\kses;
use function Awesomemotive\Rewardswp\Helpers\svg_kses;

class RewardsWidgetSharingOptionsContentView extends AbstractView implements ViewInterface {
	/**
	 * Icon helper instance.
	 *
	 * @since 1.0.0
	 *
	 * @var IconHelper
	 */
	private IconHelper $icon_helper;

	/**
	 * Options factory instance.
	 *
	 * @since 1.0.0
	 *
	 * @var OptionsFactory
	 */
	private OptionsFactory $options_factory;

	/**
	 * Constructor.
	 *
	 * @since 1.0.0
	 *
	 * @param IconHelper     $icon_helper
	 * @param OptionsFactory $options_factory
	 */
	public function __construct( IconHelper $icon_helper, OptionsFactory $options_factory ) {
		$this->icon_helper     = $icon_helper;
		$this->options_factory = $options_factory;
	}

	/**
	 * Render the template.
	 *
	 * @since 1.0.0
	 *
	 * @param array $args
	 *
	 * @return void
	 */
	public function render( array $args = [] ): void {

		$sharing_options          = $this->options_factory->get_option( SharingOption::class )->get_value();
		$sharing_options_defaults = $this->options_factory->get_option( SharingOption::class )->get_default_value();

		?>

		<p class="!mt-1 !text-sm text-gray-500">
			<?php esc_html_e( 'Let advocates share their referral links directly from the Rewards Panel.', 'rewardswp' ); ?>
		</p>


		<div class="divide-y divide-gray-200">

			<!-- X (Twitter) -->
			<div class="py-5 flex flex-col gap-4 md:gap-0">
				<div class="gap-8 flex justify-between">
					<div class="md:w-1/3 flex-none">
						<label class="inline-flex items-center cursor-pointer" for="rewardswp_settings[referrals][sharing][x]">
							<div class="flex items-center justify-center p-4 mr-3 bg-gray-100 rounded-lg border border-gray-200">
								<?php echo wp_kses( $this->icon_helper->get_icon( 'twitter', 'w-7 h-7' ), svg_kses() ); ?>
							</div>
							<div>
								<span class="text-sm font-semibold">
									<?php esc_html_e( 'X', 'rewardswp' ); ?>
								</span>
							</div>
						</label>
					</div>
					<div class="md:w-2/3 items-center flex">
						<div>
							<?php

							echo wp_kses(
								get_view_component(
									'toggle',
									[
										'section'    => 'referrals',
										'name'       => 'sharing[x]',
										'label'      => esc_html__( 'Enable X sharing', 'rewardswp' ),
										'is_checked' => $sharing_options['x'] ?? false,
										'x-on:click' => 'sharing.x = !sharing.x; $dispatch("setting-updated", { key: "sharing_x", value: sharing.x })',
									]
								),
								kses()
							);

							?>
						</div>
					</div>
				</div>

				<div
					x-show="sharing.x"
					x-cloak
				>
					<div class="gap-8 flex">
						<div class="md:w-1/3 flex-none no-display md:block"></div>
						<div class="w-full md:w-2/3">
							<div
								x-data="{
									messageLength: '<?php echo esc_attr( strlen( $sharing_options['x_message'] ?? '' ) ); ?>'
								}"
							>
								<div class="flex items-center justify-between">
									<label for="x_message" class="block text-sm font-medium text-gray-700">
										<?php esc_html_e( 'X Message', 'rewardswp' ); ?>
									</label>
									<span class="text-sm text-gray-500">
										<span x-text="messageLength"></span>/280
									</span>
								</div>
								<div class="mt-1">
									<input
										type="text"
										id="x_message"
										name="rewardswp_settings[referrals][sharing][x_message]"
										value="<?php echo esc_attr( $sharing_options['x_message'] ?? '' ); ?>"
										class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
										placeholder="
										<?php
										/* translators: Example message for sharing text placeholder */
										printf( esc_attr__( 'e.g. %s', 'rewardswp' ), esc_html( $sharing_options_defaults['x_message'] ) );
										?>
										"
										maxlength="280"
										x-on:input.debounce.200ms="messageLength = $event.target.value.length; $dispatch('setting-updated', { key: 'sharing_x_message', value: $event.target.value })"
									/>
									<p class="mt-3 text-sm text-gray-500">
										<?php esc_html_e( 'If left blank, the default will be used: Visit {site_name} to receive your free gift!', 'rewardswp' ); ?>
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Facebook -->
			<div class="py-5 flex flex-col gap-4 md:gap-0">
				<div class="gap-8 flex justify-between">
					<div class="md:w-1/3 flex-none">
						<label class="inline-flex items-center cursor-pointer" for="rewardswp_settings[referrals][sharing][facebook]">
							<div class="flex items-center justify-center p-4 mr-3 bg-gray-100 rounded-lg border border-gray-200">
								<?php echo wp_kses( $this->icon_helper->get_icon( 'facebook', 'w-7 h-7' ), svg_kses() ); ?>
							</div>
							<div>
								<span class="text-sm font-semibold">
									<?php esc_html_e( 'Facebook', 'rewardswp' ); ?>
								</span>
							</div>
						</label>
					</div>
					<div class="md:w-2/3 items-center flex">
						<div>
							<?php

							echo wp_kses(
								get_view_component(
									'toggle',
									[
										'section'    => 'referrals',
										'name'       => 'sharing[facebook]',
										'label'      => esc_html__( 'Enable Facebook sharing', 'rewardswp' ),
										'is_checked' => $sharing_options['facebook'] ?? false,
										'x-on:click' => 'sharing.facebook = !sharing.facebook; $dispatch("setting-updated", { key: "sharing_facebook", value: sharing.facebook })',
									]
								),
								kses()
							);

							?>
						</div>
					</div>
				</div>

				<div
					x-show="sharing.facebook"
					x-cloak
				>
					<div class="gap-8 flex">
						<div class="md:w-1/3 flex-none no-display md:block"></div>
						<div class="w-full md:w-2/3">
							<p class="mb-0 mt-0 text-sm text-gray-500">
								<?php esc_html_e( 'Facebook does not allow predefined messages. When an advocate refers their friends via Facebook, they will be prompted to add their own message.', 'rewardswp' ); ?>
							</p>
						</div>
					</div>
				</div>
			</div>

			<!-- Email -->
			<div class="py-5 flex flex-col gap-4 md:gap-0">
				<div class="gap-8 flex justify-between">
					<div class="md:w-1/3 flex-none">
						<label class="inline-flex items-center cursor-pointer" for="rewardswp_settings[referrals][sharing][email]">
							<div class="flex items-center justify-center p-4 mr-3 bg-gray-100 rounded-lg border border-gray-200">
								<?php echo wp_kses( $this->icon_helper->get_icon( 'email', 'w-7 h-7' ), svg_kses() ); ?>
							</div>
							<div>
								<span class="text-sm font-semibold">
									<?php esc_html_e( 'Email', 'rewardswp' ); ?>
								</span>
							</div>
						</label>
					</div>
					<div class="md:w-2/3 items-center flex">
						<div>
							<?php

							echo wp_kses(
								get_view_component(
									'toggle',
									[
										'section'    => 'referrals',
										'name'       => 'sharing[email]',
										'label'      => esc_html__( 'Enable Email sharing', 'rewardswp' ),
										'is_checked' => $sharing_options['email'] ?? false,
										'x-on:click' => 'sharing.email = !sharing.email; $dispatch("setting-updated", { key: "sharing_email", value: sharing.email })',
									]
								),
								kses()
							);

							?>
						</div>
					</div>
				</div>

				<div
					x-show="sharing.email"
					x-cloak
				>
					<div class="gap-8 flex">
						<div class="md:w-1/3 flex-none no-display md:block"></div>
						<div class="w-full md:w-2/3 divide-y divide-gray-200 flex flex-col space-y-5">
							<div>
								<label for="email_subject" class="block text-sm font-medium text-gray-700">
									<?php esc_html_e( 'Email Subject', 'rewardswp' ); ?>
								</label>
								<div class="mt-1">
									<input
										type="text"
										id="email_subject"
										name="rewardswp_settings[referrals][sharing][email_subject]"
										value="<?php echo esc_attr( $sharing_options['email_subject'] ?? '' ); ?>"
										class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
										placeholder="
										<?php
										/* translators: Example message for sharing text placeholder */
										printf( esc_attr__( 'e.g. %s', 'rewardswp' ), esc_html( $sharing_options_defaults['email_subject'] ) );
										?>
										"
										x-on:input.debounce.200ms="$dispatch('setting-updated', { key: 'sharing_email_subject', value: $event.target.value })"
									/>
									<p class="mt-3 text-sm text-gray-500">
										<?php esc_html_e( 'If left blank, the default will be used: A little gift for you!', 'rewardswp' ); ?>
									</p>
								</div>
							</div>

							<div>
								<label for="email_message" class="block text-sm font-medium text-gray-700">
									<?php esc_html_e( 'Email Message', 'rewardswp' ); ?>
								</label>
								<div class="mt-1">
									<textarea
										id="email_message"
										name="rewardswp_settings[referrals][sharing][email_message]"
										rows="4"
										class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
										placeholder="
										<?php
										/* translators: Example message for sharing text placeholder */
										printf( esc_attr__( 'e.g. %s', 'rewardswp' ), esc_html( $sharing_options_defaults['email_message'] ) );
										?>
										"
										x-on:input.debounce.200ms="$dispatch('setting-updated', { key: 'sharing_email_message', value: $event.target.value })"
									><?php echo esc_textarea( $sharing_options['email_message'] ?? '' ); ?></textarea>
									<p class="mt-3 text-sm text-gray-500">
										<?php esc_html_e( 'Available placeholders: {site_name}, {advocate_name}, {reward_name}, {referral_link}', 'rewardswp' ); ?>
									</p>
								</div>
							</div>

						</div>

					</div>

				</div>
			</div>

		</div>

		<?php
	}
}
