import getXPath from 'get-xpath';
import PropTypes from 'prop-types';
import { mixpanelEvents, mixpanelService } from '@ea11y-apps/global/services';
import {
	isValidCSS,
	rgbOrRgbaToHex,
} from '@ea11y-apps/global/utils/color-contrast-helpers';
import { APIScanner } from '@ea11y-apps/scanner/api/APIScanner';
import {
	BACKGROUND_ELEMENT_CLASS,
	BLOCKS,
} from '@ea11y-apps/scanner/constants';
import { useScannerWizardContext } from '@ea11y-apps/scanner/context/scanner-wizard-context';
import { scannerItem } from '@ea11y-apps/scanner/types/scanner-item';
import { buildPathToParent } from '@ea11y-apps/scanner/utils/build-path-to-parent';
import {
	focusOnElement,
	removeExistingFocus,
} from '@ea11y-apps/scanner/utils/focus-on-element';
import { getElementByXPath } from '@ea11y-apps/scanner/utils/get-element-by-xpath';
import { getElementCSSSelector } from '@ea11y-apps/scanner/utils/get-element-css-selector';
import { getOuterHtmlByXpath } from '@ea11y-apps/scanner/utils/get-outer-html-by-xpath';
import { useEffect, useRef, useState } from '@wordpress/element';

