<?php
/**
 * Mega menu settings schema.
 *
 * See the wording note in the mobile menu schema: labels are written for
 * someone describing what they want, not for someone who already knows the
 * CSS term for it. `ui.advanced` collapses a property into "Fine tuning".
 *
 * @package MenuVerse
 */

defined( 'ABSPATH' ) || exit;

return array(
	'type'       => 'object',
	'properties' => array(
		'menu'             => array(
			'type'    => 'string',
			'default' => '',
			'pattern' => '^$|^[a-z][a-z0-9_]*:\d+$',
			'ui'      => array(
				'control' => 'menu-picker',
				'group'   => 'general',
				'label'   => __( 'Which menu to show', 'menuverse' ),
				'help'    => __( 'Build a panel below, then attach it to one of this menu’s items under Appearance → Menus.', 'menuverse' ),
			),
		),
		'auto_insert'      => array(
			'type'    => 'boolean',
			'default' => false,
			'ui'      => array(
				'control' => 'toggle',
				'group'   => 'general',
				'label'   => __( 'Show it on every page automatically', 'menuverse' ),
				'help'    => __( 'Most themes already have a menu in the header, so placing this yourself with the block usually gives a better result.', 'menuverse' ),
			),
		),
		'breakpoint'       => array(
			'type'    => 'integer',
			'default' => 782,
			'minimum' => 320,
			'maximum' => 1600,
			'ui'      => array(
				'control' => 'range',
				'group'   => 'general',
				'unit'    => 'px',
				'label'   => __( 'Fold into a stacked list on screens narrower than', 'menuverse' ),
				'help'    => __( 'Big dropdown panels do not fit on a phone, so below this width the menu becomes a simple stacked list.', 'menuverse' ),
			),
		),
		'trigger'          => array(
			'type'    => 'string',
			'default' => 'hover',
			'enum'    => array( 'hover', 'click' ),
			'ui'      => array(
				'control' => 'segmented',
				'group'   => 'behaviour',
				'label'   => __( 'Panels open when someone', 'menuverse' ),
				'help'    => __( 'Either way, clicking and keyboard navigation keep working.', 'menuverse' ),
				'options' => array(
					'hover' => __( 'Points at the item', 'menuverse' ),
					'click' => __( 'Clicks the item', 'menuverse' ),
				),
			),
		),
		'hover_delay'      => array(
			'type'    => 'integer',
			'default' => 120,
			'minimum' => 0,
			'maximum' => 600,
			'ui'      => array(
				'control'  => 'range',
				'group'    => 'behaviour',
				'advanced' => true,
				'unit'     => 'ms',
				'label'    => __( 'Wait before opening', 'menuverse' ),
				'help'     => __( 'Stops panels flashing open as the mouse sweeps across the menu. Measured in thousandths of a second.', 'menuverse' ),
			),
		),
		'close_delay'      => array(
			'type'    => 'integer',
			'default' => 240,
			'minimum' => 0,
			'maximum' => 1200,
			'ui'      => array(
				'control'  => 'range',
				'group'    => 'behaviour',
				'advanced' => true,
				'unit'     => 'ms',
				'label'    => __( 'Wait before closing', 'menuverse' ),
				'help'     => __( 'Gives people time to move diagonally from the menu item down into the panel without it shutting on them.', 'menuverse' ),
			),
		),
		'panel_width'      => array(
			'type'    => 'string',
			'default' => 'contained',
			'enum'    => array( 'contained', 'full' ),
			'ui'      => array(
				'control' => 'segmented',
				'group'   => 'panels',
				'label'   => __( 'How wide the panels are', 'menuverse' ),
				'options' => array(
					'contained' => __( 'Match the page', 'menuverse' ),
					'full'      => __( 'Edge to edge', 'menuverse' ),
				),
			),
		),
		'panel_background' => array(
			'type'    => 'string',
			'format'  => 'color',
			'default' => '',
			'ui'      => array(
				'control' => 'color',
				'group'   => 'panels',
				'label'   => __( 'Panel background', 'menuverse' ),
				'help'    => __( 'Leave empty to inherit your theme’s colours.', 'menuverse' ),
				'token'   => '--menuverse-mega-panel-background',
			),
		),
		'panel_shadow'     => array(
			'type'    => 'boolean',
			'default' => true,
			'ui'      => array(
				'control' => 'toggle',
				'group'   => 'panels',
				'label'   => __( 'Give panels a shadow', 'menuverse' ),
				'help'    => __( 'Makes the panel look like it sits above the page rather than part of it.', 'menuverse' ),
			),
		),
		'panel_max_width'  => array(
			'type'    => 'string',
			'format'  => 'css-size',
			'default' => '1200px',
			'ui'      => array(
				'control'  => 'unit',
				'group'    => 'panels',
				'advanced' => true,
				'label'    => __( 'Never let panel content get wider than', 'menuverse' ),
				'token'    => '--menuverse-mega-max-width',
			),
		),
		'bar_align'        => array(
			'type'    => 'string',
			'default' => 'start',
			'enum'    => array( 'start', 'center', 'end' ),
			'ui'      => array(
				'control' => 'segmented',
				'group'   => 'bar',
				'label'   => __( 'Line the menu items up', 'menuverse' ),
				'options' => array(
					'start'  => __( 'To the start', 'menuverse' ),
					'center' => __( 'In the middle', 'menuverse' ),
					'end'    => __( 'To the end', 'menuverse' ),
				),
			),
		),
		'bar_color'        => array(
			'type'    => 'string',
			'format'  => 'color',
			'default' => '',
			'ui'      => array(
				'control' => 'color',
				'group'   => 'bar',
				'label'   => __( 'Link colour', 'menuverse' ),
				'token'   => '--menuverse-mega-color',
			),
		),
		'bar_active_color' => array(
			'type'    => 'string',
			'format'  => 'color',
			'default' => '',
			'ui'      => array(
				'control' => 'color',
				'group'   => 'bar',
				'label'   => __( 'Colour for the current page', 'menuverse' ),
				'token'   => '--menuverse-mega-active-color',
			),
		),
		'show_arrows'      => array(
			'type'    => 'boolean',
			'default' => true,
			'ui'      => array(
				'control' => 'toggle',
				'group'   => 'bar',
				'label'   => __( 'Small arrow on items that open a panel', 'menuverse' ),
				'help'    => __( 'Tells people there is something more behind that item.', 'menuverse' ),
			),
		),
		'bar_gap'          => array(
			'type'    => 'string',
			'format'  => 'css-size',
			'default' => '24px',
			'ui'      => array(
				'control'  => 'unit',
				'group'    => 'bar',
				'advanced' => true,
				'label'    => __( 'Space between menu items', 'menuverse' ),
				'token'    => '--menuverse-mega-gap',
			),
		),
	),
	'ui'         => array(
		'preview' => array(
			'viewport' => 1280,
		),
		'presets' => array(
			array(
				'id'          => 'classic',
				'label'       => __( 'Classic dropdown', 'menuverse' ),
				'description' => __( 'Panels the width of your page, opening when someone points at an item.', 'menuverse' ),
				'values'      => array(
					'trigger'      => 'hover',
					'panel_width'  => 'contained',
					'panel_shadow' => true,
					'bar_align'    => 'start',
					'show_arrows'  => true,
				),
			),
			array(
				'id'          => 'storefront',
				'label'       => __( 'Wide storefront', 'menuverse' ),
				'description' => __( 'Edge to edge panels with room for lots of links and images. Suits shops.', 'menuverse' ),
				'values'      => array(
					'trigger'         => 'hover',
					'panel_width'     => 'full',
					'panel_max_width' => '1400px',
					'panel_shadow'    => true,
					'bar_align'       => 'center',
					'show_arrows'     => true,
				),
			),
			array(
				'id'          => 'click',
				'label'       => __( 'Click to open', 'menuverse' ),
				'description' => __( 'Panels only open when clicked. Steadier on touchscreens and easier for some visitors.', 'menuverse' ),
				'values'      => array(
					'trigger'      => 'click',
					'panel_width'  => 'contained',
					'panel_shadow' => true,
					'bar_align'    => 'start',
					'show_arrows'  => true,
				),
			),
		),
		'groups'  => array(
			'general'   => array(
				'label'       => __( 'The basics', 'menuverse' ),
				'description' => __( 'Which menu to show, and when it should fold down for small screens.', 'menuverse' ),
				'order'       => 10,
			),
			'behaviour' => array(
				'label' => __( 'Opening and closing', 'menuverse' ),
				'order' => 20,
			),
			'panels'    => array(
				'label'       => __( 'The dropdown panels', 'menuverse' ),
				'description' => __( 'The large area that opens under a menu item. You build its contents further down this page.', 'menuverse' ),
				'order'       => 30,
			),
			'bar'       => array(
				'label' => __( 'The row of menu items', 'menuverse' ),
				'order' => 40,
			),
		),
	),
);
