import React from "react";
import {
    clearAllColorEffects
} from "../effects/color-filters";
import {resetHideImages} from "../effects/hide-media";
import {resetFocusTunnel} from "../effects/focus-tunnel";
import {disableHighlightedLinks} from "../effects/highlighted-links";
import {disableBigBlackCursor} from "../effects/big-black-cursor";
import {disableBigWhiteCursor} from "../effects/big-white-cursor";
import {disableTextAlignment} from "../effects/text-alignment";
import {applyFontSize} from "../effects/text-effects";
import {clearStorage, setStorageValue} from "../storage";
import {
    READABLE_FONT_PREF,
    TEXT_LINE_HEIGHT_PREF,
    TEXT_SIZE_PREF,
    TEXT_SPACING_PREF,
} from "../constants";
import {useWidget} from "../context/WidgetContext";
import { t } from "../translations";
import { isOptionEnabled } from "../config/widget-config";


export default function ResetModule() {

    const {currentFontSizeMultiplier, setCurrentFontSizeMultiplier} = useWidget();
    const {readableFont, setReadableFont} = useWidget();
    const {currentSpacing, setCurrentSpacing} = useWidget();
    const {currentLineHeight, setCurrentLineHeight} = useWidget();
    const {isMediaHidden, setMediaHidden} = useWidget();
    const {originalMediaStyles, setOriginalMediaStyles} = useWidget();
    const {focusTunnelContainer, setFocusTunnelContainer} = useWidget();
    const {setFocusTunnelActive} = useWidget();
    const {svgFilterElement, setSvgFilterElement} = useWidget();
    const {isMonochromeMode, setMonochromeMode} = useWidget();
    const {isLowSaturationMode, setLowSaturationMode} = useWidget();
    const {isHighSaturationMode, setHighSaturationMode} = useWidget();
    const {isHighContrastMode, setHighContrastMode} = useWidget();
    const {isBigBlackCursorEnabled, setBigBlackCursorEnabled} = useWidget();
    const {isBigWhiteCursorEnabled, setBigWhiteCursorEnabled} = useWidget();
    const {textAlignment, setTextAlignment} = useWidget();
    const {currentLanguage} = useWidget();
    const {isLinksHighlighted, setLinksHighlighted} = useWidget();


    function resetTextEffects() {

        applyFontSize(currentFontSizeMultiplier, 1, setCurrentFontSizeMultiplier);
        setReadableFont(false);

        const textElements = document.querySelectorAll('*');
        textElements.forEach(element => {
            // Skip widget elements
            if (element.classList.contains('wideaccess-widget-panel') ||
                element.classList.contains('wideaccess-widget-toggle') ||
                element.closest('.wideaccess-widget-panel')) {
                return;
            }
            element.style.lineHeight = "";
            element.style.letterSpacing = "";
            element.classList.remove("readable-font")
        });

        setStorageValue(TEXT_SPACING_PREF, false)
        setStorageValue(TEXT_LINE_HEIGHT_PREF, 1)

        setCurrentSpacing(0);
        setCurrentLineHeight(1);


        // Reset text alignment
        if (textAlignment !== 'none') {
            disableTextAlignment(setTextAlignment);
        }

    }

    return (
        isOptionEnabled('resetAllSettings') && (
            <button className="wideaccess-reset-button" onClick={() => {
                resetTextEffects();
                resetHideImages(isMediaHidden, setMediaHidden, originalMediaStyles, setOriginalMediaStyles);
                resetFocusTunnel(focusTunnelContainer, setFocusTunnelContainer);
                setFocusTunnelActive(false);

                clearAllColorEffects(svgFilterElement, setSvgFilterElement, setMonochromeMode, setLowSaturationMode, setHighSaturationMode, setHighContrastMode);

                disableHighlightedLinks();
                if (isLinksHighlighted) setLinksHighlighted(false);
                disableBigBlackCursor(setBigBlackCursorEnabled);
                disableBigWhiteCursor(setBigWhiteCursorEnabled);

                // Clear all preferences using the new storage system
                clearStorage();
            }}>{t('resetAllSettings', currentLanguage)}</button>
        )
    );
}