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

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

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

  console.log("currentSettings:", currentSettings);

  return (
    <Flex flexDirection="column" justifyContent="space-between" align="center" gap={2} pb={2}>
      {/* SLIDER DATE RANGE SELECTION */}
      <Slider.Root
        w="90%" h="100%"
        min={1} max={14}
        defaultValue={[1]}
        step={1}
        onValueChangeEnd={(e) => {
          console.log("change end", e);
          const day = new Date(Date.now() - (e.value[0])*86400000).toLocaleDateString('en-CA');
          updateSettings(widgetId, {...currentSettings, startDate: day});
        }}
      >
        <Slider.Label>{currentSettings?.startDate} to {currentSettings?.endDate}</Slider.Label>
        <Slider.Control>
          <Slider.Track>
            <Slider.Range />
          </Slider.Track>
          <Slider.Thumbs />
          <Slider.MarkerGroup p={3}>
            <Slider.Marker value={1} whiteSpace="nowrap">today</Slider.Marker>
            <Slider.Marker value={7} whiteSpace="nowrap">1 week ago</Slider.Marker>
            <Slider.Marker value={14} whiteSpace="nowrap">2 weeks ago</Slider.Marker>
          </Slider.MarkerGroup>
        </Slider.Control>
      </Slider.Root>
    </Flex>
  )
}