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);

  return (
    <Flex flexDirection="column" justifyContent="space-between" gap={2} pb={2}>
      {/* SLIDER DATE RANGE SELECTION */}
      <Slider.Root
        width="80%" h="100%"
        min={1} max={14}
        defaultValue={[7]}
        step={1}
        onValueChangeEnd={(e) => {
          const day = new Date(Date.now() - (e.value[0])*86400000).toLocaleDateString('en-CA');
          console.log("new start: ", day);
          updateSettings(widgetId, {...currentSettings, startDate: day});
        }}
      >
        <Slider.Label>{currentSettings?.endDate} to {currentSettings?.startDate}</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>
  )
}