import React, { useEffect } from "react";
import {
    applyFontLineHeight, applyFontLineSpacing,
    applyFontSize, toggleReadableFont,
} from "../effects/text-effects";
import {cycleTextAlignment, getAlignmentButtonText, getAlignmentIconName} from "../effects/text-alignment";
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 TextSpacingModule() {

    const {currentFontSizeMultiplier, setCurrentFontSizeMultiplier} = useWidget();
    const {currentSpacing, setCurrentSpacing} = useWidget();
    const {currentLineHeight, setCurrentLineHeight} = useWidget();
    const {readableFont, setReadableFont} = useWidget();
    const {textAlignment, setTextAlignment} = useWidget();
    const {currentLanguage, isXLMode} = useWidget();

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

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

            {isXLMode ? (
                <>
                    {/* XL Mode: All paired options first (columns 1 & 2), then singles */}
                    {/* Row 1: Larger Text, Smaller Text */}
                    <div>
                        {isOptionEnabled('increaseTextSize') && (
                            <button
                                className={`option ${currentFontSizeMultiplier > 1.0 ? 'active' : ''}`}
                                onClick={() => {
                                    const newCurrentFontSizeMultiplier = Number(
                                        (currentFontSizeMultiplier + 0.1).toFixed(1));
                                    applyFontSize(currentFontSizeMultiplier, newCurrentFontSizeMultiplier, setCurrentFontSizeMultiplier);
                                }}
                            >
                                {addOptionIcon('larger-text')}
                                {t('increaseTextSize', currentLanguage)}
                            </button>
                        )}

                        {isOptionEnabled('decreaseTextSize') && (
                            <button
                                className={`option ${currentFontSizeMultiplier < 1.0 ? 'active' : ''}`}
                                onClick={() => {
                                    const newCurrentFontSizeMultiplier = Number(
                                        Math.max(0.4, currentFontSizeMultiplier - 0.1).toFixed(1));
                                    if (newCurrentFontSizeMultiplier >= 0.5) {
                                        applyFontSize(currentFontSizeMultiplier, newCurrentFontSizeMultiplier, setCurrentFontSizeMultiplier);
                                    } else {
                                        setCurrentFontSizeMultiplier(0.5);
                                    }
                                }}
                            >
                                {addOptionIcon('smaller-text')}
                                {t('decreaseTextSize', currentLanguage)}
                            </button>
                        )}
                    </div>

                    {/* Row 2: Wider Letters, Tighter Letters */}
                    <div>
                        {isOptionEnabled('increaseLetterSpacing') && (
                            <button
                                className={`option ${(currentSpacing || 0) > 0 ? 'active' : ''}`}
                                onClick={() => {
                                    const newSpacing = Number(currentSpacing || 0) + 10;
                                    applyFontLineSpacing(newSpacing, setCurrentSpacing);
                                }}
                            >
                                {addOptionIcon('wider-letters')}
                                {t('increaseLetterSpacing', currentLanguage)}
                            </button>
                        )}

                        {isOptionEnabled('decreaseLetterSpacing') && (
                            <button
                                className={`option ${(currentSpacing || 0) < 0 ? 'active' : ''}`}
                                onClick={() => {
                                    const newSpacing = Math.max(0, currentSpacing - 10);
                                    applyFontLineSpacing(newSpacing, setCurrentSpacing);
                                }}
                            >
                                {addOptionIcon('tighter-letters')}
                                {t('decreaseLetterSpacing', currentLanguage)}
                            </button>
                        )}
                    </div>

                    {/* Row 3: Wider Lines, Tighter Lines */}
                    <div>
                        {isOptionEnabled('increaseLineHeight') && (
                            <button
                                className={`option ${currentLineHeight > 1 ? 'active' : ''}`}
                                onClick={() => {
                                    const newCurrentLineHeight = currentLineHeight + 0.7;
                                    applyFontLineHeight(newCurrentLineHeight, setCurrentLineHeight);
                                }}
                            >
                                {addOptionIcon('wider-lines')}
                                {t('increaseLineHeight', currentLanguage)}
                            </button>
                        )}

                        {isOptionEnabled('decreaseLineHeight') && (
                            <button
                                className={`option ${currentLineHeight < 1 ? 'active' : ''}`}
                                onClick={() => {
                                    const newCurrentLineHeight = Math.max(1, currentLineHeight - 0.7);
                                    applyFontLineHeight(newCurrentLineHeight, setCurrentLineHeight);
                                }}
                            >
                                {addOptionIcon('tighter-lines')}
                                {t('decreaseLineHeight', currentLanguage)}
                            </button>
                        )}
                    </div>

                    {/* Singles (after all pairs) */}
                    {/* Readable Font */}
                    {isOptionEnabled('readableFont') && (
                        <button
                            className={`option ${readableFont ? 'active' : ''}`}
                            onClick={() => {
                                toggleReadableFont(readableFont, setReadableFont);
                            }}
                        >
                            {addOptionIcon('readable-text')}
                            {t('readableFont', currentLanguage)}
                        </button>
                    )}


                    {/* Aligned Text */}
                    {isOptionEnabled('textAlignment') && (
                        <button
                            className={`option ${textAlignment && textAlignment !== 'none' ? 'active' : ''}`}
                            onClick={() => {
                                cycleTextAlignment(textAlignment, setTextAlignment);
                            }}
                        >
                            {addOptionIcon(getAlignmentIconName(textAlignment))}
                            {getAlignmentButtonText(textAlignment, t, currentLanguage)}
                        </button>
                    )}

                </>
            ) : (
                <>
                    {(() => {
                        const enabled = (id) => isOptionEnabled(id);
                        const availablePairs = [
                            ['increaseTextSize','decreaseTextSize'],
                            ['increaseLetterSpacing','decreaseLetterSpacing'],
                            ['increaseLineHeight','decreaseLineHeight']
                        ].filter(([a,b]) => enabled(a) && enabled(b));
                        const singlesQueue = [
                            'readableFont','textAlignment'
                        ].filter(enabled);

                        const renderButton = (id) => {
                            switch (id) {
                                case 'increaseTextSize':
                                    return (
                                        <button key={id} className={`option ${currentFontSizeMultiplier > 1.0 ? 'active' : ''}`} onClick={() => {
                                            const next = Number((currentFontSizeMultiplier + 0.1).toFixed(1));
                                            applyFontSize(currentFontSizeMultiplier, next, setCurrentFontSizeMultiplier);
                                        }}>{addOptionIcon('larger-text')}{t('increaseTextSize', currentLanguage)}</button>
                                    );
                                case 'decreaseTextSize':
                                    return (
                                        <button key={id} className={`option ${currentFontSizeMultiplier < 1.0 ? 'active' : ''}`} onClick={() => {
                                            const next = Number(Math.max(0.4, currentFontSizeMultiplier - 0.1).toFixed(1));
                                            if (next >= 0.5) {
                                                applyFontSize(currentFontSizeMultiplier, next, setCurrentFontSizeMultiplier);
                                            } else {
                                                setCurrentFontSizeMultiplier(0.5);
                                            }
                                        }}>{addOptionIcon('smaller-text')}{t('decreaseTextSize', currentLanguage)}</button>
                                    );
                                case 'increaseLetterSpacing':
                                    return (
                                        <button key={id} className={`option ${(currentSpacing || 0) > 0 ? 'active' : ''}`} onClick={() => {
                                            const newSpacing = Number(currentSpacing || 0) + 10;
                                            applyFontLineSpacing(newSpacing, setCurrentSpacing);
                                        }}>{addOptionIcon('wider-letters')}{t('increaseLetterSpacing', currentLanguage)}</button>
                                    );
                                case 'decreaseLetterSpacing':
                                    return (
                                        <button key={id} className={`option ${(currentSpacing || 0) < 0 ? 'active' : ''}`} onClick={() => {
                                            const newSpacing = Math.max(0, currentSpacing - 10);
                                            applyFontLineSpacing(newSpacing, setCurrentSpacing);
                                        }}>{addOptionIcon('tighter-letters')}{t('decreaseLetterSpacing', currentLanguage)}</button>
                                    );
                                case 'increaseLineHeight':
                                    return (
                                        <button key={id} className={`option ${currentLineHeight > 1 ? 'active' : ''}`} onClick={() => {
                                            const next = currentLineHeight + 0.7;
                                            applyFontLineHeight(next, setCurrentLineHeight);
                                        }}>{addOptionIcon('wider-lines')}{t('increaseLineHeight', currentLanguage)}</button>
                                    );
                                case 'decreaseLineHeight':
                                    return (
                                        <button key={id} className={`option ${currentLineHeight < 1 ? 'active' : ''}`} onClick={() => {
                                            const next = Math.max(1, currentLineHeight - 0.7);
                                            applyFontLineHeight(next, setCurrentLineHeight);
                                        }}>{addOptionIcon('tighter-lines')}{t('decreaseLineHeight', currentLanguage)}</button>
                                    );
                                case 'readableFont':
                                    return (
                                        <button key={id} className={`option ${readableFont ? 'active' : ''}`} onClick={() => {
                                            toggleReadableFont(readableFont, setReadableFont);
                                        }}>{addOptionIcon('readable-text')}{t('readableFont', currentLanguage)}</button>
                                    );
                                case 'textAlignment':
                                    return (
                                        <button key={id} className={`option ${textAlignment && textAlignment !== 'none' ? 'active' : ''}`} onClick={() => {
                                            cycleTextAlignment(textAlignment, setTextAlignment);
                                        }}>{addOptionIcon(getAlignmentIconName(textAlignment))}{getAlignmentButtonText(textAlignment, t, currentLanguage)}</button>
                                    );
                                default:
                                    return null;
                            }
                        };

                        const orderedIds = [];
                        availablePairs.forEach(pair => {
                            orderedIds.push(pair[0], pair[1]);
                            if (singlesQueue.length) {
                                orderedIds.push(singlesQueue.shift());
                            }
                        });
                        // Append any remaining singles
                        while (singlesQueue.length) orderedIds.push(singlesQueue.shift());

                        return orderedIds.map(renderButton);
                    })()}
                </>
            )}
        </div>
    );
}