import {
	ColorBurgundy900,
	ColorPink400,
	ColorBlue700,
	ColorBlue500,
	ColorGreen700,
	ColorGreen500,
	ColorCyan400,
} from '@elementor/design-tokens/primitives';
import AlignLeftIcon from '@elementor/icons/AlignLeftIcon';
import LinkIcon from '@elementor/icons/LinkIcon';
import WorldIcon from '@elementor/icons/WorldIcon';
import ContrastIcon from '@ea11y/icons/contrast';
import FocusIcon from '@ea11y/icons/focus-icon';
import GrayscaleIcon from '@ea11y/icons/graysacale';
import HideImagesIcon from '@ea11y/icons/hide-images';
import HideWidgetIcon from '@ea11y/icons/hide-widget-icon';
import LineHeightIcon from '@ea11y/icons/line-height';
import PageStructureIcon from '@ea11y/icons/page-structure';
import PauseAnimationsIcon from '@ea11y/icons/pause-animations';
import ReadableFontIcon from '@ea11y/icons/readable-font';
import ReadingPanelIcon from '@ea11y/icons/reading-panel';
import ScreenReaderIcon from '@ea11y/icons/screen-reader-icon';
import SitemapIcon from '@ea11y/icons/sitemap-icon';
import StatementIcon from '@ea11y/icons/statement-icon';
import TextSizeIcon from '@ea11y/icons/text-size';
import { __ } from '@wordpress/i18n';

export const SKELETON_OPTIONS = Object.freeze({
	SPEED: 2,
	FOREGROUND_COLOR: '#D9D9D9',
});

export const WIDGET_PREVIEW_ID = 'ea11y-widget-preview--container';
export const WIDGET_PREVIEW_ROOT = 'ea11y-root';

// As a standard structure use - in feature names.
export const PRO_FEATURES = {
	REMOVE_BRANDING: 'remove-elementor-label',
};

export const ICON_STYLE = { color: 'black' };

export const TABLE_PER_PAGE = 10;

export const FEATURE_MAPPER = {
	'bigger-text': {
		title: __('Bigger text', 'pojo-accessibility'),
		chartsTitle: __('Bigger text', 'pojo-accessibility'),
		icon: <TextSizeIcon sx={ICON_STYLE} />,
	},
	'bigger-line-height': {
		title: __('Bigger line height', 'pojo-accessibility'),
		chartsTitle: __('Bigger line height', 'pojo-accessibility'),
		icon: <LineHeightIcon sx={ICON_STYLE} />,
	},
	'text-align': {
		title: __('Text align', 'pojo-accessibility'),
		chartsTitle: __('Align text', 'pojo-accessibility'),
		icon: <AlignLeftIcon sx={ICON_STYLE} />,
	},
	'readable-font': {
		title: __('Readable font', 'pojo-accessibility'),
		chartsTitle: __('Readable font', 'pojo-accessibility'),
		icon: <ReadableFontIcon sx={ICON_STYLE} />,
	},
	grayscale: {
		title: __('Greyscale', 'pojo-accessibility'),
		chartsTitle: __('Greyscale', 'pojo-accessibility'),
		icon: <GrayscaleIcon sx={ICON_STYLE} />,
	},
	contrast: {
		title: __('Contrast', 'pojo-accessibility'),
		chartsTitle: __('Contrast', 'pojo-accessibility'),
		icon: <ContrastIcon sx={ICON_STYLE} />,
	},
	'page-structure': {
		title: __('Page structure', 'pojo-accessibility'),
		chartsTitle: __('Page structure', 'pojo-accessibility'),
		icon: <PageStructureIcon sx={ICON_STYLE} />,
	},
	sitemap: {
		title: __('Sitemap', 'pojo-accessibility'),
		chartsTitle: __('Sitemap', 'pojo-accessibility'),
		icon: <SitemapIcon sx={ICON_STYLE} />,
	},
	'reading-mask': {
		title: __('Reading mask', 'pojo-accessibility'),
		chartsTitle: __('Reading mask', 'pojo-accessibility'),
		icon: <ReadingPanelIcon sx={ICON_STYLE} />,
	},
	'hide-images': {
		title: __('Hide images', 'pojo-accessibility'),
		chartsTitle: __('Hide images', 'pojo-accessibility'),
		icon: <HideImagesIcon sx={ICON_STYLE} />,
	},
	'pause-animations': {
		title: __('Pause animations', 'pojo-accessibility'),
		chartsTitle: __('Pause animations', 'pojo-accessibility'),
		icon: <PauseAnimationsIcon sx={ICON_STYLE} />,
	},
	'highlight-links': {
		title: __('Highlight links', 'pojo-accessibility'),
		chartsTitle: __('Highlight links', 'pojo-accessibility'),
		icon: <LinkIcon sx={ICON_STYLE} />,
	},
	'focus-outline': {
		title: __('Outline focus', 'pojo-accessibility'),
		chartsTitle: __('Outline focus', 'pojo-accessibility'),
		icon: <FocusIcon sx={ICON_STYLE} />,
	},
	'hide-widget': {
		title: __('Hide widget', 'pojo-accessibility'),
		chartsTitle: __('Hide widget', 'pojo-accessibility'),
		icon: <HideWidgetIcon />,
	},
	statement: {
		title: __('Statement', 'pojo-accessibility'),
		chartsTitle: __('Statement', 'pojo-accessibility'),
		icon: <StatementIcon />,
	},
	'screen-reader': {
		title: __('Screen reader', 'pojo-accessibility'),
		chartsTitle: __('Screen reader', 'pojo-accessibility'),
		icon: <ScreenReaderIcon />,
		pro: true,
	},
	'language-selector': {
		title: __('Language selector', 'pojo-accessibility'),
		chartsTitle: __('Language selector', 'pojo-accessibility'),
		icon: <WorldIcon sx={ICON_STYLE} />,
		pro: true,
	},
	other: {
		title: __('Other', 'pojo-accessibility'),
		chartsTitle: __('Other', 'pojo-accessibility'),
	},
};

export const CHARTS_COLORS = [
	ColorBurgundy900,
	ColorPink400,
	ColorBlue700,
	ColorBlue500,
	ColorGreen700,
	ColorGreen500,
	ColorCyan400,
];
