import React, { useState } from "react";
import moment from "moment";
import { guessResolutionAndValue } from "./utils";
import { StyledDropdown, TextBox, DropdownIcon, TypeViewBox, DropdownBox, LastText, CustomInput, ShortPickElement, } from "./styled";
const dateResolutions = ["minute", "hour", "day", "month"];
const pluralize = (resolution, value) => (value === 1
    ? resolution : `${resolution}s`);
const getNewStart = (timeCorrection, resolution) => (-moment.duration(timeCorrection, resolution).as("seconds"));
export function CustomShortPicker(props) {
    const { setRangeValues, handleDatesChange, selectedStart, tagging, } = props;
    const { resolution, value: timeCorrection } = selectedStart <= 0
        ? guessResolutionAndValue(-selectedStart)
        : { resolution: "hour", value: 0 };
    const [isDropdownOpen, toggleDropdown] = useState(false);
    const handleStartChange = (newStart) => {
        handleDatesChange({
            startDate: newStart,
            endDate: 0,
        });
        setRangeValues({
            start: newStart,
            end: 0,
        });
    };
    const applyChanges = (newResolution) => () => {
        handleStartChange(getNewStart(timeCorrection, newResolution));
        toggleDropdown(false);
    };
    function handleChange(e) {
        const newTimeCorrection = Number(e.currentTarget.value);
        if (!Number.isNaN(newTimeCorrection)) {
            handleStartChange(getNewStart(newTimeCorrection, resolution));
        }
    }
    const renderTitle = () => (React.createElement(TypeViewBox, null,
        React.createElement(TextBox, null, pluralize(resolution, Number(timeCorrection))),
        React.createElement(DropdownIcon, { name: "triangle_down" })));
    return (React.createElement(DropdownBox, { "data-testid": `date-picker::click-last-integer::${tagging}` },
        React.createElement(LastText, null, "Last"),
        React.createElement(CustomInput, { value: timeCorrection, onChange: handleChange, "data-testid": `date-picker::click-last-integer::${tagging}::${timeCorrection}` }),
        React.createElement(StyledDropdown, { isOpen: isDropdownOpen, onMenuToggle: toggleDropdown, renderTitle: renderTitle, renderOpener: () => null }, dateResolutions.map((dateResolution) => (React.createElement(ShortPickElement, { key: dateResolution, onClick: applyChanges(dateResolution), "data-testid": `date-picker::click-last-time-${dateResolution}::${tagging}` }, pluralize(dateResolution, Number(timeCorrection))))))));
}
//# sourceMappingURL=custom-short-pick.js.map