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

export default function CommCoorReportSettings({ 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 handleDownloadReport = () => {
    updateSettings(widgetId, {downloadReport: true});
  }

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

      {/* DOWNLOAD REPORT */}
      <Button w="fit" size="xs" onClick={handleDownloadReport}>Download Report</Button>

      {/* 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>
  )
}