<?php
/**
 * SureDonation Multi-Choice Markup Class.
 *
 * @package SureDonation
 * @since 0.0.1
 */

namespace SureDonation\Inc\Fields;

use SureDonation\Inc\Helper;

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

/**
 * Multi-Choice Markup Class.
 *
 * @since 0.0.1
 */
class Multi_Choice_Markup extends Base {
	/**
	 * Choice type (radio or checkbox).
	 *
	 * @var string
	 * @since 0.0.1
	 */
	protected $choice_type;

	/**
	 * Layout (horizontal or vertical).
	 *
	 * @var string
	 * @since 0.0.1
	 */
	protected $layout;

	/**
	 * Choice width (width of each option in horizontal layout).
	 *
	 * @var string
	 * @since 0.0.1
	 */
	protected $choice_width;

	/**
	 * Initialize the properties based on block attributes.
	 *
	 * @param array<string, mixed> $attributes Block attributes.
	 * @since 0.0.1
	 */
	public function __construct( $attributes ) {
		$this->slug         = 'multi-choice';
		$this->choice_type  = isset( $attributes['choiceType'] ) ? Helper::get_string_value( $attributes['choiceType'] ) : 'radio';
		$this->layout       = isset( $attributes['layout'] ) ? Helper::get_string_value( $attributes['layout'] ) : 'horizontal';
		$this->choice_width = isset( $attributes['choiceWidth'] ) ? Helper::get_string_value( $attributes['choiceWidth'] ) : '50';

		$this->set_properties( $attributes );
		$this->set_unique_slug();
		$this->set_markup_properties();
	}

