import { jsx as _jsx } from "react/jsx-runtime";
import { XAxis } from 'recharts';
import { useTheme } from 'styled-components';
import { fontSize } from '../../../style/theme';
import { getTicks, calculateLabelVisibility, TIME_CONSTANTS, getEdgeMargin, } from '../healthBarUtils';
import { FormattedDateTime } from '../../date/FormattedDateTime';
const CustomTick = ({ tickProps, startTimestamp, endTimestamp, }) => {
    const theme = useTheme();
    const { y, payload, width, index, visibleTicksCount } = tickProps;
    const span = endTimestamp - startTimestamp;
    const is7DaySpan = span === 7 * TIME_CONSTANTS.ONE_DAY;
    const isDaySpan = span === TIME_CONSTANTS.ONE_DAY;
    const shouldShowLabel = calculateLabelVisibility(width, visibleTicksCount, span, index, endTimestamp);
    const edgeMargin = getEdgeMargin(index, visibleTicksCount, isDaySpan);
    return (
    // use coordinate to center the text
    shouldShowLabel && (_jsx("g", { transform: `translate(${payload.coordinate},${y})`, children: _jsx("text", { textAnchor: "middle", dy: 8, dx: edgeMargin, fontSize: fontSize.smaller, fill: theme.textSecondary, children: is7DaySpan ? (_jsx(FormattedDateTime, { format: "day-month-abbreviated-hour-minute", value: new Date(payload.value) })) : (_jsx(FormattedDateTime, { format: "time", value: new Date(payload.value) })) }) })));
};
export const HealthBarXAxis = ({ startTimestamp, endTimestamp, }) => {
    const theme = useTheme();
    const ticks = getTicks(startTimestamp, endTimestamp);
    return (_jsx(XAxis, { allowDataOverflow: true, dataKey: "start", type: "number", domain: [startTimestamp, endTimestamp], tickSize: 5, minTickGap: 10, height: 15, interval: 0, tick: (props) => {
            return (_jsx(CustomTick, { tickProps: props, startTimestamp: startTimestamp, endTimestamp: endTimestamp }));
        }, ticks: ticks, tickLine: { stroke: theme.textSecondary }, axisLine: false }));
};
