<?php

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

// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
$settings = isset( $settings ) && is_array( $settings ) ? $settings : get_option( 'ugcify_review_form_settings', array() );

$rating_option_settings = get_option( 'ugcify_review_form_rating_settings', array() );
if ( is_array( $rating_option_settings ) && ! empty( $rating_option_settings ) ) {
	$settings = array_merge( $settings, $rating_option_settings );
}

$title_text = ! empty( $settings['ratingTitleText'] ) ? $settings['ratingTitleText'] : __( 'How would you rate this item?', 'ugcify' );
$show_title = ! isset( $settings['showRatingTitle'] ) || (bool) $settings['showRatingTitle'];

$title_size_map = array(
	'small'  => 14,
	'medium' => 18,
	'large'  => 24,
);
$title_weight_map = array(
	'regular'  => 400,
	'semibold' => 600,
	'bold'     => 700,
);

$title_size_key   = $settings['ratingTitleSize'] ?? 'medium';
$title_weight_key = $settings['ratingTitleWeight'] ?? 'semibold';

$title_size   = isset( $title_size_map[ $title_size_key ] ) ? $title_size_map[ $title_size_key ] : $title_size_map['medium'];
$title_weight = isset( $title_weight_map[ $title_weight_key ] ) ? $title_weight_map[ $title_weight_key ] : $title_weight_map['semibold'];

$title_color      = sanitize_hex_color( $settings['ratingTitleColor'] ?? '' );
$star_fill_color  = sanitize_hex_color( $settings['ratingStarFillColor'] ?? '' );
$star_border_color = sanitize_hex_color( $settings['ratingStarBorderColor'] ?? '' );

$title_color       = $title_color ? $title_color : '#000000';
$star_fill_color   = $star_fill_color ? $star_fill_color : '#FFA800';
$star_border_color = $star_border_color ? $star_border_color : '#FFA800';

$rating_title_id = 'ugcify-step-rating-heading';
?>

<!-- Step 1: Rating -->
<div class="ugcify-form-step ugcify-step-rating" data-step="1" style="display: none;" role="form" <?php echo $show_title ? 'aria-labelledby="' . esc_attr( $rating_title_id ) . '"' : ''; ?>>
	<?php if ( $show_title ) : ?>
		<h2
			id="<?php echo esc_attr( $rating_title_id ); ?>"
			class="ugcify-step-title"
			style="color: <?php echo esc_attr( $title_color ); ?>; font-size: <?php echo esc_attr( $title_size ); ?>px; font-weight: <?php echo esc_attr( $title_weight ); ?>;"
		>
			<?php echo esc_html( $title_text ); ?>
		</h2>
	<?php endif; ?>

	<div
		class="ugcify-star-rating ugcify-star-rating-xlarge"
		data-rating="0"
		data-active-color="<?php echo esc_attr( $star_fill_color ); ?>"
		role="group"
		<?php echo $show_title ? 'aria-labelledby="' . esc_attr( $rating_title_id ) . '"' : ''; ?>
	>
		<?php for ( $i = 1; $i <= 5; $i++ ) : ?>
			<button type="button" class="ugcify-star" data-value="<?php echo esc_attr( $i ); ?>" style="color: <?php echo esc_attr( $star_fill_color ); ?>;">
				<svg xmlns="http://www.w3.org/2000/svg" width="57" height="57" viewBox="0 0 57 57" fill="none">
					<path d="M33.1649 4.92817L37.9911 14.5806C38.6492 15.9243 40.4042 17.2131 41.885 17.4599L50.6325 18.9133C56.2265 19.8456 57.5428 23.904 53.5118 27.9076L46.7112 34.7082C45.5595 35.8599 44.9288 38.0811 45.2853 39.6715L47.2322 48.09C48.7678 54.7535 45.2304 57.3311 39.3347 53.8486L31.1356 48.9949C29.6549 48.1174 27.2143 48.1174 25.7061 48.9949L17.507 53.8486C11.6388 57.3311 8.07396 54.7261 9.60958 48.09L11.5565 39.6715C11.913 38.0811 11.2823 35.8599 10.1306 34.7082L3.33 27.9076C-0.673579 23.904 0.615244 19.8456 6.20928 18.9133L14.9568 17.4599C16.4102 17.2131 18.1652 15.9243 18.8233 14.5806L23.6495 4.92817C26.282 -0.309388 30.5598 -0.309388 33.1649 4.92817Z" stroke="<?php echo esc_attr( $star_border_color ); ?>" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
				</svg>
			</button>
		<?php endfor; ?>
	</div>

	<button type="button" class="ugcify-button ugcify-button-primary ugcify-step-next" disabled>
		<?php esc_html_e( 'Continue', 'ugcify' ); ?>
	</button>
</div>
