/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: NL (Dutch; Nederlands, Vlaams)
 */
(function($) {
	$.extend(
		$.validator.messages,
		{
			required: "Dit is een verplicht veld.",
			remote: "Controleer dit veld.",
			email: "Vul hier een geldig e-mailadres in.",
			url: "Vul hier een geldige URL in.",
			date: "Vul hier een geldige datum in.",
			dateISO: "Vul hier een geldige datum in (ISO-formaat).",
			number: "Vul hier een geldig getal in.",
			digits: "Vul hier alleen getallen in.",
			creditcard: "Vul hier een geldig creditcardnummer in.",
			equalTo: "Vul hier dezelfde waarde in.",
			accept: "Vul hier een waarde in met een geldige extensie.",
			maxlength: $.validator.format( "Vul hier maximaal {0} tekens in." ),
			minlength: $.validator.format( "Vul hier minimaal {0} tekens in." ),
			rangelength: $.validator.format( "Vul hier een waarde in van minimaal {0} en maximaal {1} tekens." ),
			range: $.validator.format( "Vul hier een waarde in van minimaal {0} en maximaal {1}." ),
			max: $.validator.format( "Vul hier een waarde in kleiner dan of gelijk aan {0}." ),
			min: $.validator.format( "Vul hier een waarde in groter dan of gelijk aan {0}." ),
			maxWords: $.validator.format( "Vul hier {0} woorden of minder." ),
			minWords: $.validator.format( "Vul hier minimaal {0} woorden." ),
			rangeWords: $.validator.format( "Vul hier tussen {0} en {1} woorden." ),
			alphanumeric: "Letters, cijfers, en onderstreept alleen maar te behagen",
			lettersonly: "Brieven slechts tevreden",
			nowhitespace: "Geen witte ruimte alsjeblieft",
			phone: 'Vul een geldig telefoonnummer. De meeste VS / Canada en internationale formats geaccepteerd. ',
			ipv4: 'Vul een geldig IP v4 adres.',
			ipv6: 'Vul een geldig IP v6 adres.',
			ziprange: 'Uw postcode moet in het bereik 902xx-xxxx zijn om 905-xx-xxxx',
			zipcodeUS: 'De opgegeven US postcode is ongeldig',
			integer: 'Een positieve of negatieve niet-decimaal getal aub',
			vfbUsername: 'Deze gebruikersnaam is al geregistreerd. Kies een andere naam'
		}
	);
}(jQuery));
import Alert from '@elementor/ui/Alert';
import Box from '@elementor/ui/Box';
import Card from '@elementor/ui/Card';
import CardContent from '@elementor/ui/CardContent';
import CardHeader from '@elementor/ui/CardHeader';
import Divider from '@elementor/ui/Divider';
import List from '@elementor/ui/List';
import ListItem from '@elementor/ui/ListItem';
import ListItemText from '@elementor/ui/ListItemText';
import Typography from '@elementor/ui/Typography';
import { styled } from '@elementor/ui/styles';
import { CapabilitiesItem } from '@ea11y/components';
import { useSettings, useStorage } from '@ea11y/hooks';
import { LogoSettings } from '@ea11y/layouts';
import { useEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { MENU_SETTINGS } from '../constants/menu-settings';

const StyledCardContent = styled(CardContent)`
	height: 55vh;
	overflow: auto;
	margin-bottom: ${({ theme }) => theme.spacing(2)};
	padding: 0 ${({ theme }) => theme.spacing(2)};
`;

const MenuSettings = () => {
	const {
		widgetMenuSettings,
		hideMinimumOptionAlert,
		setHideMinimumOptionAlert,
	} = useSettings();
	const [disableOptions, setDisableOptions] = useState(false);
	const { save } = useStorage();

	useEffect(() => {
		if (!areAtLeastTwoOptionsEnabled(widgetMenuSettings)) {
			setDisableOptions(true);
		} else {
			setDisableOptions(false);

			save({ a11y_hide_minimum_active_options_alert: false }).then(() => {
				setHideMinimumOptionAlert(false);
			});
		}
	}, [widgetMenuSettings]);

	/**
	 * Check if at least two options are enabled.
	 * @param {Object} settings - widget menu settings.
	 * @return {boolean} true if at least two options are enabled.
	 */
	const areAtLeastTwoOptionsEnabled = (settings) => {
		const enabled = Object.keys(settings)?.filter(
			(key) => settings[key].enabled,
		);
		return enabled.length > 2;
	};

	/**
	 * Close minimum option notification.
	 */
	const handleCloseNotification = () => {
		save({ a11y_hide_minimum_active_options_alert: true }).then(() => {
			setHideMinimumOptionAlert(true);
		});
	};

	const sectionsCount = Object.entries(MENU_SETTINGS).length;

	return (
		<Box display="flex" flexDirection="column" gap={2}>
			<Card variant="outlined">
				<CardHeader
					title={__('Feature Menu', 'pojo-accessibility')}
					subheader={
						<Typography variant="body2">
							{__(
								'Choose which accessibility features and capabilities you want to include.',
								'pojo-accessibility',
							)}
						</Typography>
					}
				/>

				{disableOptions && !hideMinimumOptionAlert && (
					<Alert
						severity="info"
						sx={{ m: 2 }}
						onClose={handleCloseNotification}
					>
						{__('At least two option must remain active', 'pojo-accessibility')}
					</Alert>
				)}

				<StyledCardContent>
					<List as="div">
						{Object.entries(MENU_SETTINGS).map(([parentKey, parentItem], i) => {
							return (
								<Box key={parentKey}>
									<ListItem as="div" disableGutters>
										<ListItemText sx={{ textAlign: 'start' }}>
											<Typography variant="subtitle2">
												{parentItem.title}
											</Typography>
										</ListItemText>
									</ListItem>

									{parentItem.options &&
										Object.entries(parentItem.options).map(
											([childKey, childValue]) => {
												return (
													<CapabilitiesItem
														key={childKey}
														childKey={childKey}
														childValue={childValue}
														parentKey={parentKey}
														disableOptions={disableOptions}
													/>
												);
											},
										)}

									{i + 1 < sectionsCount && <Divider sx={{ my: 2 }} />}
								</Box>
							);
						})}
					</List>
				</StyledCardContent>
			</Card>
			<LogoSettings />
		</Box>
	);
};

export default MenuSettings;
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2304 1792"><path d="M1597 903q0 69-21 106-19 35-52 35-23 0-41-9v-224q29-30 57-30 57 0 57 122zm438-36h-110q6-98 56-98 51 0 54 98zm-1559 135q0-59-33-91.5t-101-57.5q-36-13-52-24t-16-25q0-26 38-26 58 0 124 33l18-112q-67-32-149-32-77 0-123 38-48 39-48 109 0 58 32.5 90.5t99.5 56.5q39 14 54.5 25.5t15.5 27.5q0 31-48 31-29 0-70-12.5t-72-30.5l-18 113q72 41 168 41 81 0 129-37 51-41 51-117zm295-215l19-111h-96v-135l-129 21-18 114-46 8-17 103h62v219q0 84 44 120 38 30 111 30 32 0 79-11v-118q-32 7-44 7-42 0-42-50v-197h77zm316 25v-139q-15-3-28-3-32 0-55.5 16t-33.5 46l-10-56h-131v471h150v-306q26-31 82-31 16 0 26 2zm37 335h150v-471h-150v471zm622-249q0-122-45-179-40-52-111-52-64 0-117 56l-8-47h-132v645l150-25v-151q36 11 68 11 83 0 134-56 61-65 61-202zm-468-348q0-33-23-56t-56-23-56 23-23 56 23 56.5 56 23.5 56-23.5 23-56.5zm898 357q0-113-48-176-50-64-144-64-96 0-151.5 66t-55.5 180q0 128 63 188 55 55 161 55 101 0 160-40l-16-103q-57 31-128 31-43 0-63-19-23-19-28-66h248q2-14 2-52zm128-651v1280q0 52-38 90t-90 38h-2048q-52 0-90-38t-38-90v-1280q0-52 38-90t90-38h2048q52 0 90 38t38 90z"/></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"><path fill="#d52b1e" d="M0 0v600h800V0z"/><path stroke="#009b48" stroke-width="80.1" d="m-13 10 824 578m0-578L-13 588"/><path stroke="#fff" stroke-width="80.1" d="M400 0v600M0 300h800"/></svg>XML-RPC server accepts POST requests only.