'use strict';
import { jsx, jsxs } from 'react/jsx-runtime';
import React, { useState, useContext, useEffect } from 'react';
import { tableDisplayModes } from '../../../../fd-toolbox/enums/enums.js';
import { initTableHeaderPanelLayout, onTableHeaderSort, isFirstOrSecondIndexColumn, shouldHideResizableHandle, shouldFadeOutHandle } from './TableHeader.funcs.js';
import { cn } from '../../../../fd-toolbox/lib/utils.js';
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '../header-cell/Resizable.js';
import { TableHeaderCell } from '../header-cell/TableHeaderCell.js';
import { internalTableColumnTypes } from '../table-models.js';
import { TableReactContext } from '../table-context.js';
import { ResizableEdgeHandle } from '../header-cell/ResizableEdgeHandle.js';
import { isSortableColumn } from '../services/table-private-cell.js';
import { useEmptyRef } from '../../../../fd-toolbox/hooks/use-empty-ref.js';
import { getColumnSize } from '../services/table-column-size.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function TableHeader({
  tableInstance,
  displayMode,
  tableSorted,
  onRefreshItems,
  className,
  tableHovered,
  columnToWidthPercent
}) {
  const [hoveredColumnIndex, setHoveredColumnIndex] = useState();
  const [activeIndex, setActiveIndex] = useState(0);
  const {
    setColumnWidths
  } = useContext(TableReactContext);
  const internalTableColumns = tableInstance.internalTableColumns;
  const resizableHandleClasses = "border-muted-foreground m-auto h-4 w-0 border-0 border-r";
  const panelGroupRef = useEmptyRef();
  useEffect(() => {
    if (panelGroupRef.current) {
      initTableHeaderPanelLayout(columnToWidthPercent, internalTableColumns, panelGroupRef.current.setLayout);
    }
  }, [columnToWidthPercent, internalTableColumns]);
  return /* @__PURE__ */jsx("div", {
    className: cn("relative flex w-full flex-row", className),
    onMouseLeave: () => setHoveredColumnIndex(void 0),
    children: internalTableColumns?.length > 0 && /* @__PURE__ */jsxs(ResizablePanelGroup, {
      autoSaveId: "header",
      onLayout: val => setColumnWidths?.(val),
      direction: "horizontal",
      className: "flex h-full flex-row items-stretch",
      ref: panelGroupRef,
      children: [internalTableColumns.map(internalTableColumn => /* @__PURE__ */jsxs(React.Fragment, {
        children: [/* @__PURE__ */jsx(ResizablePanel, {
          id: `panel${internalTableColumn.index}`,
          order: internalTableColumn.index,
          defaultSize: Math.ceil(internalTableColumn.width) || void 0,
          className: cn("group/column flex items-center justify-between", internalTableColumn.type === internalTableColumnTypes.checkBox && "max-w-8", internalTableColumn.type === internalTableColumnTypes.action && isFirstOrSecondIndexColumn(internalTableColumn.index) && "max-w-12 min-w-12", internalTableColumn.type === internalTableColumnTypes.customHeaderAction && "max-w-16 min-w-5"),
          minSize: getColumnSize(internalTableColumn, tableInstance, displayMode, internalTableColumns),
          onMouseEnter: () => setHoveredColumnIndex(internalTableColumn.index),
          children: /* @__PURE__ */jsx(TableHeaderCell, {
            onActiveHandlerIndexChange: () => setActiveIndex(internalTableColumn.index),
            cellContext: {
              tableInstance,
              internalTableColumn
            },
            tableSorted: column => onTableHeaderSort(column, tableSorted),
            onRefreshItems,
            display: displayMode,
            tableHovered,
            hidden: displayMode === tableDisplayModes.default ? false : !tableHovered,
            columnSortable: isSortableColumn({
              tableInstance,
              internalTableColumn
            })
          })
        }), /* @__PURE__ */jsx(ResizableHandle, {
          className: cn(resizableHandleClasses, shouldHideResizableHandle(internalTableColumn, tableInstance) && "hidden", shouldFadeOutHandle(activeIndex, internalTableColumn.index) && "animate-fade-out", hoveredColumnIndex === internalTableColumn.index || hoveredColumnIndex === internalTableColumn.index + 1 ? "animate-fade-in" : "animate-fade-out")
        }), shouldHideResizableHandle(internalTableColumn, tableInstance) && /* @__PURE__ */jsx(ResizableEdgeHandle, {
          className: cn(resizableHandleClasses, shouldFadeOutHandle(activeIndex, internalTableColumn.index) && "animate-fade-out", "cursor-pointer", hoveredColumnIndex === internalTableColumn.index ? "animate-fade-in" : "animate-fade-out")
        })]
      }, internalTableColumn.index)), /* @__PURE__ */jsx(ResizablePanel, {
        order: internalTableColumns.length
      })]
    }, `panel-group-${internalTableColumns.map(col => col.name).join("-")}`)
  });
}
__name(TableHeader, "TableHeader");

export { TableHeader };
