/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon, useTheme } from '@fluentui/react';
import { memo, useMemo } from 'react';
import { useCellDimensions } from '../hooks/index.js';
const COMPACT_LINE_HEIGHT = 2;
export const DefaultColumnHeader = /*#__PURE__*/ memo(function DefaultColumnHeader({ column , isClickable , onClick  }) {
    const theme = useTheme();
    const { isSorted , isSortedDescending , iconName , iconClassName  } = column;
    const dimensions = useCellDimensions(column);
    const containerStyle = useMemo(()=>({
            lineHeight: column.data.compact ? COMPACT_LINE_HEIGHT : 'inherit',
            cursor: isClickable ? 'pointer' : 'inherit',
            display: 'flex',
            justifyContent: 'space-between',
            width: dimensions.width,
            marginBottom: 4,
            borderBottom: column.data?.selected ? `1px solid ${theme.palette.themePrimary}` : `1px solid transparent`
        }), [
        theme,
        dimensions,
        column,
        isClickable
    ]);
    const textStyle = useMemo(()=>({
            color: column?.data.virtual ? 'transparent' : column.data?.selected ? theme.palette.themePrimary : theme.palette.neutralPrimary,
            width: '100%',
            textAlign: 'center',
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis'
        }), [
        theme,
        column
    ]);
    const iconStyles = useMemo(()=>({
            root: {
                fontSize: 12,
                color: theme.palette.neutralSecondary
            }
        }), [
        theme
    ]);
    return /*#__PURE__*/ _jsxs("div", {
        onClick: (e)=>onClick && onClick(e, column),
        style: containerStyle,
        children: [
            /*#__PURE__*/ _jsx("div", {
                style: textStyle,
                title: column.name,
                children: column.name
            }),
            iconName ? /*#__PURE__*/ _jsx(Icon, {
                className: iconClassName,
                iconName: iconName
            }) : null,
            isSorted ? /*#__PURE__*/ _jsx(Icon, {
                iconName: isSortedDescending ? 'SortDown' : 'SortUp',
                styles: iconStyles
            }) : null
        ]
    });
});
