import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useState } from "react";
import { HeaderCell as Cell, Arrow } from "./styled";
import { Arrow as ArrowSVG } from "./img/arrow";
const sortStates = [
    ["down", false],
    ["down", true],
    ["up", true],
];
export const HeaderCell = ({ cellId, isSortActive, sortable = true, children, content, onSortToggle, disabled, ...props }) => {
    const [activeStateIndex, setActiveIndex] = useState(0);
    useEffect(() => {
        if (!isSortActive) {
            setActiveIndex(0);
        }
    }, [isSortActive]);
    const getNextSortStateIndex = (activeStateIndex, sortStatesLength) => {
        let nextSortActiveIndex = activeStateIndex;
        if (activeStateIndex >= sortStatesLength)
            nextSortActiveIndex = 0;
        else
            nextSortActiveIndex++;
        return nextSortActiveIndex;
    };
    const handleSortClick = useCallback(() => {
        if (!sortable || disabled)
            return;
        const nextSortActiveIndex = getNextSortStateIndex(activeStateIndex, sortStates.length - 1);
        setActiveIndex(nextSortActiveIndex);
        onSortToggle?.(cellId, ...sortStates[nextSortActiveIndex]);
    }, [sortable, activeStateIndex, onSortToggle, cellId, disabled]);
    return (_jsxs(Cell, { className: "ui-table__header-with-sort", justifyContent: "flex-end", alignItems: "center", sort: sortable, sortActive: sortStates[activeStateIndex][1], noWrap: true, ...props, children: [_jsxs("div", { className: "ui-table__header-with-sort-label label", "data-id": cellId, "data-direction": sortStates[activeStateIndex][0], onClick: handleSortClick, children: [children, sortable && (_jsx("div", { className: `ui-table__header-with-sort-arrow arrow-container${disabled ? " disabled" : ""}`, children: _jsx(Arrow, { direction: sortStates[activeStateIndex][0], children: _jsx(ArrowSVG, {}) }) }))] }), _jsx("div", { className: "ui-table__header-with-sort-additional-content additional-content", children: content })] }));
};
//# sourceMappingURL=index.js.map