import React from 'react';
import { useWidget } from '../context/WidgetContext';
import { t } from '../translations';
import { Switch } from './ui/switch';
import {setStorageValue} from "@/storage.js";
import {XL_MODE} from "@/constants.js";

export default function XLModeToggle() {
    const { isXLMode, setXLMode, currentLanguage } = useWidget();

    const handleToggle = (checked) => {
        setXLMode(checked);
        // Store preference in localStorage
        setStorageValue(XL_MODE, checked.toString())
    };

    const handleContainerClick = (e) => {
        // Only toggle if clicking outside the switch
        if (e.target.closest('[role="switch"]') === null) {
            handleToggle(!isXLMode);
        }
    };

    return (
        <div className="wideaccess-xl-mode-toggle-container" onClick={handleContainerClick}>
            <span className="wideaccess-xl-mode-text">{t('xlMode', currentLanguage)}</span>
            <Switch
                checked={isXLMode || false}
                onCheckedChange={handleToggle}
                aria-label={t('xlMode', currentLanguage)}
            />
        </div>
    );
}