	/**
	 * Render multi-choice markup
	 *
	 * @since 0.0.1
	 * @return string
	 */
	public function markup() {
		$classes            = $this->get_field_classes( [ 'sd-' . $this->choice_type . '-mode' ] );
		$vertical_class     = 'vertical' === $this->layout ? ' sd-vertical-layout' : '';
		$choice_width_class = ' sd-choice-width-' . str_replace( '.', '-', $this->choice_width );
		$wrap_class         = 'sd-block-wrap sd-multi-choice-wrap' . $choice_width_class . $vertical_class;
		$svg_type           = 'radio' === $this->choice_type ? 'circle' : 'square';
		$checked_svg        = $this->get_svg_icon( $svg_type . '-checked', 'sd-multi-choice-icon' );
		$unchecked_svg      = $this->get_svg_icon( $svg_type . '-unchecked', 'sd-multi-choice-icon-unchecked' );
		$input_name         = 'checkbox' === $this->choice_type ? $this->field_name . '[]' : $this->field_name;

		// Get the default value for the hidden input (preselected option).
		$hidden_value = '';
		if ( ! empty( $this->default ) && ! empty( $this->options ) && is_array( $this->options ) ) {
			foreach ( $this->options as $option ) {
				$option_value = $option['value'] ?? ( $option['label'] ?? '' );
				if ( $this->default === $option_value ) {
					$hidden_value = $option_value;
					break;
				}
			}
		}

		ob_start();
		?>
		<div data-block-id="<?php echo esc_attr( $this->block_id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
			<fieldset>
				<!-- Hidden input to store the selected value for use by payment block and form submission -->
				<input
					type="hidden"
					class="sd-input-multi-choice-hidden sd-input-common"
					name="<?php echo esc_attr( $this->field_name ); ?>-value"
					data-slug="<?php echo esc_attr( $this->block_slug ? $this->block_slug : $this->unique_slug ); ?>"
					data-required="<?php echo esc_attr( $this->data_require_attr ); ?>"
					value="<?php echo esc_attr( $hidden_value ); ?>"
				/>
				<legend class="sd-block-legend">
					<?php echo wp_kses_post( $this->label_markup ); ?>
				</legend>
				<?php echo wp_kses_post( $this->help_markup ); ?>
				<?php if ( ! empty( $this->options ) && is_array( $this->options ) ) { ?>
					<div class="<?php echo esc_attr( $wrap_class ); ?>" role="group" aria-labelledby="sd-label-<?php echo esc_attr( $this->block_id ); ?>">
						<?php foreach ( $this->options as $index => $option ) { ?>
							<?php
							$option_label = $option['label'] ?? '';
							$option_value = $option['value'] ?? $option_label;
							$option_id    = $this->unique_slug . '-' . $index;
							$is_checked   = $this->default === $option_value;
							$checked_attr = $is_checked ? 'checked' : '';
							?>
							<div class="sd-multi-choice-single">
								<input
									type="<?php echo esc_attr( $this->choice_type ); ?>"
									id="<?php echo esc_attr( $option_id ); ?>"
									name="<?php echo esc_attr( $input_name ); ?>"
									value="<?php echo esc_attr( $option_value ); ?>"
									class="sd-input-<?php echo esc_attr( $this->choice_type ); ?>"
									data-required="<?php echo esc_attr( $this->data_require_attr ); ?>"
									<?php echo esc_attr( $checked_attr ); ?>
								/>
								<div class="sd-block-content-wrap">
									<div class="sd-option-container">
										<label for="<?php echo esc_attr( $option_id ); ?>"><?php echo esc_html( $option_label ); ?></label>
									</div>
									<div class="sd-icon-container">
										<?php
										$allowed_svg = [
											'svg'    => [
												'class'   => true,
												'width'   => true,
												'height'  => true,
												'viewbox' => true,
												'fill'    => true,
												'xmlns'   => true,
												'aria-hidden' => true,
											],
											'circle' => [
												'cx'     => true,
												'cy'     => true,
												'r'      => true,
												'stroke' => true,
												'stroke-width' => true,
												'fill'   => true,
											],
											'rect'   => [
												'x'      => true,
												'y'      => true,
												'width'  => true,
												'height' => true,
												'rx'     => true,
												'stroke' => true,
												'stroke-width' => true,
											],
											'path'   => [
												'd'      => true,
												'stroke' => true,
												'stroke-width' => true,
												'stroke-linecap' => true,
												'stroke-linejoin' => true,
											],
										];
										echo wp_kses( $checked_svg, $allowed_svg );
										echo wp_kses( $unchecked_svg, $allowed_svg );
										?>
									</div>
								</div>
							</div>
						<?php } ?>
					</div>
				<?php } ?>
				<div class="sd-error-wrap"><?php echo wp_kses_post( $this->error_msg_markup ); ?></div>
			</fieldset>
		</div>
		<?php
		return (string) ob_get_clean();
	}

	/**
	 * Get SVG icon for radio/checkbox
	 *
	 * @param string $type Icon type (circle-checked, circle-unchecked, square-checked, square-unchecked).
	 * @param string $classes CSS class.
	 * @return string SVG markup.
	 * @since 0.0.1
	 */
	private function get_svg_icon( $type, $classes = '' ) {
		$class_attr = $classes ? ' class="' . esc_attr( $classes ) . '"' : '';

		switch ( $type ) {
			case 'circle-checked':
				return '<svg' . $class_attr . ' width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
					<circle cx="10" cy="10" r="9" stroke="currentColor" stroke-width="2"/>
					<circle cx="10" cy="10" r="5" fill="currentColor"/>
				</svg>';
			case 'circle-unchecked':
				return '<svg' . $class_attr . ' width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
					<circle cx="10" cy="10" r="9" stroke="currentColor" stroke-width="2"/>
				</svg>';
			case 'square-checked':
				return '<svg' . $class_attr . ' width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
					<rect x="1" y="1" width="18" height="18" rx="3" stroke="currentColor" stroke-width="2"/>
					<path d="M6 10L9 13L14 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
				</svg>';
			case 'square-unchecked':
				return '<svg' . $class_attr . ' width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
					<rect x="1" y="1" width="18" height="18" rx="3" stroke="currentColor" stroke-width="2"/>
				</svg>';
			default:
				return '';
		}
	}
}
