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

export default function ExplosionEventsSettings({ widgetId, currentSettings }) {
    const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
  const [startError, setStartError] = useState(null);
  const [endError, setEndError] = useState(null);

    // 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 (
      <Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
        {/* Y-AXIS SETTING*/}
        <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>

        {/* DATE RANGE SELECTION */}
        <Field.Root invalid={!!startError}>
          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
              Start Date
            </Text>
            <Flex direction="column" w="100%">
              <Input
                w="100%"
                type="date"
                value={currentSettings?.startDate || ""}
                onChange={(e) => {
                  const value = e.target.value;
                  updateSettings(widgetId, {...currentSettings, startDate: value});

                  const dateSelected = new Date(value);
                  const today = new Date();
                  today.setHours(0, 0, 0, 0);

                  if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
                  else setStartError("");
                }}
              />
              {startError && <Field.ErrorText>{startError}</Field.ErrorText>}
            </Flex>
          </Flex>
        </Field.Root>
        <Field.Root invalid={!!endError}>
          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
              End Date
            </Text>
            <Flex direction="column" w="100%">
              <Input
                w="100%"
                type="date"
                value={currentSettings?.endDate || ""}
                onChange={(e) => {
                  const value = e.target.value;
                  updateSettings(widgetId, {...currentSettings, endDate: value});

                  const dateSelected = new Date(value);
                  const today = new Date();
                  today.setHours(0, 0, 0, 0);

                  if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
                  else setEndError("");
                }}
              />
              {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
            </Flex>
          </Flex>
        </Field.Root>
      </Flex>
    );
}