var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source)
    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
      target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(source)) {
      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
        target[prop] = source[prop];
    }
  return target;
};
import { jsx, jsxs } from "react/jsx-runtime";
import React, { useEffect, useRef, useState, useCallback } from "react";
import { Booking, BookingFilled } from "@gympass/yoga-icons";
import styled, { css } from "styled-components";
import { bool, oneOf, func, instanceOf, string } from "prop-types";
import { Text } from "../..";
import { theme } from "../../Theme";
import Calendar from "./Calendar";
const Wrapper = styled.div`
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: ${(props) => props.fullWidth ? "100%" : css`
          ${theme.components.input.width}px
        `};
`;
const getSelectorBorderColor = (open, error, disabled, inputFilled, colors) => {
  if (error) {
    return colors.feedback.attention[1];
  }
  if (disabled) {
    return colors.elements.backgroundAndDisabled;
  }
  if (open || inputFilled) {
    return colors.secondary;
  }
  return colors.elements.lineAndBorders;
};
const Selector = styled.div`
  ${({
  open,
  error,
  disabled,
  inputFilled,
  theme: {
    yoga: { components, colors, spacing }
  }
}) => `
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    height: ${components.input.height}px;
    width: 100%;
    padding: ${spacing.small}px;
    background-color: ${colors.white};
    border-radius: ${components.input.border.radius}px;
    border-width: ${components.input.border.width}px;
    border-style: solid;
    border-color: ${getSelectorBorderColor(
  open,
  error,
  disabled,
  inputFilled,
  colors
)};
    &:hover {
      border-color: ${colors.secondary};
    }
  `}
`;
const Input = styled(Text.Small)`
  ${({
  disabled,
  theme: {
    yoga: { colors }
  }
}) => `
    width: 100%;
    padding: 0;
    border: none;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: ${!disabled ? colors.text.primary : colors.text.disabled}
  `}
`;
const InputPlaceholder = styled(Text.Small)`
  ${({
  disabled,
  theme: {
    yoga: { colors }
  }
}) => `
    color: ${!disabled ? colors.text.secondary : colors.text.disabled}
  `}
`;
const TButton = styled.button`
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background-color: transparent;
  cursor: pointer;
`;
const Panel = styled.div`
  ${({
  theme: {
    yoga: { components, colors, radii, borders, spacing }
  }
}) => `
    position: absolute;
    background-color: ${colors.white};
    border: ${borders.small}px solid ${colors.elements.lineAndBorders};
    z-index: 1;
    width: ${components.input.width}px;
    left: 0;
    border-radius: ${radii.regular}px;
    margin-top: ${spacing.xxsmall}px;
  `}
`;
const CalendarIcon = styled(
  (_a) => {
    var _b = _a, { _disabled, inputFilled } = _b, props = __objRest(_b, ["_disabled", "inputFilled"]);
    return !inputFilled ? /* @__PURE__ */ jsx(Booking, __spreadValues({ width: 20, height: 20 }, props)) : /* @__PURE__ */ jsx(BookingFilled, __spreadValues({ width: 20, height: 20 }, props));
  }
)`
  ${({
  disabled,
  theme: {
    yoga: { colors, spacing }
  }
}) => `
    fill: ${disabled ? colors.text.disabled : colors.text.primary};
    margin-right: ${spacing.xxsmall}px;
  `}
`;
const ErrorWrapper = styled(Text.Small)`
  ${({
  theme: {
    yoga: { colors, components }
  }
}) => `
    margin-top: ${components.input.helper.margin.top}px;
    font-size: ${components.input.helper.font.size}px;
    color: ${colors.feedback.attention[1]};
    position: absolute;
  `}
`;
const toUTC = (date) => {
  return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
};
function Datepicker(_c) {
  var _d = _c, {
    fullWidth = false,
    type,
    placeholder,
    startDate,
    endDate,
    onSelectSingle,
    disabled = false,
    onSelectRange,
    customOnSelectRange,
    disablePastDates = false,
    disableFutureDates = false,
    disablePastFrom,
    disableFutureFrom,
    error,
    onOpen,
    displayEndDateOnly = false,
    locale
  } = _d, props = __objRest(_d, [
    "fullWidth",
    "type",
    "placeholder",
    "startDate",
    "endDate",
    "onSelectSingle",
    "disabled",
    "onSelectRange",
    "customOnSelectRange",
    "disablePastDates",
    "disableFutureDates",
    "disablePastFrom",
    "disableFutureFrom",
    "error",
    "onOpen",
    "displayEndDateOnly",
    "locale"
  ]);
  const [open, setOpen] = useState();
  const [startDateLocal, setStartDateLocal] = useState(startDate);
  const [endDateLocal, setEndDateLocal] = useState(endDate);
  const ref = useRef(null);
  const [inputFilled, setInputFilled] = useState(false);
  const triggerOnOpen = useCallback(() => {
    if (onOpen)
      onOpen(open === "true");
  }, [open]);
  const onBlur = () => {
    setOpen(false.toString());
    triggerOnOpen();
  };
  const checkInputFilled = () => {
    if (type === "range") {
      if (!customOnSelectRange)
        setInputFilled(!!(startDateLocal && endDateLocal));
      else {
        setInputFilled(startDateLocal && endDateLocal);
      }
    } else {
      setInputFilled(startDate);
    }
  };
  useEffect(() => {
    checkInputFilled();
  }, [startDate, startDateLocal, endDateLocal]);
  useEffect(() => {
    setStartDateLocal(startDate);
    setEndDateLocal(endDate);
    if (type === "single" && startDate) {
      setOpen(false.toString());
    }
    if ((startDate || endDate) && onSelectRange)
      onSelectRange(startDate, endDate);
    if (displayEndDateOnly && !endDate)
      setInputFilled(false);
  }, [startDate, endDate, type]);
  const onDateSingleSelect = (startLocal) => {
    onSelectSingle(startLocal);
  };
  useEffect(() => {
    if (open === "true")
      ref.current.focus();
  }, [open]);
  const onDateRangeSelect = (selectedDate) => {
    if (customOnSelectRange) {
      customOnSelectRange(selectedDate);
      return;
    }
    const onSelectRangeCallback = (start, end) => {
      if (onSelectRange) {
        onSelectRange(start, end);
      }
    };
    if (!startDateLocal || startDateLocal > selectedDate && !endDateLocal || endDateLocal) {
      setStartDateLocal(selectedDate);
      if (endDateLocal)
        setEndDateLocal(void 0);
      onSelectRangeCallback(selectedDate, void 0);
    } else {
      setEndDateLocal(selectedDate);
      onSelectRangeCallback(startDateLocal, selectedDate);
    }
  };
  const renderInput = (start, end) => {
    if (!start && !end || displayEndDateOnly && !end) {
      return /* @__PURE__ */ jsx(InputPlaceholder, { disabled, children: placeholder != null ? placeholder : `Select Date` });
    }
    const formattedDate = (date) => {
      let month = new Intl.DateTimeFormat(locale, {
        month: "short",
        timeZone: "UTC"
      }).format(date);
      month = month.charAt(0).toUpperCase() + month.slice(1, 3);
      const day = date.getUTCDate();
      const year = date.getUTCFullYear();
      return `${month} ${day}, ${year}`;
    };
    if (displayEndDateOnly)
      return /* @__PURE__ */ jsx(Input, { disabled, children: end && formattedDate(end) });
    return start && /* @__PURE__ */ jsxs(Input, { disabled, children: [
      formattedDate(start),
      end && ` - ${formattedDate(end)}`
    ] });
  };
  return /* @__PURE__ */ jsxs(Wrapper, __spreadProps(__spreadValues({ fullWidth, tabIndex: "0" }, props), { children: [
    /* @__PURE__ */ jsxs(
      Selector,
      {
        open: open === "true",
        disabled,
        error,
        inputFilled,
        children: [
          renderInput(
            type === "range" && !customOnSelectRange ? startDateLocal : startDate,
            type === "range" && !customOnSelectRange ? endDateLocal : endDate
          ),
          /* @__PURE__ */ jsx(
            TButton,
            {
              onClick: () => {
                if (!disabled) {
                  setOpen((open !== "true").toString());
                }
                triggerOnOpen();
              },
              children: /* @__PURE__ */ jsx(CalendarIcon, { disabled, inputFilled })
            }
          )
        ]
      }
    ),
    error && /* @__PURE__ */ jsx(ErrorWrapper, { children: error }),
    open === "true" && /* @__PURE__ */ jsx(Panel, { tabIndex: -1, ref, onBlur, children: /* @__PURE__ */ jsx(
      Calendar,
      {
        type,
        startDate: startDateLocal,
        endDate: endDateLocal,
        onSelectSingle: onDateSingleSelect,
        onSelectRange: onDateRangeSelect,
        disablePastDates,
        disableFutureDates,
        disablePastFrom,
        disableFutureFrom,
        locale
      }
    ) })
  ] }));
}
Datepicker.propTypes = {
  fullWidth: bool,
  type: oneOf(["single", "range"]).isRequired,
  placeholder: string,
  startDate: instanceOf(Date),
  endDate: instanceOf(Date),
  disabled: bool,
  onSelectSingle: func,
  onSelectRange: func,
  customOnSelectRange: func,
  disablePastDates: bool,
  disableFutureDates: bool,
  disablePastFrom: instanceOf(Date),
  disableFutureFrom: instanceOf(Date),
  error: string,
  onOpen: func,
  displayEndDateOnly: bool,
  locale: string
};
var Datepicker_default = Datepicker;
export {
  Datepicker_default as default,
  toUTC
};
