"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DateRangeDoubleInput = exports.monthArr = void 0;
const react_1 = __importStar(require("react"));
const components_1 = require("../../components");
const icons_1 = require("../../icons");
const utils_1 = require("../../utils");
const inlines_1 = require("inlines");
const varsUtilities_1 = require("../../varsUtilities");
const FromRangePicker_1 = require("../DateRange/FromRangePicker");
const TillRangePicker_1 = require("../DateRange/TillRangePicker");
const Popover = __importStar(require("@radix-ui/react-popover"));
const hover = {
    '&:hover': {
        backgroundColor: (0, varsUtilities_1.color)('action', 'neutral', 'subtleHover'),
    },
};
exports.monthArr = [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'May',
    'June',
    'July',
    'Aug',
    'Sept',
    'Oct',
    'Nov',
    'Dec',
];
const DateWrap = (0, inlines_1.styled)('div', {
    display: 'flex',
    cursor: 'pointer',
    padding: '8px 0px',
});
const DateRangeDoubleInput = ({ fromValue, tillValue, setFromValue, setTillValue, style, numbered, }) => {
    // TODO type?
    const dayFromRef = (0, react_1.useRef)(null);
    const monthFromRef = (0, react_1.useRef)(null);
    const yearFromRef = (0, react_1.useRef)(null);
    const dayTillRef = (0, react_1.useRef)(null);
    const monthTillRef = (0, react_1.useRef)(null);
    const yearTillRef = (0, react_1.useRef)(null);
    const inputRef = (0, react_1.useRef)(null);
    // try this
    const DateFromObjVal = new Date(fromValue);
    const DateTillObjVal = new Date(tillValue);
    const newFromDay = DateFromObjVal.getDate();
    const newFromMonth = DateFromObjVal.getMonth() + 1;
    const newFromYear = DateFromObjVal.getFullYear();
    const newTillDay = DateTillObjVal.getDate();
    const newTillMonth = DateTillObjVal.getMonth() + 1;
    const newTillYear = DateTillObjVal.getFullYear();
    const [fromDay, setFromDay] = (0, react_1.useState)(newFromDay || '');
    const [fromMonth, setFromMonth] = (0, react_1.useState)(newFromMonth || '');
    const [fromYear, setFromYear] = (0, react_1.useState)(newFromYear || '');
    const [tillDay, setTillDay] = (0, react_1.useState)(newTillDay || '');
    const [tillMonth, setTillMonth] = (0, react_1.useState)(newTillMonth || '');
    const [tillYear, setTillYear] = (0, react_1.useState)(newTillYear || '');
    const [open, setOpen] = (0, react_1.useState)(false);
    const [focusField, setFocusField] = (0, react_1.useState)('');
    const fullDateFromString = `${fromDay < 10 ? `0${fromDay}` : fromDay}/${fromMonth < 10 ? `0${fromMonth}` : fromMonth}/${fromYear}`;
    const fullDateTillString = `${tillDay < 10 ? `0${tillDay}` : tillDay}/${tillMonth < 10 ? `0${tillMonth}` : tillMonth}/${tillYear}`;
    // get the time as string format 00:00
    const timeString = '00:00';
    const stringToMilliseconds = (str, time) => {
        const dateString = `${str?.split('/').reverse().join('-')}T${time || '00:00'}`;
        const outputMs = new Date(dateString).getTime();
        return outputMs;
    };
    (0, react_1.useEffect)(() => {
        if (fromDay &&
            fromMonth &&
            fromYear.toString().length > 3 &&
            stringToMilliseconds(fullDateFromString, timeString) !== fromValue) {
            setFromValue(stringToMilliseconds(fullDateFromString, timeString));
        }
    }, [fromDay, fromMonth, fromYear, timeString]);
    (0, react_1.useEffect)(() => {
        if (tillDay &&
            tillMonth &&
            tillYear.toString().length > 3 &&
            stringToMilliseconds(fullDateTillString, timeString) !== tillValue) {
            setTillValue(stringToMilliseconds(fullDateTillString, timeString));
        }
    }, [tillDay, tillMonth, tillYear, timeString]);
    (0, react_1.useEffect)(() => {
        setFromDay(newFromDay || '');
        setFromMonth(newFromMonth || '');
        setFromYear(newFromYear || '');
        if (fromValue > tillValue) {
            setTillValue(fromValue);
        }
    }, [fromValue]);
    (0, react_1.useEffect)(() => {
        setTillDay(newTillDay || '');
        setTillMonth(newTillMonth || '');
        setTillYear(newTillYear || '');
    }, [tillValue]);
    const daysInMonth = (month, year) => {
        return new Date(year, month, 0).getDate();
    };
    const [till, setTill] = (0, react_1.useState)(false);
    // console.log('Days in this month', daysInMonth(newMonth, newYear))
    return (react_1.default.createElement(Popover.Root, { open: open },
        react_1.default.createElement(inlines_1.styled.div, { style: { display: 'flex', alignItems: 'center' } },
            react_1.default.createElement(inlines_1.styled.div, { style: {
                    opacity: 0,
                    position: 'absolute',
                    pointerEvents: 'none',
                    //  marginTop: -32,
                } },
                react_1.default.createElement("input", { type: "number", style: { maxWidth: 40, border: '1px solid red' }, ref: dayFromRef, value: fromDay, onChange: (e) => {
                        // should get last day of the month
                        if (+e.target.value < 1 ||
                            +e.target.value > daysInMonth(newFromMonth, newFromYear)) {
                            setFromDay(1);
                        }
                        else {
                            setFromDay(+e.target.value);
                        }
                    }, onKeyDown: (e) => {
                        if (e.key === 'Backspace') {
                            setFromDay('');
                        }
                        // if (e.key === 'ArrowDown' && +e.currentTarget.value === 1) {
                        //   setFromDay(daysInMonth(newFromMonth - 1, newFromYear) + 1)
                        // }
                    }, onKeyUp: (e) => {
                        if (+e.key > 3) {
                            monthFromRef.current.select();
                        }
                        if (e.currentTarget.value.length > 1 &&
                            e.key !== 'ArrowDown' &&
                            e.key !== 'ArrowUp' &&
                            e.key !== 'ArrowLeft') {
                            monthFromRef.current.select();
                        }
                        if (e.key === 'ArrowRight') {
                            monthFromRef.current.select();
                        }
                    }, onFocus: () => setFocusField('dayFromFocus'), onBlur: () => setFocusField('') }),
                react_1.default.createElement("input", { type: "number", style: { maxWidth: 40, border: '1px solid purple' }, ref: monthFromRef, value: fromMonth, onChange: (e) => {
                        if (+e.target.value < 1 || +e.target.value > 12) {
                            setFromMonth(1);
                        }
                        else {
                            setFromMonth(+e.target.value);
                        }
                    }, onKeyDown: (e) => {
                        if (e.key === 'Backspace') {
                            setFromMonth('');
                        }
                        // if (e.key === 'ArrowDown' && fromMonth === 1) {
                        //   setFromDay(fromDay)
                        //   setFromYear(fromYear)
                        //   setFromMonth(13)
                        // }
                    }, onKeyUp: (e) => {
                        if (+e.key > 1 && +e.currentTarget.value > 1) {
                            yearFromRef.current.select();
                        }
                        if (e.currentTarget.value.length > 1 &&
                            e.key !== 'ArrowDown' &&
                            e.key !== 'ArrowUp' &&
                            e.key !== 'ArrowLeft') {
                            yearFromRef.current.select();
                        }
                        if (e.key === 'ArrowRight') {
                            yearFromRef.current.select();
                        }
                        if (e.key === 'ArrowLeft') {
                            dayFromRef.current.focus();
                            dayFromRef.current.select();
                        }
                    }, onFocus: () => setFocusField('monthFromFocus'), onBlur: () => setFocusField('') }),
                react_1.default.createElement("input", { type: "number", style: { maxWidth: 40, border: '1px solid green' }, ref: yearFromRef, value: fromYear, onChange: (e) => {
                        if (fromDay === 29 && fromMonth === 2) {
                            console.log('leap year 🐸');
                        }
                        else {
                            setFromYear(+e.target.value);
                        }
                    }, onKeyDown: (e) => {
                        if (fromDay === 29 && fromMonth === 2 && e.key === 'ArrowUp') {
                            setFromYear(fromYear + 4);
                        }
                        if (fromDay === 29 && fromMonth === 2 && e.key === 'ArrowDown') {
                            setFromYear(fromYear - 4);
                        }
                        if (e.key === 'Backspace') {
                            setFromYear('');
                        }
                        if (e.key === 'ArrowRight') {
                            // removeOverlay()
                        }
                    }, onKeyUp: (e) => {
                        if (e.key === 'ArrowLeft') {
                            monthFromRef.current.select();
                        }
                        if (e.key === 'ArrowRight') {
                            dayTillRef.current.focus();
                            dayTillRef.current.select();
                            setTill(true);
                            setOpen(true);
                        }
                    }, onFocus: () => setFocusField('yearFromFocus'), onBlur: () => setFocusField('') }),
                react_1.default.createElement("input", { type: "number", style: { maxWidth: 40, border: '1px solid red' }, ref: dayTillRef, value: tillDay, onChange: (e) => {
                        // should get last day of the month
                        if (+e.target.value < 1 ||
                            +e.target.value > daysInMonth(newTillMonth, newTillYear)) {
                            setTillDay(1);
                        }
                        else {
                            setTillDay(+e.target.value);
                        }
                    }, onKeyDown: (e) => {
                        if (e.key === 'Backspace') {
                            setTillDay('');
                        }
                        // if (e.key === 'ArrowDown' && +e.currentTarget.value === 1) {
                        //   setTillDay(daysInMonth(newTillMonth, newTillYear) + 1)
                        // }
                        if (e.key === 'ArrowLeft') {
                            setOpen(false);
                        }
                    }, onKeyUp: (e) => {
                        if (e.key === 'ArrowLeft') {
                            yearFromRef.current.focus();
                            yearFromRef.current.select();
                            setTill(false);
                            setOpen(true);
                        }
                        if (+e.key > 3) {
                            monthTillRef.current.select();
                        }
                        if (e.currentTarget.value.length > 1 &&
                            e.key !== 'ArrowDown' &&
                            e.key !== 'ArrowUp' &&
                            e.key !== 'ArrowLeft') {
                            monthTillRef.current.select();
                        }
                        if (e.key === 'ArrowRight') {
                            monthTillRef.current.select();
                        }
                    }, onFocus: () => setFocusField('dayTillFocus'), onBlur: () => setFocusField('') }),
                react_1.default.createElement("input", { type: "number", style: { maxWidth: 40, border: '1px solid purple' }, ref: monthTillRef, value: tillMonth, onChange: (e) => {
                        if (+e.target.value < 1 || +e.target.value > 12) {
                            setTillMonth(1);
                        }
                        else {
                            setTillMonth(+e.target.value);
                        }
                    }, onKeyDown: (e) => {
                        if (e.key === 'Backspace') {
                            setTillMonth('');
                        }
                        // if (e.key === 'ArrowDown' && +e.currentTarget.value === 1) {
                        //   setTillMonth(13)
                        // }
                    }, onKeyUp: (e) => {
                        if (+e.key > 1 && +e.currentTarget.value > 1) {
                            yearTillRef.current.select();
                        }
                        if (e.currentTarget.value.length > 1 &&
                            e.key !== 'ArrowDown' &&
                            e.key !== 'ArrowUp' &&
                            e.key !== 'ArrowLeft') {
                            yearTillRef.current.select();
                        }
                        if (e.key === 'ArrowRight') {
                            yearTillRef.current.select();
                        }
                        if (e.key === 'ArrowLeft') {
                            dayTillRef.current.focus();
                            dayTillRef.current.select();
                        }
                    }, onFocus: () => setFocusField('monthTillFocus'), onBlur: () => setFocusField('') }),
                react_1.default.createElement("input", { type: "number", style: { maxWidth: 40, border: '1px solid green' }, ref: yearTillRef, value: tillYear, onChange: (e) => {
                        if (tillDay === 29 && tillMonth === 2) {
                            // Set year to schikkeljaar
                            console.log('leap year 🐸');
                        }
                        else {
                            setTillYear(+e.target.value);
                        }
                    }, onKeyDown: (e) => {
                        if (tillDay === 29 && tillMonth === 2 && e.key === 'ArrowUp') {
                            setTillYear(fromYear + 4);
                        }
                        if (tillDay === 29 && tillMonth === 2 && e.key === 'ArrowDown') {
                            setTillYear(tillYear - 4);
                        }
                        if (e.key === 'Backspace') {
                            setTillYear('');
                        }
                    }, onKeyUp: (e) => {
                        if (e.key === 'ArrowLeft') {
                            monthTillRef.current.select();
                        }
                    }, onFocus: () => setFocusField('yearTillFocus'), onBlur: () => setFocusField('') })),
            react_1.default.createElement(Popover.Anchor, { asChild: true },
                react_1.default.createElement("div", { ref: inputRef },
                    react_1.default.createElement(inlines_1.styled.div, { style: {
                            display: 'flex',
                            alignItems: 'center',
                            height: '40px',
                            padding: '0px 12px',
                            gap: 2,
                            borderRadius: '8px',
                            border: `1px solid ${(0, varsUtilities_1.color)('inputBorder', 'neutralNormal')}`,
                            '&:hover': {
                                border: `1px solid ${(0, varsUtilities_1.color)('inputBorder', 'neutralHover')}`,
                            },
                            [utils_1.BpTablet]: {
                                '&:hover': null,
                            },
                            '&:active': {
                                border: `1px solid ${(0, varsUtilities_1.color)('inputBorder', 'neutralActive')}`,
                            },
                            '&:focus': {
                                border: `1px solid ${(0, varsUtilities_1.color)('inputBorder', 'neutralSelected')}`,
                            },
                            ...style,
                        } },
                        react_1.default.createElement(icons_1.IconCalendar, { style: { marginRight: 8 } }),
                        numbered ? (react_1.default.createElement(DateWrap, { onClick: (e) => {
                                setTill(false);
                                setOpen(true);
                            } },
                            react_1.default.createElement(components_1.Text, { selectable: "none", style: {
                                    padding: '0px 1px',
                                    fontSize: 14,
                                    backgroundColor: focusField === 'dayFromFocus'
                                        ? (0, varsUtilities_1.color)('action', 'neutral', 'subtleActive')
                                        : '',
                                    borderRadius: 4,
                                    ...hover,
                                }, onClick: () => {
                                    dayFromRef.current.focus();
                                    dayFromRef.current.select();
                                } }, fromDay === ''
                                ? 'dd'
                                : fromDay < 10
                                    ? `0${fromDay}`
                                    : fromDay),
                            react_1.default.createElement(components_1.Text, { selectable: "none" }, "/"),
                            react_1.default.createElement(components_1.Text, { selectable: "none", style: {
                                    padding: '0px 1px',
                                    fontSize: 14,
                                    backgroundColor: focusField === 'monthFromFocus'
                                        ? (0, varsUtilities_1.color)('action', 'neutral', 'subtleActive')
                                        : '',
                                    borderRadius: 4,
                                    ...hover,
                                }, onClick: () => {
                                    monthFromRef.current.focus();
                                    monthFromRef.current.select();
                                } }, fromMonth === ''
                                ? 'mm'
                                : fromMonth < 10
                                    ? `0${fromMonth}`
                                    : fromMonth),
                            react_1.default.createElement(components_1.Text, { selectable: "none" }, "/"),
                            react_1.default.createElement(components_1.Text, { selectable: "none", style: {
                                    padding: '0px 1px',
                                    fontSize: 14,
                                    backgroundColor: focusField === 'yearFromFocus'
                                        ? (0, varsUtilities_1.color)('action', 'neutral', 'subtleActive')
                                        : '',
                                    borderRadius: 4,
                                    ...hover,
                                }, onClick: () => {
                                    yearFromRef.current.focus();
                                    yearFromRef.current.select();
                                } }, fromYear === '' ? 'yyyy' : fromYear))) : (
                        // WORDS FROM
                        react_1.default.createElement(DateWrap, { onClick: (e) => {
                                setTill(false);
                                setOpen(true);
                            } },
                            react_1.default.createElement(components_1.Text, { selectable: "none", style: {
                                    padding: '0px 1px',
                                    marginRight: '2px',
                                    fontSize: 14,
                                    backgroundColor: focusField === 'monthFromFocus'
                                        ? (0, varsUtilities_1.color)('action', 'neutral', 'subtleActive')
                                        : '',
                                    borderRadius: 4,
                                    ...hover,
                                }, onClick: () => {
                                    monthFromRef.current.focus();
                                    monthFromRef.current.select();
                                } }, fromMonth === '' ? 'mm' : exports.monthArr[fromMonth - 1]),
                            react_1.default.createElement(components_1.Text, { selectable: "none", style: {
                                    padding: '0px 1px',
                                    marginRight: '2px',
                                    fontSize: 14,
                                    backgroundColor: focusField === 'dayFromFocus'
                                        ? (0, varsUtilities_1.color)('action', 'neutral', 'subtleActive')
                                        : '',
                                    borderRadius: 4,
                                    ...hover,
                                }, onClick: () => {
                                    dayFromRef.current.focus();
                                    dayFromRef.current.select();
                                } },
                                fromDay === ''
                                    ? 'dd'
                                    : fromDay < 10
                                        ? `0${fromDay}`
                                        : fromDay,
                                ","),
                            react_1.default.createElement(components_1.Text, { selectable: "none", style: {
                                    padding: '0px 1px',
                                    fontSize: 14,
                                    backgroundColor: focusField === 'yearFromFocus'
                                        ? (0, varsUtilities_1.color)('action', 'neutral', 'subtleActive')
                                        : '',
                                    borderRadius: 4,
                                    ...hover,
                                }, onClick: () => {
                                    yearFromRef.current.focus();
                                    yearFromRef.current.select();
                                } }, fromYear === '' ? 'yyyy' : fromYear))),
                        react_1.default.createElement(components_1.Text, null, "-"),
                        numbered ? (react_1.default.createElement(DateWrap, { style: {}, onClick: (e) => {
                                setTill(true);
                                setOpen(true);
                            } },
                            react_1.default.createElement(components_1.Text, { selectable: "none", style: {
                                    padding: '0px 1px',
                                    fontSize: 14,
                                    backgroundColor: focusField === 'dayTillFocus'
                                        ? (0, varsUtilities_1.color)('action', 'neutral', 'subtleActive')
                                        : '',
                                    borderRadius: 4,
                                    ...hover,
                                }, onClick: () => {
                                    dayTillRef.current.focus();
                                    dayTillRef.current.select();
                                } }, tillDay === ''
                                ? 'dd'
                                : tillDay < 10
                                    ? `0${tillDay}`
                                    : tillDay),
                            react_1.default.createElement(components_1.Text, { selectable: "none" }, "/"),
                            react_1.default.createElement(components_1.Text, { selectable: "none", style: {
                                    padding: '0px 1px',
                                    fontSize: 14,
                                    backgroundColor: focusField === 'monthTillFocus'
                                        ? (0, varsUtilities_1.color)('action', 'neutral', 'subtleActive')
                                        : '',
                                    borderRadius: 4,
                                    ...hover,
                                }, onClick: () => {
                                    monthTillRef.current.focus();
                                    monthTillRef.current.select();
                                } }, tillMonth === ''
                                ? 'mm'
                                : tillMonth < 10
                                    ? `0${tillMonth}`
                                    : tillMonth),
                            react_1.default.createElement(components_1.Text, { selectable: "none" }, "/"),
                            react_1.default.createElement(components_1.Text, { selectable: "none", style: {
                                    padding: '0px 1px',
                                    fontSize: 14,
                                    backgroundColor: focusField === 'yearTillFocus'
                                        ? (0, varsUtilities_1.color)('action', 'neutral', 'subtleActive')
                                        : '',
                                    borderRadius: 4,
                                    ...hover,
                                }, onClick: () => {
                                    yearTillRef.current.focus();
                                    yearTillRef.current.select();
                                } }, tillYear === '' ? 'yyyy' : tillYear))) : (
                        //WORDS TILL
                        react_1.default.createElement(DateWrap, { onClick: (e) => {
                                setTill(true);
                                setOpen(true);
                            } },
                            react_1.default.createElement(components_1.Text, { selectable: "none", style: {
                                    padding: '0px 1px',
                                    marginRight: '2px',
                                    fontSize: 14,
                                    backgroundColor: focusField === 'monthTillFocus'
                                        ? (0, varsUtilities_1.color)('action', 'neutral', 'subtleActive')
                                        : '',
                                    borderRadius: 4,
                                    ...hover,
                                }, onClick: () => {
                                    monthTillRef.current.focus();
                                    monthTillRef.current.select();
                                } }, tillMonth === '' ? 'mm' : exports.monthArr[tillMonth - 1]),
                            react_1.default.createElement(components_1.Text, { selectable: "none", style: {
                                    padding: '0px 1px',
                                    marginRight: '2px',
                                    fontSize: 14,
                                    backgroundColor: focusField === 'dayTillFocus'
                                        ? (0, varsUtilities_1.color)('action', 'neutral', 'subtleActive')
                                        : '',
                                    borderRadius: 4,
                                    ...hover,
                                }, onClick: () => {
                                    dayTillRef.current.focus();
                                    dayTillRef.current.select();
                                } },
                                tillDay === ''
                                    ? 'dd'
                                    : tillDay < 10
                                        ? `0${tillDay}`
                                        : tillDay,
                                ","),
                            react_1.default.createElement(components_1.Text, { selectable: "none", style: {
                                    padding: '0px 1px',
                                    fontSize: 14,
                                    backgroundColor: focusField === 'yearTillFocus'
                                        ? (0, varsUtilities_1.color)('action', 'neutral', 'subtleActive')
                                        : '',
                                    borderRadius: 4,
                                    ...hover,
                                }, onClick: () => {
                                    yearTillRef.current.focus();
                                    yearTillRef.current.select();
                                } }, tillYear === '' ? 'yyyy' : tillYear)))))),
            react_1.default.createElement(Popover.Portal, null,
                react_1.default.createElement(Popover.Content, { onInteractOutside: (e) => {
                        setOpen(false);
                    }, onOpenAutoFocus: (e) => {
                        e.preventDefault();
                    }, onCloseAutoFocus: (e) => {
                        e.preventDefault();
                    }, sideOffset: 8, style: {
                        border: `1px solid ${(0, varsUtilities_1.color)('border', 'default', 'strong')}`,
                        boxShadow: `0px 3px 16px 1px rgba(0,0,0,0.05)`,
                        borderRadius: 4,
                    } }, !till ? (react_1.default.createElement(FromRangePicker_1.FromRangePicker, { setOpen: setOpen, setValue: setFromValue, timeString: timeString, stringToMilliseconds: stringToMilliseconds })) : (react_1.default.createElement(TillRangePicker_1.TillRangePicker, { setOpen: setOpen, setValue: setTillValue, timeString: timeString, stringToMilliseconds: stringToMilliseconds })))))));
};
exports.DateRangeDoubleInput = DateRangeDoubleInput;
//# sourceMappingURL=DateRangeDoubleInput.js.map