<?php
/**
 * Field: a choice with images.
 *
 * Taken from transfergaja.rs, where a person picks a vehicle from a photo, with
 * a label and one small line underneath, for example the number of seats. An
 * option that is currently unavailable is visible but cannot be picked.
 *
 * Works without JavaScript. Under every card sits a plain radio button, so the
 * form works even when the script does not load, it can be stepped through with
 * the keyboard and a screen reader says everything.
 *
 * Copyright (c) 2026 Quantum, Serbia. https://2ranq.com
 *
 * This program is free software: you can redistribute it and change it under
 * the terms of the GNU General Public License as published by the Free Software
 * Foundation, either version 2 of the License, or any later version. The full
 * text is in LICENSE.txt, next to this file.
 *
 * @package Ranq_Forms
 */

defined( 'ABSPATH' ) || exit;

/**
 * Ranq_Forms_Field_Imagechoice
 */
class Ranq_Forms_Field_Imagechoice extends Ranq_Forms_Field_Choices {

	/**
	 * The type.
	 *
	 * @return string
	 */
	public function get_type() {

		return 'imagechoice';
	}

	/**
	 * The name in the builder.
	 *
	 * @return string
	 */
	public function get_label() {

		return __( 'Picture Choice', '2ranq-forms' );
	}

	/**
	 * The icon.
	 *
	 * @return string
	 */
	public function get_icon() {

		return 'dashicons-format-gallery';
	}

	/**
	 * The settings.
	 *
	 * @return array
	 */
	public function get_settings() {

		$settings = parent::get_settings();

		$settings['advanced'][] = array(
			'key'     => 'picture_layout',
			'type'    => 'select',
			'label'   => __( 'Layout', '2ranq-forms' ),
			'options' => array(
				'grid' => __( 'Cards side by side', '2ranq-forms' ),
				'list' => __( 'One under another', '2ranq-forms' ),
			),
			'default' => 'grid',
		);

		$settings['advanced'][] = array(
			'key'   => 'picture_meta_label',
			'type'  => 'text',
			'label' => __( 'Word for the small line', '2ranq-forms' ),
			'help'  => __( 'Only used in the email, before the small line. For example: Seats.', '2ranq-forms' ),
		);

		return $settings;
	}

	/**
	 * The options, with an image and a small line.
	 *
	 * The base class cleans the label and the value. What only this field has is
	 * added here.
	 *
	 * @param array $field The field settings.
	 *
	 * @return array
	 */
	protected function get_choices( $field ) {

		$clean = parent::get_choices( $field );
		$raw   = isset( $field['choices'] ) && is_array( $field['choices'] ) ? array_values( $field['choices'] ) : array();

		foreach ( $clean as $index => $choice ) {

			$extra = isset( $raw[ $index ] ) && is_array( $raw[ $index ] ) ? $raw[ $index ] : array();

			$clean[ $index ]['image']    = isset( $extra['image'] ) ? esc_url_raw( (string) $extra['image'] ) : '';
			$clean[ $index ]['meta']     = isset( $extra['meta'] ) ? sanitize_text_field( (string) $extra['meta'] ) : '';
			$clean[ $index ]['disabled'] = ! empty( $extra['disabled'] );
		}

		return $clean;
	}

	/**
	 * The list of allowed values.
	 *
	 * An option that is unavailable does NOT count. Without this anyone could
	 * send its value by hand, because the whole list is visible in the HTML.
	 *
	 * @param array $field The field settings.
	 *
	 * @return array
	 */
	protected function allowed_values( $field ) {

		$values = array();

		foreach ( $this->get_choices( $field ) as $choice ) {

			if ( $choice['disabled'] ) {
				continue;
			}

			$values[] = $choice['value'];
		}

		return $values;
	}

