import React from 'react';
import { getIconsUrl } from './icon-url';

// Utility for setting up option icons with hover states
// This function can be used across all modules that have option buttons with icons

export const setupOptionIcons = () => {
    const root = (window.__WIDEACCESS_SHADOW__ && typeof window.__WIDEACCESS_SHADOW__.querySelectorAll === 'function')
        ? window.__WIDEACCESS_SHADOW__
        : document;
    const iconContainers = root.querySelectorAll('.option-icon-container[data-icon]');
    const iconsUrl = getIconsUrl();
    if (!iconsUrl) return;

    iconContainers.forEach(container => {
        const iconName = container.getAttribute('data-icon');
        if (iconName) {
            const iconUrl = `url("${iconsUrl}/${iconName}.svg")`;
            // Set normal state - icons remain the same on hover
            container.style.backgroundImage = iconUrl;
            // Also set mask properties for active state
            container.style.webkitMask = iconUrl;
            container.style.webkitMaskSize = 'contain';
            container.style.webkitMaskRepeat = 'no-repeat';
            container.style.webkitMaskPosition = 'center';
            container.style.mask = iconUrl;
            container.style.maskSize = 'contain';
            container.style.maskRepeat = 'no-repeat';
            container.style.maskPosition = 'center';
        }
    });
};

// Function to add icon to any option button
export const addOptionIcon = (iconName) => {
    return (
        <div
            className="option-icon-container"
            data-icon={iconName}
        ></div>
    );
};