import React, { useState, useMemo, useEffect } from "react";
import "react-dates/initialize";
import "./custom-picker-styles.scss";
import { DateRangePicker } from "react-dates";
import moment from "moment";
import { Button } from "@netdata/netdata-ui";
import { useCloseOnOutsideClick } from "../../hooks/use-click-outside";
import { PickerActionArea, PickerBox, PickerBtnArea, HeaderSvg, StyledSidebar } from "./styled";
import { ShortPickArea } from "./short-pick";
import PickerAccessorElement from "./accessorElement";
import { CustomShortPicker } from "./custom-short-pick";
// @ts-ignore
import MonthLeftSvg from "./assets/month_arrow_l.svg";
// @ts-ignore
import MonthRightSvg from "./assets/month_arrow_r.svg";
function pickerFormat() {
    return "DD/MM/YYYY HH:mm";
}
function disabledDates(day) {
    return day.diff(moment(), "seconds") > 0;
}
const MonthLeft = () => (React.createElement(HeaderSvg, { id: "month_left" },
    React.createElement("use", { xlinkHref: `#${MonthLeftSvg.id}` })));
const MonthRight = () => (React.createElement(HeaderSvg, { id: "month_right" },
    React.createElement("use", { xlinkHref: `#${MonthRightSvg.id}` })));
function handleChangeDateByManualInput(dateToBeSet, setterFn) {
    if (typeof dateToBeSet === "number") {
        setterFn(dateToBeSet);
    }
    else if (dateToBeSet) {
        const { input } = dateToBeSet.creationData();
        if (input && typeof input !== "number") {
            setterFn(moment(input, "DD/MM/YYYY HH:mm").valueOf());
        }
        else {
            setterFn(dateToBeSet.valueOf());
        }
    }
}
const convertToMoment = (time) => {
    if (time > 0) {
        return moment(time);
    }
    return moment(new Date().valueOf() + time * 1000);
};
const focusTaggingMap = {
    startDate: "start",
    endDate: "finish",
};
export const Picker = (props) => {
    const { isOpen, handleOpenState, setRangeValues, pickedValues, tagging = "", isPlaying } = props;
    // debugger;
    const [startDateState, setStartDate] = useState(pickedValues.start);
    const [endDateState, setEndDate] = useState(pickedValues.end);
    const startDateMoment = useMemo(() => convertToMoment(startDateState), [startDateState]);
    const endDateMoment = useMemo(() => convertToMoment(endDateState), [endDateState]);
    useEffect(() => {
        setStartDate(pickedValues.start);
    }, [pickedValues.start]);
    useEffect(() => {
        setEndDate(pickedValues.end);
    }, [pickedValues.end]);
    const [focusedInput, setFocusedInput] = useState("startDate");
    function handleDatesChange({ startDate, endDate }) {
        if (!startDate && !endDate)
            return;
        handleChangeDateByManualInput(endDate, setEndDate);
        handleChangeDateByManualInput(startDate, setStartDate);
    }
    function clear() {
        setEndDate(0);
        setStartDate(-60 * 15);
        setRangeValues({
            start: -60 * 15,
            end: 0,
        });
    }
    function close() {
        handleOpenState(false);
    }
    const ref = useCloseOnOutsideClick(close);
    function keepFocus(fi) {
        if (!fi)
            return;
        setFocusedInput(fi);
    }
    function clickApply() {
        setRangeValues({
            start: startDateState,
            end: endDateState,
        });
        close();
    }
    const focusTagging = focusTaggingMap[focusedInput];
    const pickerModal = (React.createElement(StyledSidebar, { right: true, closeOnEsc: true, closeOnOverlayClick: true },
        React.createElement(PickerBox, { ref: ref },
            React.createElement(PickerActionArea, null,
                React.createElement(ShortPickArea, { handleDatesChange: handleDatesChange, selectedStart: startDateState, tagging: tagging }),
                React.createElement(DateRangePicker, { onDatesChange: handleDatesChange, daySize: 30, focusedInput: focusedInput, onFocusChange: keepFocus, hideKeyboardShortcutsPanel: true, enableOutsideDays: true, isOutsideRange: disabledDates, firstDayOfWeek: 1, verticalSpacing: 0, displayFormat: pickerFormat, endDate: endDateMoment, startDate: startDateMoment, startDateId: "dpStartDateInput", openDirection: "up", endDateId: "dpEndDateInput", navNext: React.createElement(MonthRight, null), navPrev: React.createElement(MonthLeft, null) })),
            React.createElement(PickerBtnArea, null,
                React.createElement(CustomShortPicker, { setRangeValues: setRangeValues, handleDatesChange: handleDatesChange, selectedStart: startDateState, tagging: tagging }),
                React.createElement(Button, { label: "CLEAR", flavour: "borderless", onClick: clear, "data-testid": `date-picker::click-clear::${tagging}-${focusTagging}` }),
                React.createElement(Button, { label: "APPLY", onClick: clickApply, "data-testid": `date-picker::click-apply::${tagging}-${focusTagging}` })))));
    return (React.createElement(React.Fragment, null,
        React.createElement(PickerAccessorElement, Object.assign({ onClick: () => handleOpenState(true), isPlaying: isPlaying, setRangeValues: setRangeValues }, pickedValues)),
        isOpen && pickerModal));
};
//# sourceMappingURL=picker.js.map