import React__default, { useState, useRef } from 'react';
import classnames from 'classnames';
import { useFocusTrap } from '@jobber/hooks';
import { D as DataListSortingOptions } from './DataListSortingOptions-es.js';
import { T as Text } from './Text-es.js';
import { u as useDataListContext } from './DataListContext-es.js';

var styles$1 = {"headerLabel":"kXYd0fpUuek-","sortable":"kryUPRHDUcs-","spinning":"CY2nuF56w6Y-"};

var styles = {"sortIcon":"_7-6mnR33fOk-","inactive":"GBbFLBGQDvI-","active":"ADTGMg72Zw4-","spinning":"l5wqDUSULQY-"};

const SORTING_ICON_TEST_ID = "ATL-DataList-Sorting-Icon";
const SORT_ORDER_MAP = {
    asc: "ascending",
    desc: "descending",
    none: "none",
};
function DataListSortingArrows({ headerKey, order, }) {
    return (React__default.createElement("div", { className: styles.sortIcon, "data-testid": SORTING_ICON_TEST_ID, "aria-label": `${headerKey} sort icon`, "aria-sort": order ? SORT_ORDER_MAP[order] : undefined },
        React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
            React__default.createElement("path", { className: getActiveClassName("asc"), d: "M16.2929 10.6661C15.9024 11.0566 15.2692 11.0566 14.8787 10.6661L12.2891 8.14263L9.70711 10.6661C9.31658 11.0566 8.68342 11.0566 8.29289 10.6661C7.90237 10.2756 7.90237 9.64239 8.29289 9.25186L11.5858 5.95897C11.9763 5.56845 12.6095 5.56845 13 5.95897L16.2929 9.25186C16.6834 9.64239 16.6834 10.2756 16.2929 10.6661Z" }),
            React__default.createElement("path", { className: getActiveClassName("desc"), d: "M8.29292 13.3339C8.68345 12.9434 9.31661 12.9434 9.70714 13.3339L12.2968 15.8573L14.8787 13.3339C15.2692 12.9434 15.9024 12.9434 16.2929 13.3339C16.6834 13.7244 16.6834 14.3576 16.2929 14.7481L13 18.041C12.6095 18.4315 11.9763 18.4315 11.5858 18.041L8.29292 14.7481C7.9024 14.3576 7.9024 13.7244 8.29292 13.3339Z" }))));
    function getActiveClassName(targetOrder) {
        return order === targetOrder ? styles.active : styles.inactive;
    }
}

/* eslint-disable max-statements */
function DataListHeaderTile({ headers, headerKey, }) {
    const { sorting } = useDataListContext();
    const [isDropDownOpen, setIsDropDownOpen] = useState(false);
    const optionsListRef = useFocusTrap(isDropDownOpen);
    const dataListHeaderTileRef = useRef(null);
    const sortableItem = sorting === null || sorting === void 0 ? void 0 : sorting.sortable.find(item => item.key === headerKey);
    const isSortable = Boolean(sortableItem);
    const sortingState = sorting === null || sorting === void 0 ? void 0 : sorting.state;
    const Tag = isSortable ? "button" : "div";
    return (React__default.createElement(Tag, { className: classnames(styles$1.headerLabel, {
            [styles$1.sortable]: isSortable,
        }), onClick: handleOnClick, ref: dataListHeaderTileRef, type: isSortable ? "button" : undefined },
        React__default.createElement(Text, { maxLines: "single" }, headers[headerKey]),
        isSortable && (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) && isDropDownOpen && (React__default.createElement(DataListSortingOptions, { options: sortableItem.options, selectedOption: (sorting === null || sorting === void 0 ? void 0 : sorting.state) || null, onSelectChange: handleSelectChange, onClose: () => setIsDropDownOpen(false), optionsListRef: optionsListRef, dataListHeaderTileRef: dataListHeaderTileRef })),
        isSortable && (React__default.createElement(DataListSortingArrows, { order: (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey ? sortingState.order : "none", headerKey: headerKey }))));
    function toggleSorting(newSortingKey, newId, newLabel) {
        var _a, _b;
        const isSameKey = newSortingKey === (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key);
        const isDescending = (sortingState === null || sortingState === void 0 ? void 0 : sortingState.order) === "desc";
        if (isSameKey && isDescending) {
            sorting === null || sorting === void 0 ? void 0 : sorting.onSort(undefined);
            return;
        }
        const sortingOrder = isSameKey ? "desc" : "asc";
        const label = ((_b = (_a = sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) === null || _a === void 0 ? void 0 : _a.find(option => {
            return option.order === sortingOrder;
        })) === null || _b === void 0 ? void 0 : _b.label) || newLabel;
        setSorting(newSortingKey, newId, label, sortingOrder);
    }
    function setSorting(newSortingKey, newId, newLabel, newOrder) {
        sorting === null || sorting === void 0 ? void 0 : sorting.onSort({
            key: newSortingKey,
            id: newId,
            label: newLabel,
            order: newOrder,
        });
    }
    function handleOnClick() {
        var _a, _b;
        if (!isSortable)
            return;
        if ((sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.sortType) === "dropdown") {
            setIsDropDownOpen(!isDropDownOpen);
        }
        else {
            const id = ((_b = (_a = sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id) || headerKey;
            toggleSorting(headerKey, id, headers[headerKey]);
        }
    }
    function handleSelectChange(newSortOption) {
        if (sortableItem) {
            setSorting(sortableItem.key, newSortOption.id, newSortOption.label, newSortOption.order);
        }
        setIsDropDownOpen(true);
    }
}

export { DataListHeaderTile as D };
