import React, { useMemo } from "react";
import { Flex, Icon, TextSmall } from "@netdata/netdata-ui";
import { formatDates, getTimePeriod } from "./utils";
import useConvertedDates from "./useConvertedDate";
const PeriodIndication = ({ startDate, endDate }) => {
    const [convertedStart, convertedEnd] = useConvertedDates(startDate, endDate);
    const { formattedStartDate, formattedEndDate } = useMemo(() => formatDates(convertedStart, convertedEnd), [convertedStart, convertedEnd]);
    const timePeriod = useMemo(() => getTimePeriod(convertedStart, convertedEnd), [convertedStart, convertedEnd]);
    return (React.createElement(Flex, { alignItems: "center", justifyContent: "between", gap: 2 },
        React.createElement(Flex, { alignItems: "center", justifyContent: "center", gap: 1.5 },
            React.createElement(TextSmall, { strong: true, whiteSpace: "nowrap" }, "From"),
            React.createElement(TextSmall, { whiteSpace: "nowrap", "data-testid": "periodIndication-from" }, formattedStartDate)),
        React.createElement(Icon, { name: "arrow_left", size: "small", color: "textLite", rotate: 2 }),
        React.createElement(Flex, { alignItems: "center", justifyContent: "center", gap: 1.5 },
            React.createElement(TextSmall, { strong: true, whiteSpace: "nowrap" }, "To"),
            React.createElement(TextSmall, { whiteSpace: "nowrap", "data-testid": "periodIndication-to" }, formattedEndDate)),
        React.createElement(Flex, { alignItems: "center", justifyContent: "center", gap: 2 },
            React.createElement(TextSmall, { whiteSpace: "nowrap" }, "/"),
            React.createElement(TextSmall, { color: "textLite", whiteSpace: "nowrap", "data-testid": "periodIndication-period" }, timePeriod))));
};
export default PeriodIndication;
//# sourceMappingURL=periodIndication.js.map