import React, { useEffect } from "react";
import {
    toggleHighContrastTheme,
    toggleMonochromeTheme,
    toggleLowSaturationTheme,
    toggleHighSaturationTheme
} from "../effects/color-filters";
import {toggleHideMedia} from "../effects/hide-media";
import {useWidget} from "../context/WidgetContext";
import { t } from "../translations";
import { isOptionEnabled } from "../config/widget-config";
import { setupOptionIcons, addOptionIcon } from "../utils/option-icons.jsx";

export default function VisualAdjustmentsModule() {

    const {svgFilterElement, setSvgFilterElement} = useWidget();
    const {isHighContrastMode, setHighContrastMode} = useWidget();
    const {isMonochromeMode, setMonochromeMode} = useWidget();
    const {isLowSaturationMode, setLowSaturationMode} = useWidget();
    const {isHighSaturationMode, setHighSaturationMode} = useWidget();
    const {isMediaHidden, setMediaHidden} = useWidget();
    const {originalMediaStyles, setOriginalMediaStyles} = useWidget();
    const {currentLanguage} = useWidget();

    useEffect(() => {
        setupOptionIcons();
    }, []);

    return (
        <div className="wideaccess-widget-group">
            <div className="wideaccess-widget-group-title">{t('visualAdjustments', currentLanguage)}</div>

            {isOptionEnabled('highContrast') && (
                <button className={`option ${isHighContrastMode ? 'active' : ''}`} onClick={() => {

                    toggleHighContrastTheme(isHighContrastMode, svgFilterElement, setSvgFilterElement,
                        setMonochromeMode, setLowSaturationMode, setHighSaturationMode, setHighContrastMode)
                }}>
                    {addOptionIcon('high-contrast')}
                    {t('highContrast', currentLanguage)}
                </button>
            )}

            {isOptionEnabled('grayscaleMode') && (
                <button className={`option ${isMonochromeMode ? 'active' : ''}`} onClick={() => {
                    toggleMonochromeTheme(isMonochromeMode, svgFilterElement, setSvgFilterElement,
                        setMonochromeMode, setLowSaturationMode, setHighSaturationMode, setHighContrastMode)
                }}>
                    {addOptionIcon('grayscale')}
                    {t('grayscaleMode', currentLanguage)}
                </button>
            )}

            {isOptionEnabled('lowSaturation') && (
                <button className={`option ${isLowSaturationMode ? 'active' : ''}`} onClick={() => {
                    toggleLowSaturationTheme(isLowSaturationMode, svgFilterElement, setSvgFilterElement,
                        setMonochromeMode, setLowSaturationMode, setHighSaturationMode, setHighContrastMode)
                }}>
                    {addOptionIcon('low-saturation')}
                    {t('lowSaturation', currentLanguage)}
                </button>
            )}

            {isOptionEnabled('highSaturation') && (
                <button className={`option ${isHighSaturationMode ? 'active' : ''}`} onClick={() => {
                    toggleHighSaturationTheme (isHighSaturationMode, svgFilterElement, setSvgFilterElement,
                        setMonochromeMode, setLowSaturationMode, setHighSaturationMode, setHighContrastMode )
                }}>
                    {addOptionIcon('high-saturation')}
                    {t('highSaturation', currentLanguage)}
                </button>
            )}

            {isOptionEnabled('hideImages') && (
                <button className={`option ${isMediaHidden ? 'active' : ''}`} onClick={() =>
                {
                    toggleHideMedia(isMediaHidden, setMediaHidden, originalMediaStyles, setOriginalMediaStyles);
                }}>
                    {addOptionIcon('hide-images')}
                    {t('hideImages', currentLanguage)}
                </button>
            )}
        </div>
    );
}