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><br />
<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /home/u559793476/domains/germanscrews.com/public_html/wp-content/themes/astra/inc/addons/breadcrumbs/class-astra-breadcrumb-trail.php:1) in <b>/home/u559793476/domains/germanscrews.com/public_html/wp-content/plugins/surerank/inc/sitemap/utils.php</b> on line <b>135</b><br />
<br />
<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /home/u559793476/domains/germanscrews.com/public_html/wp-content/themes/astra/inc/addons/breadcrumbs/class-astra-breadcrumb-trail.php:1) in <b>/home/u559793476/domains/germanscrews.com/public_html/wp-content/plugins/surerank/inc/sitemap/utils.php</b> on line <b>135</b><br />
<br />
<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /home/u559793476/domains/germanscrews.com/public_html/wp-content/themes/astra/inc/addons/breadcrumbs/class-astra-breadcrumb-trail.php:1) in <b>/home/u559793476/domains/germanscrews.com/public_html/wp-content/plugins/surerank/inc/sitemap/utils.php</b> on line <b>135</b><br />
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="https://germanscrews.com/sitemap-stylesheet.xsl"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <sitemap>
    <loc>https://germanscrews.com/post-type-page-sitemap-1.xml</loc>
    <lastmod>2026-09-07T23:59:42+00:00</lastmod>
  </sitemap>
  <sitemap>
    <loc>https://germanscrews.com/post-type-post-sitemap-1.xml</loc>
    <lastmod>2026-09-07T23:59:42+00:00</lastmod>
  </sitemap>
  <sitemap>
    <loc>https://germanscrews.com/post-type-sureforms_form-sitemap-1.xml</loc>
    <lastmod>2026-09-07T23:59:42+00:00</lastmod>
  </sitemap>
  <sitemap>
    <loc>https://germanscrews.com/taxonomy-type-category-sitemap-1.xml</loc>
    <lastmod>2026-09-07T23:59:42+00:00</lastmod>
  </sitemap>
</sitemapindex>