import CheckboxElement from "../Checkbox/Checkbox";
import Icon, { ThickProp } from "../Icon/Icon";
import FieldType from "../Types/FieldType";
import SortOrder, { SortOrderToAriaSortMap, } from "../../../Types/BaseDatabase/SortOrder";
import IconProp from "../../../Types/Icon/IconProp";
import useTranslateValue from "../../Utils/Translation";
import React, { useEffect, useState } from "react";
const TableHeader = (props) => {
    const { translateString } = useTranslateValue();
    // Track mobile view for responsive behavior
    const [isMobile, setIsMobile] = useState(false);
    useEffect(() => {
        const checkMobile = () => {
            setIsMobile(window.innerWidth < 768); // md breakpoint
        };
        checkMobile();
        window.addEventListener("resize", checkMobile);
        return () => {
            window.removeEventListener("resize", checkMobile);
        };
    }, []);
    const selectBulkSelectCheckbox = Boolean(props.isAllItemsOnThePageSelected && props.hasTableItems);
    return (React.createElement("thead", { className: "bg-gray-50", id: props.id },
        React.createElement("tr", null,
            props.enableDragAndDrop && (React.createElement("th", { scope: "col" },
                React.createElement("span", { className: "sr-only" }, translateString("Drag to reorder")))),
            props.isBulkActionsEnabled && (React.createElement("th", { scope: "col" },
                React.createElement("span", { className: "sr-only" }, translateString("Select all items")),
                React.createElement("div", { className: "ml-5" },
                    React.createElement(CheckboxElement, { disabled: !props.hasTableItems, value: selectBulkSelectCheckbox, onChange: (value) => {
                            if (value) {
                                if (props.onAllItemsOnThePageSelected) {
                                    props.onAllItemsOnThePageSelected();
                                }
                            }
                            else if (props.onAllItemsDeselected) {
                                props.onAllItemsDeselected();
                            }
                        } })))),
            props.columns
                .filter((column) => {
                return !(column.hideOnMobile && isMobile);
            })
                .map((column, i) => {
                var _a;
                const canSort = !column.disableSort && Boolean(column.key);
                const isSorted = canSort && props.sortBy === column.key;
                const ariaSort = isSorted
                    ? SortOrderToAriaSortMap[props.sortOrder]
                    : canSort
                        ? "none"
                        : undefined;
                return (React.createElement("th", { key: i, scope: "col", "aria-sort": ariaSort, className: `px-6 py-3 text-left text-sm font-semibold text-gray-900 ${canSort ? "cursor-pointer" : ""}`, onClick: () => {
                        if (!column.key) {
                            return;
                        }
                        if (!canSort) {
                            return;
                        }
                        const sortOrder = props.sortOrder === SortOrder.Ascending
                            ? SortOrder.Descending
                            : SortOrder.Ascending;
                        const currentSortColumn = column.key;
                        props.onSortChanged(currentSortColumn, sortOrder);
                    } },
                    React.createElement("div", { className: `flex ${column.type === FieldType.Actions
                            ? "justify-end"
                            : "justify-start"}` }, (_a = translateString(column.title)) !== null && _a !== void 0 ? _a : column.title,
                        canSort &&
                            props.sortBy === column.key &&
                            props.sortOrder === SortOrder.Ascending && (React.createElement(Icon, { icon: IconProp.ChevronUp, thick: ThickProp.Thick, className: "ml-2  p-1 flex-none rounded bg-gray-200 text-gray-500 group-hover:bg-gray-300 h-4 w-4" })),
                        canSort &&
                            props.sortBy === column.key &&
                            props.sortOrder === SortOrder.Descending && (React.createElement(Icon, { icon: IconProp.ChevronDown, thick: ThickProp.Thick, className: "ml-2 p-1 flex-none rounded bg-gray-200 text-gray-500 group-hover:bg-gray-300 h-4 w-4" })))));
            }))));
};
export default TableHeader;
//# sourceMappingURL=TableHeader.js.map