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

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

  return (
    <Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
      <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>
  )
}