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

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

  const handleCopyToClipboard = () => {
    updateSettings(widgetId, {copyToClipboard: true});
  }
  const handleVolcanoSort = (details) => {
    const isSort = currentSettings?.activeSorts?.volcanoSort === true;
    updateSettings(widgetId, { activeSorts: { ...currentSettings?.activeSorts, volcanoSort: !isSort }});
  }
  const handleTimeSort = (details) => {
    const sort = currentSettings?.activeSorts?.timeSort === "desc" ? "asc" : "desc";
    updateSettings(widgetId, { activeSorts: { ...currentSettings?.activeSorts, timeSort: sort }});
  }

  return (
    <Flex flexDirection="column" justifyContent="space-between" gap={2} overflowY="auto">
      {/* COPYING TO CLIPBOARD */}
      <Button w="fit" size="xs" onClick={handleCopyToClipboard}>Copy All RS</Button>

      {/* SORTING */}
      <Switch.Root
        checked={currentSettings?.activeSorts?.timeSort === "asc"}
        onCheckedChange={handleTimeSort}
        colorPalette="blue"
      >
        <Switch.HiddenInput />
        <Switch.Control>
          <Switch.Thumb />
        </Switch.Control>
        <Switch.Label>Sort Oldest to Newest</Switch.Label>
      </Switch.Root>
      <Switch.Root
        checked={currentSettings?.activeSorts?.volcanoSort}
        onCheckedChange={handleVolcanoSort}
        colorPalette="blue"
      >
        <Switch.HiddenInput />
        <Switch.Control>
          <Switch.Thumb />
        </Switch.Control>
        <Switch.Label>Sort by Volcano</Switch.Label>
      </Switch.Root>

      {/* SELECTING DATE RANGE */}
      <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>
    </Flex>
  )
}