/**
 * Embed vocabulary shared by the admin app and the block editor. No React and
 * no i18n here: the block editor translates each label by its value.
 *
 * Lists the booking site owns (button styles, alignments, corners, default
 * button text and inline height) come from the synced embed-snippet.ts;
 * scripts/check-embed-contract.mjs holds PHP's copies to them.
 */

import { embedTypeList, type EmbedShows, type EmbedType } from '@/design-system/embed/embed-snippet';

/**
 * "Appears as": the `display` value a block, shortcode or Elementor widget
 * stores.
 */
export type WpDisplay = 'inline' | 'popup' | 'link' | 'floating';

/**
 * WordPress's `display` -> the snippet's EmbedType (shared/docs/embeds.md):
 * the snippet calls `link` "button" and `floating` "bubble".
 */
const DISPLAY_TO_EMBED_TYPE: Readonly< Record< WpDisplay, EmbedType > > = {
	inline: 'inline',
	popup: 'popup',
	link: 'button',
	floating: 'bubble',
};

const EMBED_TYPE_TO_DISPLAY = Object.fromEntries(
	Object.entries( DISPLAY_TO_EMBED_TYPE ).map( ( [ display, type ] ) => [ type, display ] )
) as Readonly< Record< EmbedType, WpDisplay > >;

/** Every display, in the snippet's order (embedTypeList). */
export const WP_DISPLAYS: readonly WpDisplay[] = embedTypeList.map( ( type ) => EMBED_TYPE_TO_DISPLAY[ type.id ] );

/** A stored `display`, read as PHP reads it: empty is `inline`. */
export function wpDisplayOf( raw: unknown, fallback: WpDisplay = 'inline' ): WpDisplay {
	const value = raw === undefined || raw === null || raw === '' ? fallback : String( raw );
	return ( WP_DISPLAYS as readonly string[] ).includes( value ) ? ( value as WpDisplay ) : fallback;
}

/** The largest starting height for "On the page", in px (Razorbooking_Embed::MAX_INLINE_HEIGHT). */
export const INLINE_HEIGHT_MAX = 1600;

/** "Shows", as the Booking form block, the shortcode builder and RazorBooking's Embed dialog offer it. */
export const SHOWS_OPTIONS: readonly { value: EmbedShows; label: string }[] = [
	{ value: 'all', label: 'All services — customers choose' },
	{ value: 'service', label: 'One service' },
	{ value: 'category', label: 'One category' },
];