export const useColorContrastForm = ({ item, current, setCurrent }) => {
	const {
		colorContrastData,
		resolved: resolvedBlock,
		setResolved,
		isResolved,
		isManage,
		setOpenedBlock,
		setColorContrastData,
		setIsManageChanged,
		updateRemediationList,
		currentScanId,
	} = useScannerWizardContext();

	const type = isManage ? 'manage' : 'main';

	const [loading, setLoading] = useState(false);
	const [firstOpen, setFirstOpen] = useState(true);
	const [parentChanged, setParentChanged] = useState(false);

	const isGlobal =
		colorContrastData?.[type]?.[current]?.isGlobal || item.global || false;

	const isGlobalRef = useRef(null);

	useEffect(() => {
		if (item?.node) {
			isGlobalRef.current = isGlobal;
		}
	}, [current]);

	const setIsGlobal = (value) => {
		updateData({
			isGlobal: value,
		});
	};

	const updateData = (data) => {
		const updData = [...colorContrastData?.[type]];
		updData[current] = {
			...(colorContrastData?.[type]?.[current] || {}),
			...data,
		};
		setColorContrastData({
			...colorContrastData,
			[type]: updData,
		});

		if (data.color || data.background) {
			const rule = buildCSSRule(updData[current]);
			updateCSS(rule);
		}
	};

	const sendEvent = (method) => {
		mixpanelService.sendEvent(mixpanelEvents.backgroundAdaptorChanged, {
			method,
		});
	};

	useEffect(() => {
		if (!isManage && !firstOpen && isResolved(BLOCKS.colorContrast)) {
			removeExistingFocus();
			setOpenedBlock(BLOCKS.main);
		}
		setFirstOpen(false);
	}, [isResolved(BLOCKS.colorContrast)]);

	const {
		color = item.messageArgs[3] ||
			rgbOrRgbaToHex(
				window.getComputedStyle(item.node).getPropertyValue('color'),
			),
		background = item.messageArgs[4],
		parents = item.isEdit
			? buildPathToParent(item.node, item.parentNode)
			: [item.path.dom],
		resolved = false,
		backgroundChanged = item.isEdit,
	} = colorContrastData[type]?.[current] || {};

	useEffect(() => {
		if (isManage && parentChanged) {
			const styles = document.getElementById('ea11y-remediation-styles');
			if (styles) {
				styles.innerHTML = styles.innerHTML.replace(item.data.rule, '');
			}
		}
	}, [parentChanged]);

	const changeColor = (updColor) => {
		updateData({ color: updColor, resolved: false });
	};

	const changeBackground = (updBackground) => {
		const element = getElementByXPath(parents.at(-1));
		if (!element) {
			return;
		}

		updateData({
			background: updBackground,
			resolved: false,
			backgroundChanged: true,
		});
	};

	const setParentLarger = () => {
		const element = getElementByXPath(parents.at(-1));
		const parent = element?.parentElement;
		if (!element || !parent) {
			return;
		}

		try {
			const xpath = getXPath(parent, { ignoreId: true });
			focusOnElement(parent, BACKGROUND_ELEMENT_CLASS);
			updateData({
				parents: [...parents, xpath],
				resolved: false,
			});
			setParentChanged(true);
			sendEvent('plus');
		} catch (error) {
			console.warn('Failed to get XPath for parent element:', error);
		}
	};

	const setParentSmaller = () => {
		const newParents = parents.slice(0, -1);
		const nextElement = getElementByXPath(newParents.at(-1));
		if (parents.length <= 1 || !nextElement) {
			return;
		}

		if (newParents.length > 1) {
			focusOnElement(nextElement, BACKGROUND_ELEMENT_CLASS);
		} else {
			removeExistingFocus(BACKGROUND_ELEMENT_CLASS);
		}

		updateData({ parents: newParents, resolved: false });
		setParentChanged(true);
		sendEvent('minus');
	};

	const isValidHexColor = (str) =>
		/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(str.trim());

	const buildCSSRule = (data) => {
		const currentParents = data.parents || parents;
		const currentParent =
			currentParents.length > 0 ? currentParents.at(-1) : item.path.dom;

		if (
			(data.color && !isValidHexColor(data.color)) ||
			(data.background && !isValidHexColor(data.background))
		) {
			throw new Error('Invalid hex color input detected');
		}

		try {
			const bgElement = getElementByXPath(currentParent);
			const colorSelector = getElementCSSSelector(item.node);
			const bgSelector = getElementCSSSelector(bgElement);

			const colorRule = data.color
				? `${colorSelector} {color: ${data.color} !important;}`
				: '';

			const bgRule = data.background
				? `${bgSelector} {background-color: ${data.background} !important;}`
				: '';

			const css = `${colorRule}${bgRule}`;

			return isValidCSS(css) ? css : '';
		} catch (e) {
			console.warn('Failed to convert XPath to CSS selector', e);
			return '';
		}
	};

	const updateCSS = (rule) => {
		let styles = document.getElementById('ea11y-remediation-styles-edit');
		if (!styles) {
			styles = document.createElement('style');
			styles.id = 'ea11y-remediation-styles-edit';
			document.body.appendChild(styles);
		}
		styles.innerHTML = rule;
	};

	const onUpdate = async () => {
		const rule = buildCSSRule(colorContrastData?.[type]?.[current]);
		const find = getOuterHtmlByXpath(item.path.dom);
		const parentXPath = parents.length > 0 ? parents.at(-1) : null;
		const parentFind = getOuterHtmlByXpath(parentXPath);

		try {
			setLoading(true);
			const remediation = colorContrastData?.[type]?.[current]?.remediation;
			const id = item.id || remediation.id;
			const data = item.data || JSON.parse(remediation.content);
			const updContent = JSON.stringify({
				...data,
				rule,
				find,
				parentFind,
				parentXPath,
			});
			await APIScanner.updateRemediationContent({
				url: window?.ea11yScannerData?.pageData?.url,
				id,
				content: updContent,
				global: isGlobal,
			});

			setIsManageChanged(true);
			removeExistingFocus();
			setParentChanged(false);
			updateCSS(rule);
			isGlobalRef.current = isGlobal;
			void updateRemediationList();
		} catch (e) {
			console.error(e);
		} finally {
			setLoading(false);
		}
	};

	const onSubmit = async () => {
		const parentXPath = parents.length > 0 ? parents.at(-1) : null;
		const parentFind = getOuterHtmlByXpath(parentXPath);
		setLoading(true);
		try {
			const rule = buildCSSRule(colorContrastData?.[type]?.[current]);
			const response = await APIScanner.submitRemediation({
				url: window?.ea11yScannerData?.pageData?.url,
				remediation: {
					rule,
					category: item.reasonCategory.match(/\((AAA?|AA?|A)\)/)?.[1] || '',
					type: 'STYLES',
					xpath: item.path.dom,
					find: item.snippet,
					parentFind,
					parentXPath,
				},
				global: isGlobal,
				rule: item.ruleId,
				group: BLOCKS.colorContrast,
			});

			await APIScanner.resolveIssue(currentScanId);

			updateData({ remediation: response.remediation, resolved: true });

			removeExistingFocus();
			setCurrent(current + 1);
			setResolved(resolvedBlock + 1);
			setParentChanged(false);
			updateCSS(rule);
			isGlobalRef.current = isGlobal;
			void updateRemediationList();
		} catch (error) {
			console.error('Failed to submit remediation:', error);
		} finally {
			setLoading(false);
		}
	};

	const isDisabled =
		resolved &&
		colorContrastData?.[type]?.[current]?.isGlobal === isGlobalRef.current;

	return {
		isGlobal,
		setIsGlobal,
		color,
		background,
		parents,
		isDisabled,
		resolved,
		backgroundChanged,
		parentChanged,
		loading,
		changeColor,
		changeBackground,
		setParentLarger,
		setParentSmaller,
		onSubmit,
		onUpdate,
	};
};

