import { flexRender } from "@tanstack/react-table";
import React from "react";
import { Th, Resizer } from "../../Table.styles";
import { IconSwapVert, IconArrowDown, IconArrowUp } from "../../../_Icon";
import { SELECT_COLUMN_ID } from "../../utils";
import { classes } from "../../Table.tokens";
import { ControlButtons, ThWrapper, IconWrapper } from "./HeadCell.styles";
import { Filter } from "./ui/Filter/Filter";
export const getIconSize = (size)=>{
    return size === 's' ? 'xs' : 's';
};
export const HeadCell = ({ header, size, borderVariant, outerFiltered, tableContainerRef, className })=>{
    const { filters } = header?.column?.columnDef?.meta || {};
    return /*#__PURE__*/ React.createElement(Th, {
        key: header.id,
        colSpan: header.colSpan,
        borderVariant: borderVariant,
        selectionCell: header.column.id === SELECT_COLUMN_ID,
        style: header.column.id !== SELECT_COLUMN_ID ? {
            width: header.getSize()
        } : undefined,
        className: className
    }, header.isPlaceholder ? null : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(ThWrapper, null, flexRender(header.column.columnDef.header, header.getContext()), header.column.id !== SELECT_COLUMN_ID && /*#__PURE__*/ React.createElement(ControlButtons, null, filters && /*#__PURE__*/ React.createElement(Filter, {
        header: header,
        size: size,
        outerFiltered: outerFiltered,
        tableContainerRef: tableContainerRef
    }), header.column.getCanSort() && /*#__PURE__*/ React.createElement(IconWrapper, {
        onClick: header.column.getToggleSortingHandler()
    }, {
        asc: /*#__PURE__*/ React.createElement(IconArrowUp, {
            size: getIconSize(size),
            className: classes.sortingAscIcon
        }),
        desc: /*#__PURE__*/ React.createElement(IconArrowDown, {
            size: getIconSize(size),
            className: classes.sortingDescIcon
        })
    }[header.column.getIsSorted()] ?? /*#__PURE__*/ React.createElement(IconSwapVert, {
        size: getIconSize(size),
        className: classes.sortingDefaultIcon
    }))))), header.column.getCanResize() && /*#__PURE__*/ React.createElement(Resizer, {
        className: classes.resizeDivider,
        onMouseDown: header.getResizeHandler(),
        onTouchStart: header.getResizeHandler(),
        isResizing: header.column.getIsResizing()
    }));
};
