<?php
/**
 * Make the Gravity Forms block preview in the editor look like the front end.
 *
 * The form's custom styling lives in two places:
 *   1. Customizer "Additional CSS" (radio-as-buttons, field labels) — WordPress
 *      core already injects this into the editor canvas itself, so we do NOT
 *      duplicate it here. (Core's copy is stripped of site-chrome rules in
 *      inc/bw-editor-customizer-css.php, which is what keeps it from breaking
 *      the editor's own layout.)
 *   2. Theme form CSS (assets/bw-gf-*.css) — enqueued on the front end via the
 *      front-end-only `gform_enqueue_scripts` action, so the editor never sees
 *      it. That is what this file injects.
 *
 * We inject it into the editor canvas through `block_editor_settings_all`,
 * whose `styles` entries Gutenberg copies into the (iframed) editor canvas —
 * the reliable way to style block previews. CSS-only effects (radios → buttons,
 * labels, Next/Back buttons) then match the front end. The dot pagination and
 * review step depend on front-end JS, so those still show GF defaults in the
 * editor — that's expected.
 *
 * @package Kadence-Child
 */

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

add_filter(
	'block_editor_settings_all',
	function ( $settings ) {
		$dir = get_stylesheet_directory();
		$css = '';

		// Theme form stylesheets (same files the front end uses).
		foreach ( array( 'bw-gf-review', 'bw-gf-dots' ) as $handle ) {
			$file = $dir . '/assets/' . $handle . '.css';
			if ( file_exists( $file ) ) {
				$css .= "\n/* {$handle}.css */\n" . file_get_contents( $file ); // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents
			}
		}

		// The Customizer "Additional CSS" (which holds the GF radio-button and
		// field-label styling) is NOT mirrored here: WordPress core already
		// injects it into the editor canvas by itself. Adding it again only
		// duplicated it. Core's copy is cleaned of site-chrome rules in
		// inc/bw-editor-customizer-css.php, so the GF styling still applies.

		// Editor-only: render the step indicator as dots. On the front end this
		// is done by assets/bw-gf-dots.js, which adds a .bw-dots class and moves
		// the indicator into the footer; that JS does not run in the editor, so
		// here we apply the same dot look keyed straight on .gf_page_steps (the
		// indicator stays at the top — repositioning needs the JS).
		$css .= '
/* Editor-only step dots */
.gf_page_steps { display:flex !important; justify-content:center; align-items:center; gap:10px; border:0 !important; }
.gf_page_steps .gf_step { display:flex !important; align-items:center; margin:0 !important; padding:0 !important; min-inline-size:0 !important; }
.gf_page_steps .gf_step_label { display:none !important; }
.gf_page_steps .gf_step_number {
	display:block !important; width:12px !important; height:12px !important;
	inline-size:12px !important; block-size:12px !important; min-inline-size:0 !important;
	margin:0 !important; padding:0 !important; border:0 !important; border-radius:50% !important;
	background:#9ca3af !important; color:transparent !important; font-size:0 !important; line-height:0 !important; box-shadow:none !important;
}
.gf_page_steps .gf_step_active .gf_step_number { background:#4b5563 !important; }
.gf_page_steps .gf_step_completed .gf_step_number { background:#22c55e !important; }
.gf_page_steps .gf_step_completed .gf_step_number::before,
.gf_page_steps .gf_step_completed .gf_step_number::after { display:none !important; content:none !important; }
.gf_page_steps .gf_step_last { display:none !important; }
';

		if ( '' !== trim( $css ) ) {
			$settings['styles'][] = array( 'css' => $css );
		}

		return $settings;
	}
);