"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DatePicker = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styled_components_1 = __importDefault(require("styled-components"));
const moment_1 = __importDefault(require("moment"));
const DayPickerInput_1 = __importDefault(require("react-day-picker/DayPickerInput"));
require("react-day-picker/lib/style.css");
const theme_1 = require("../../theme");
const Box_1 = require("../Box");
const Input_1 = require("../Input");
const Flex_1 = require("../Flex");
const Button_1 = require("../Button");
const Overlay = styled_components_1.default(Box_1.Box)(({ theme }) => (Object.assign(Object.assign({}, (theme.DATEPICKER || {})), { position: 'absolute', zIndex: 1 })));
const formatDate = (date, dateFormat) => moment_1.default(date).format(dateFormat);
const OverlayComponent = (_a) => {
    var { children, noExpiryOption, noExpiryCopy, handleNoExpiry } = _a, overlayProps = __rest(_a, ["children", "noExpiryOption", "noExpiryCopy", "handleNoExpiry"]);
    return (jsx_runtime_1.jsx(Overlay, Object.assign({}, overlayProps, { children: jsx_runtime_1.jsxs(Flex_1.Flex, Object.assign({ variant: "raw", dir: "column", align: "center" }, { children: [children, noExpiryOption && (jsx_runtime_1.jsx(Button_1.Button, Object.assign({ variant: "tertiary", margin: "s 0 0 0", onClick: handleNoExpiry }, { children: noExpiryCopy }), void 0))] }), void 0) }), void 0));
};
const DatePicker = (_a) => {
    var { value, onChange, minDate, maxDate, hasIcon, noExpiryOption, noExpiryCopy = 'No expiry', dateFormat = 'MM/DD/YYYY', placeholder = 'mm/dd/yyyy', dayPickerProps = {} } = _a, inputProps = __rest(_a, ["value", "onChange", "minDate", "maxDate", "hasIcon", "noExpiryOption", "noExpiryCopy", "dateFormat", "placeholder", "dayPickerProps"]);
    const isNoExpiry = noExpiryOption &&
        (value === undefined || value === null || value === noExpiryCopy);
    const [currentSelected, setCurrentSelected] = react_1.useState(isNoExpiry
        ? noExpiryCopy
        : value === undefined
            ? undefined
            : formatDate(value || '', dateFormat));
    const handleChange = (selectedDate, modifiers) => {
        if (modifiers.disabled)
            return;
        const formattedDate = formatDate(selectedDate, dateFormat);
        setCurrentSelected(formattedDate);
        if (onChange)
            onChange(selectedDate);
    };
    // @FIXME @BUG: overlay does not close after clicking no-expiry button
    const handleNoExpiry = () => {
        setCurrentSelected(noExpiryCopy);
        if (onChange)
            onChange(null);
    };
    const Component = react_1.forwardRef(function CustomInput(p, ref) {
        return (jsx_runtime_1.jsx(Input_1.Input, Object.assign({}, p, { inputRef: ref, value: currentSelected, placeholder: placeholder }, (hasIcon
            ? {
                icon: theme_1.polyIcons.CalendarRange,
            }
            : {}), inputProps), void 0));
    });
    dayPickerProps.onDayClick = handleChange;
    if (currentSelected && currentSelected !== noExpiryCopy) {
        dayPickerProps.month = new Date(currentSelected);
        dayPickerProps.selectedDays = [new Date(currentSelected)];
    }
    if (minDate || maxDate) {
        if (minDate)
            dayPickerProps.fromMonth = minDate;
        if (maxDate)
            dayPickerProps.toMonth = maxDate;
        dayPickerProps.disabledDays = [
            ...(minDate ? [{ before: minDate }] : []),
            ...(maxDate ? [{ after: maxDate }] : []),
        ];
    }
    return (jsx_runtime_1.jsx(DayPickerInput_1.default, { component: Component, dayPickerProps: dayPickerProps, overlayComponent: (props) => (jsx_runtime_1.jsx(OverlayComponent, Object.assign({}, props, { noExpiryOption: noExpiryOption, noExpiryCopy: noExpiryCopy, handleNoExpiry: handleNoExpiry }), void 0)) }, void 0));
};
exports.DatePicker = DatePicker;
//# sourceMappingURL=DatePicker.js.map