Web-Frontend/client/src/components/Widgets/settings/ExplosionEventsSettings.jsx

import { Box, Text, Switch } from "@chakra-ui/react";
import { useDashboardStore } from "@/store/useDashboardStore.jsx";

export default function ExplosionEventsSettings({ widgetId, currentSettings }) {
    const updateSettings = useDashboardStore(state => state.updateWidgetSettings);

    // 1. Convert the saved string into a boolean for the toggle UI
    const isSymlog = currentSettings?.yAxisScale === 'log';

    const handleToggle = (details) => {
        // 2. Chakra v3 passes { checked: boolean } in the details object.
        // Convert it back to the string Plotly expects.
        console.log("1. Toggle Clicked! Raw details from Chakra:", details);

        const newScale = details.checked ? 'log' : 'normal';

        updateSettings(widgetId, { yAxisScale: newScale });
    };

    return (
        <Box>
            <Text fontWeight="bold" mb={3} fontSize="sm">Y-Axis Settings</Text>

            <Switch.Root
                checked={isSymlog}
                onCheckedChange={handleToggle}
                colorPalette="blue"
            >
                <Switch.HiddenInput />
                <Switch.Control>
                    <Switch.Thumb />
                </Switch.Control>
                <Switch.Label>Use Log Scale</Switch.Label>
            </Switch.Root>
        </Box>
    );
}