	/**
	 * Prints the field.
	 *
	 * @param array $field   The field settings.
	 * @param int   $form_id The form id.
	 *
	 * @return void
	 */
	public function render( $field, $form_id ) {

		$describedby = $this->describedby( $field, $form_id );
		$choices     = $this->get_choices( $field );
		$base_id     = $this->input_id( $field, $form_id );
		$layout      = isset( $field['picture_layout'] ) && 'list' === $field['picture_layout'] ? 'list' : 'grid';

		// After a failed send the visitor's pick comes back instead of the default.
		$sticky = $this->sticky_value( $field, $form_id );
		?>
		<div class="ranq-field ranq-field--imagechoice ranq-field--pick-<?php echo esc_attr( $layout ); ?><?php echo esc_attr( $this->extra_classes( $field ) ); ?>"<?php echo $this->wrapper_data( $field ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- already escaped in wrapper_data().?>>
			<fieldset
				class="ranq-field__group"
				<?php if ( $describedby ) : ?>
					aria-describedby="<?php echo esc_attr( $describedby ); ?>"
				<?php endif; ?>
			>
				<?php if ( ! empty( $field['label'] ) && empty( $field['label_hidden'] ) ) : ?>
					<legend class="ranq-field__label">
						<?php echo esc_html( $field['label'] ); ?>
						<?php if ( ! empty( $field['required'] ) ) : ?>
							<span class="ranq-field__required" aria-hidden="true">*</span>
						<?php endif; ?>
					</legend>
				<?php endif; ?>

				<div class="ranq-pick">
				<?php foreach ( $choices as $index => $choice ) : ?>
					<?php $choice_id = $base_id . '-' . $index; ?>
					<div class="ranq-pick__item<?php echo $choice['disabled'] ? ' ranq-pick__item--off' : ''; ?>">
						<input
							class="ranq-pick__input"
							type="radio"
							id="<?php echo esc_attr( $choice_id ); ?>"
							name="<?php echo esc_attr( $this->input_name( $field ) ); ?>"
							value="<?php echo esc_attr( $choice['value'] ); ?>"
							<?php checked( true, $this->choice_on( $choice, $sticky ) && ! $choice['disabled'] ); ?>
							<?php disabled( true, $choice['disabled'] ); ?>
							<?php echo empty( $field['required'] ) ? '' : 'required aria-required="true"'; ?>
						/>
						<label class="ranq-pick__card" for="<?php echo esc_attr( $choice_id ); ?>">
							<?php if ( $choice['image'] ) : ?>
								<img
									class="ranq-pick__photo"
									src="<?php echo esc_url( $choice['image'] ); ?>"
									alt=""
									loading="lazy"
									decoding="async"
								/>
							<?php else : ?>
								<span class="ranq-pick__photo ranq-pick__photo--empty" aria-hidden="true"></span>
							<?php endif; ?>

							<span class="ranq-pick__text">
								<span class="ranq-pick__name"><?php echo esc_html( $choice['label'] ); ?></span>
								<?php if ( $choice['meta'] ) : ?>
									<span class="ranq-pick__meta"><?php echo esc_html( $choice['meta'] ); ?></span>
								<?php endif; ?>
							</span>

							<?php if ( $choice['disabled'] ) : ?>
								<span class="ranq-pick__off"><?php esc_html_e( 'Unavailable', '2ranq-forms' ); ?></span>
							<?php endif; ?>
						</label>
					</div>
				<?php endforeach; ?>
				</div>
			</fieldset>
			<?php $this->render_description( $field, $form_id ); ?>
		</div>
		<?php
	}

	/**
	 * The value for the email and for the list of entries.
	 *
	 * What is sent is the label, not the key, plus the small line when the option
	 * has one. "sedan-black" means nothing to anyone, "Skoda Superb Black, 4
	 * seats" does.
	 *
	 * @param mixed $value The value.
	 * @param array $field The field settings.
	 *
	 * @return string
	 */
	public function format_value( $value, $field ) {

		$value = is_scalar( $value ) ? (string) $value : '';

		foreach ( $this->get_choices( $field ) as $choice ) {

			if ( $choice['value'] !== $value ) {
				continue;
			}

			$out = $choice['label'];

			if ( $choice['meta'] ) {
				$word = isset( $field['picture_meta_label'] ) ? trim( (string) $field['picture_meta_label'] ) : '';
				$out .= ', ' . ( $word ? $word . ': ' : '' ) . $choice['meta'];
			}

			return $out;
		}

		return $value;
	}
}