"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __getProtoOf = Object.getPrototypeOf;
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;
};
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Datepicker_exports = {};
__export(Datepicker_exports, {
  default: () => Datepicker_default,
  toUTC: () => toUTC
});
module.exports = __toCommonJS(Datepicker_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_react = __toESM(require("react"));
var import_yoga_icons = require("@gympass/yoga-icons");
var import_styled_components = __toESM(require("styled-components"));
var import_prop_types = require("prop-types");
var import__ = require("../..");
var import_Theme = require("../../Theme");
var import_Calendar = __toESM(require("./Calendar"));
const Wrapper = import_styled_components.default.div`
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: ${(props) => props.fullWidth ? "100%" : import_styled_components.css`
          ${import_Theme.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 = import_styled_components.default.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 = (0, import_styled_components.default)(import__.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 = (0, import_styled_components.default)(import__.Text.Small)`
  ${({
  disabled,
  theme: {
    yoga: { colors }
  }
}) => `
    color: ${!disabled ? colors.text.secondary : colors.text.disabled}
  `}
`;
const TButton = import_styled_components.default.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 = import_styled_components.default.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 = (0, import_styled_components.default)(
  (_a) => {
    var _b = _a, { _disabled, inputFilled } = _b, props = __objRest(_b, ["_disabled", "inputFilled"]);
    return !inputFilled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga_icons.Booking, __spreadValues({ width: 20, height: 20 }, props)) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga_icons.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 = (0, import_styled_components.default)(import__.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] = (0, import_react.useState)();
  const [startDateLocal, setStartDateLocal] = (0, import_react.useState)(startDate);
  const [endDateLocal, setEndDateLocal] = (0, import_react.useState)(endDate);
  const ref = (0, import_react.useRef)(null);
  const [inputFilled, setInputFilled] = (0, import_react.useState)(false);
  const triggerOnOpen = (0, import_react.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);
    }
  };
  (0, import_react.useEffect)(() => {
    checkInputFilled();
  }, [startDate, startDateLocal, endDateLocal]);
  (0, import_react.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);
  };
  (0, import_react.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(Input, { disabled, children: end && formattedDate(end) });
    return start && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Input, { disabled, children: [
      formattedDate(start),
      end && ` - ${formattedDate(end)}`
    ] });
  };
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, __spreadProps(__spreadValues({ fullWidth, tabIndex: "0" }, props), { children: [
    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
      Selector,
      {
        open: open === "true",
        disabled,
        error,
        inputFilled,
        children: [
          renderInput(
            type === "range" && !customOnSelectRange ? startDateLocal : startDate,
            type === "range" && !customOnSelectRange ? endDateLocal : endDate
          ),
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            TButton,
            {
              onClick: () => {
                if (!disabled) {
                  setOpen((open !== "true").toString());
                }
                triggerOnOpen();
              },
              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarIcon, { disabled, inputFilled })
            }
          )
        ]
      }
    ),
    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorWrapper, { children: error }),
    open === "true" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Panel, { tabIndex: -1, ref, onBlur, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_Calendar.default,
      {
        type,
        startDate: startDateLocal,
        endDate: endDateLocal,
        onSelectSingle: onDateSingleSelect,
        onSelectRange: onDateRangeSelect,
        disablePastDates,
        disableFutureDates,
        disablePastFrom,
        disableFutureFrom,
        locale
      }
    ) })
  ] }));
}
Datepicker.propTypes = {
  fullWidth: import_prop_types.bool,
  type: (0, import_prop_types.oneOf)(["single", "range"]).isRequired,
  placeholder: import_prop_types.string,
  startDate: (0, import_prop_types.instanceOf)(Date),
  endDate: (0, import_prop_types.instanceOf)(Date),
  disabled: import_prop_types.bool,
  onSelectSingle: import_prop_types.func,
  onSelectRange: import_prop_types.func,
  customOnSelectRange: import_prop_types.func,
  disablePastDates: import_prop_types.bool,
  disableFutureDates: import_prop_types.bool,
  disablePastFrom: (0, import_prop_types.instanceOf)(Date),
  disableFutureFrom: (0, import_prop_types.instanceOf)(Date),
  error: import_prop_types.string,
  onOpen: import_prop_types.func,
  displayEndDateOnly: import_prop_types.bool,
  locale: import_prop_types.string
};
var Datepicker_default = Datepicker;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  toUTC
});