useColorContrastForm.propTypes = {
	item: scannerItem.isRequired,
	current: PropTypes.number.isRequired,
	setCurrent: PropTypes.func.isRequired,
};
<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Quần &#8211; EM SANG Boutique &#8211; Thương hiệu thời trang nữ phong cách đa dạng với hàng nghìn mẫu thiết kế</title>
	<atom:link href="https://emsang.vn/danh-muc/quan/feed/" rel="self" type="application/rss+xml" />
	<link>https://emsang.vn</link>
	<description>Thương hiệu thời trang nữ phong cách đa dạng với hàng nghìn mẫu thiết kế</description>
	<lastBuildDate>Fri, 12 Sep 2025 01:41:43 +0000</lastBuildDate>
	<language>vi</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0</generator>

<image>
	<url>https://emsang.vn/wp-content/uploads/2024/07/cropped-favicon-32x32.png</url>
	<title>Quần &#8211; EM SANG Boutique &#8211; Thương hiệu thời trang nữ phong cách đa dạng với hàng nghìn mẫu thiết kế</title>
	<link>https://emsang.vn</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Áo thun Zipper và quần Kaki &#8211; Hot Item</title>
		<link>https://emsang.vn/san-pham/ao-thun-zipper-va-quan-kaki-hot-item/</link>
					<comments>https://emsang.vn/san-pham/ao-thun-zipper-va-quan-kaki-hot-item/#respond</comments>
		
		<dc:creator><![CDATA[ketritsg]]></dc:creator>
		<pubDate>Wed, 25 Jun 2025 16:21:11 +0000</pubDate>
				<guid isPermaLink="false">https://emsang.vn/?post_type=product&#038;p=3814</guid>

					<description><![CDATA[Sự kết hợp của 2 items tối giản, áo thun gân mát mịn và quần kaki form đứng che khuyết điểm chân, tạo nên diện mạo thanh lịch nhưng thoải mái trong mọi khoảnh khắc. Chất liệu: Thun cotton 2 chiều Màu sắc: Nâu Size: S, M, L]]></description>
										<content:encoded><![CDATA[<div dir="auto">Sự kết hợp của 2 items tối giản, áo thun gân mát mịn và quần kaki form đứng che khuyết điểm chân, tạo nên diện mạo thanh lịch nhưng thoải mái trong mọi khoảnh khắc.</div>
<div dir="auto">Chất liệu: Thun cotton 2 chiều</div>
<div dir="auto">Màu sắc: Nâu</div>
<div dir="auto">Size: S, M, L</div>
]]></content:encoded>
					
					<wfw:commentRss>https://emsang.vn/san-pham/ao-thun-zipper-va-quan-kaki-hot-item/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Quần Short Jeans 15011675</title>
		<link>https://emsang.vn/san-pham/quan-short-jeans-15011675/</link>
					<comments>https://emsang.vn/san-pham/quan-short-jeans-15011675/#respond</comments>
		
		<dc:creator><![CDATA[TRẦN THỊ NGỌC SƯƠNG]]></dc:creator>
		<pubDate>Wed, 26 Mar 2025 16:27:28 +0000</pubDate>
				<guid isPermaLink="false">https://emsang.vn/?post_type=product&#038;p=3743</guid>

					<description><![CDATA[]]></description>
										<content:encoded><![CDATA[]]></content:encoded>
					
					<wfw:commentRss>https://emsang.vn/san-pham/quan-short-jeans-15011675/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Jean Ống Rộng 10611656</title>
		<link>https://emsang.vn/san-pham/jean-ong-rong-10611656/</link>
					<comments>https://emsang.vn/san-pham/jean-ong-rong-10611656/#respond</comments>
		
		<dc:creator><![CDATA[TRẦN THỊ NGỌC SƯƠNG]]></dc:creator>
		<pubDate>Wed, 26 Mar 2025 16:12:20 +0000</pubDate>
				<guid isPermaLink="false">https://emsang.vn/?post_type=product&#038;p=3726</guid>

					<description><![CDATA[]]></description>
										<content:encoded><![CDATA[]]></content:encoded>
					
					<wfw:commentRss>https://emsang.vn/san-pham/jean-ong-rong-10611656/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Quần Short Váy 15011441</title>
		<link>https://emsang.vn/san-pham/quan-short-vay-15011441/</link>
					<comments>https://emsang.vn/san-pham/quan-short-vay-15011441/#respond</comments>
		
		<dc:creator><![CDATA[TRẦN THỊ NGỌC SƯƠNG]]></dc:creator>
		<pubDate>Mon, 30 Dec 2024 06:50:26 +0000</pubDate>
				<guid isPermaLink="false">https://emsang.vn/?post_type=product&#038;p=3485</guid>

					<description><![CDATA[]]></description>
										<content:encoded><![CDATA[]]></content:encoded>
					
					<wfw:commentRss>https://emsang.vn/san-pham/quan-short-vay-15011441/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Quần Thun Ống Rộng 19211417</title>
		<link>https://emsang.vn/san-pham/quan-thun-ong-rong-19211417/</link>
					<comments>https://emsang.vn/san-pham/quan-thun-ong-rong-19211417/#respond</comments>
		
		<dc:creator><![CDATA[TRẦN THỊ NGỌC SƯƠNG]]></dc:creator>
		<pubDate>Mon, 30 Dec 2024 06:18:46 +0000</pubDate>
				<guid isPermaLink="false">https://emsang.vn/?post_type=product&#038;p=3461</guid>

					<description><![CDATA[]]></description>
										<content:encoded><![CDATA[]]></content:encoded>
					
					<wfw:commentRss>https://emsang.vn/san-pham/quan-thun-ong-rong-19211417/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Quần Ống Rộng 19211416</title>
		<link>https://emsang.vn/san-pham/quan-ong-rong-19211416/</link>
					<comments>https://emsang.vn/san-pham/quan-ong-rong-19211416/#respond</comments>
		
		<dc:creator><![CDATA[TRẦN THỊ NGỌC SƯƠNG]]></dc:creator>
		<pubDate>Mon, 30 Dec 2024 06:15:57 +0000</pubDate>
				<guid isPermaLink="false">https://emsang.vn/?post_type=product&#038;p=3443</guid>

					<description><![CDATA[]]></description>
										<content:encoded><![CDATA[]]></content:encoded>
					
					<wfw:commentRss>https://emsang.vn/san-pham/quan-ong-rong-19211416/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Quần Short Jean 15010798</title>
		<link>https://emsang.vn/san-pham/quan-short-jean-15010798/</link>
					<comments>https://emsang.vn/san-pham/quan-short-jean-15010798/#respond</comments>
		
		<dc:creator><![CDATA[TRẦN THỊ NGỌC SƯƠNG]]></dc:creator>
		<pubDate>Wed, 30 Oct 2024 15:20:42 +0000</pubDate>
				<guid isPermaLink="false">https://emsang.vn/?post_type=product&#038;p=1946</guid>

					<description><![CDATA[]]></description>
										<content:encoded><![CDATA[]]></content:encoded>
					
					<wfw:commentRss>https://emsang.vn/san-pham/quan-short-jean-15010798/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Quần Ống Loe 19011124</title>
		<link>https://emsang.vn/san-pham/quan-ong-loe-19011124/</link>
					<comments>https://emsang.vn/san-pham/quan-ong-loe-19011124/#respond</comments>
		
		<dc:creator><![CDATA[TRẦN THỊ NGỌC SƯƠNG]]></dc:creator>
		<pubDate>Tue, 29 Oct 2024 16:37:37 +0000</pubDate>
				<guid isPermaLink="false">https://emsang.vn/?post_type=product&#038;p=1916</guid>

					<description><![CDATA[]]></description>
										<content:encoded><![CDATA[]]></content:encoded>
					
					<wfw:commentRss>https://emsang.vn/san-pham/quan-ong-loe-19011124/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Quần Thun Ống Rộng 19011122</title>
		<link>https://emsang.vn/san-pham/quan-thun-ong-rong-19011122/</link>
					<comments>https://emsang.vn/san-pham/quan-thun-ong-rong-19011122/#respond</comments>
		
		<dc:creator><![CDATA[TRẦN THỊ NGỌC SƯƠNG]]></dc:creator>
		<pubDate>Mon, 28 Oct 2024 14:17:45 +0000</pubDate>
				<guid isPermaLink="false">https://emsang.vn/?post_type=product&#038;p=1875</guid>

					<description><![CDATA[]]></description>
										<content:encoded><![CDATA[]]></content:encoded>
					
					<wfw:commentRss>https://emsang.vn/san-pham/quan-thun-ong-rong-19011122/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Jean Ống Suông 11109688</title>
		<link>https://emsang.vn/san-pham/jean-ong-suong-11109688/</link>
					<comments>https://emsang.vn/san-pham/jean-ong-suong-11109688/#respond</comments>
		
		<dc:creator><![CDATA[Admin]]></dc:creator>
		<pubDate>Thu, 19 Sep 2024 06:57:51 +0000</pubDate>
				<guid isPermaLink="false">https://emsang.vn/?post_type=product&#038;p=1420</guid>

					<description><![CDATA[]]></description>
										<content:encoded><![CDATA[]]></content:encoded>
					
					<wfw:commentRss>https://emsang.vn/san-pham/jean-ong-suong-11109688/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>