<?php
/**
 * Amount component view.
 *
 * @package Awesomemotive\Rewardswp\Views\Admin\Components
 * @since 1.0.0
 */

namespace Awesomemotive\Rewardswp\Views\Admin\Components;

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

use Awesomemotive\Rewardswp\Abstracts\AbstractView;
use Awesomemotive\Rewardswp\Interfaces\ViewInterface;
use Awesomemotive\Rewardswp\Settings\Options\General\CurrencyOption;
use function Awesomemotive\Rewardswp\Helpers\array_to_json;
use function Awesomemotive\Rewardswp\Helpers\get_option_value;
use function Awesomemotive\Rewardswp\Helpers\get_site_currency_symbol;
use function Awesomemotive\Rewardswp\Helpers\get_currency_position;
use function Awesomemotive\Rewardswp\Helpers\tag_attr;


/**
 * Amount Component View.
 *
 * @since 1.0.0
 */
class AmountComponentView extends AbstractView implements ViewInterface {
	/**
	 * Render the template.
	 *
	 * @since 1.0.0
	 *
	 * @param array $args
	 *
	 * @return void
	 */
	public function render( array $args = [] ): void {
		$args = wp_parse_args(
			$args,
			[
				'name'            => '',
				'id'              => '',
				'x-bind:id'       => '',
				'value'           => '',
				'x-bind:value'    => '',
				'x-on:input'      => '',
				'x-on:blur'       => '',
				'x-on:change'     => '',
				'x-model'         => '',
				'placeholder'     => esc_html__( 'Enter the amount', 'rewardswp' ),
				'type'            => 'currency',
				'error_condition' => '',
				'width'           => 'w-full',
			]
		);

		if ( empty( $args['name'] ) ) {
			esc_html_e( 'Failed to render the amount component, group and name arguments are required.', 'rewardswp' );
			return;
		}

		$value_input_name = empty( $args['x-bind:value'] )
			? 'value'
			: 'x-bind:value';
		$value_input_val  = empty( $args['x-bind:value'] )
			? $args['value']
			: $args['x-bind:value'];

		$id_input_name = empty( $args['x-bind:id'] )
			? 'id'
			: 'x-bind:id';
		$id_input_val  = empty( $args['x-bind:id'] )
			? $args['id']
			: $args['x-bind:id'];

		$aria_described_by = sprintf( '%s_currency', $args['name'] );

		// Resolve symbol placement so trailing-symbol stores (e.g. euro) render the symbol on the
		// right of the field ("1 €"), matching the storefront and the rest of the admin previews.
		// A small input padding stands in for the display-text space; the $space flag is irrelevant
		// inside a field, where a touching "1€" would look cramped regardless.
		$currency_position = get_currency_position();
		$symbol            = get_site_currency_symbol();
		$symbol_after      = 'after' === $currency_position['position'];

		?>

		<div class="<?php echo esc_attr( $args['width'] ); ?> max-w-full min-w-0">
			<div
				x-data="<?php echo array_to_json( [ 'type' => $args['type'] ], false, true ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>"
				class="flex items-center rounded-md bg-white px-3 outline-1 -outline-offset-1 focus-within:outline-2 focus-within:-outline-offset-2 min-w-0<?php echo empty( $args['error_condition'] ) ? ' outline-gray-300 focus-within:outline-blue-600' : ''; ?>"
			<?php
			if ( ! empty( $args['error_condition'] ) ) {
				$condition  = $args['error_condition'];
				$bind_class = sprintf(
					"{ 'text-red-900 outline-red-300 focus-within:outline-red-600': %s, 'outline-gray-300 focus-within:outline-blue-600': !(%s) }",
					$condition,
					$condition
				);
				tag_attr( 'x-bind:class', $bind_class );
			}
			?>
		>
			<div class="shrink-0 text-base text-gray-500 select-none sm:text-sm/6">
				<?php if ( ! $symbol_after ) : ?>
					<span x-show="'currency' === type" x-text="`<?php echo esc_html( $symbol ); ?>`"></span>
				<?php endif; ?>
			</div>
			<input
				<?php tag_attr( 'x-model', $args['x-model'] ); ?>
				<?php tag_attr( $value_input_name, $value_input_val ); ?>
				<?php tag_attr( 'x-on:input', $args['x-on:input'] ); ?>
				<?php tag_attr( 'x-on:blur', $args['x-on:blur'] ); ?>
				<?php tag_attr( 'x-on:change', $args['x-on:change'] ); ?>
				<?php tag_attr( $id_input_name, $id_input_val ); ?>
				type="number"
				min="0"
				name="<?php echo esc_attr( $args['name'] ); ?>"
				placeholder="<?php echo esc_attr( $args['placeholder'] ); ?>"
				class="block min-w-0 grow py-2 pl-1 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6"
				x-bind:class="{ 'pr-3': ['percentage'].includes(type), 'pr-1': <?php echo $symbol_after ? "'currency' === type" : 'false'; ?> }"
				aria-describedby="<?php echo esc_attr( $aria_described_by ); ?>"
			>
			<div
				id="<?php echo esc_attr( $aria_described_by ); ?>"
				class="shrink-0 text-base text-gray-500 select-none sm:text-sm/6"
				x-show="['percentage', 'currency'].includes(type)"
			>
				<span x-show="'percentage' === type" x-text="`%`"></span>
				<?php if ( $symbol_after ) : ?>
					<span x-show="'currency' === type" x-text="`<?php echo esc_html( $symbol ); ?>`"></span>
				<?php endif; ?>
			</div>
		</div>
		</div>

		<?php
	}
}
