/*!
 * 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, useCallback, useMemo, useState } from 'react';
import { Else, If, Then, When } from 'react-if';
import { useCellDimensions } from '../hooks/index.js';
const COMPACT_LINE_HEIGHT = 2;
export const DefaultColumnHeader = /*#__PURE__*/ memo(function DefaultColumnHeader({ column , isClickable , onClick , isSortable , onSort ,  }) {
    const { isSorted , isSortedDescending , iconName , iconClassName , isIconOnly ,  } = column;
    const containerStyle = useContainerStyle(column);
    const textStyle = useTextStyle(column, isClickable);
    const iconStyles = useIconStyles();
    const [hovered, setHovered] = useState(false);
    const handleMouseOver = useCallback(()=>setHovered(true), [
        setHovered
    ]);
    const handleMouseOut = useCallback(()=>setHovered(false), [
        setHovered
    ]);
    return /* eslint-disable jsx-a11y/mouse-events-have-key-events */ /*#__PURE__*/ _jsxs("div", {
        style: containerStyle,
        children: [
            /*#__PURE__*/ _jsx(When, {
                condition: iconName,
                children: /*#__PURE__*/ _jsx(Icon, {
                    className: iconClassName,
                    iconName: iconName
                })
            }),
            /*#__PURE__*/ _jsxs(When, {
                condition: !isIconOnly,
                children: [
                    /*#__PURE__*/ _jsx("div", {
                        onClick: (e)=>onClick && onClick(e, column),
                        style: textStyle,
                        title: column.name,
                        children: column.name
                    }),
                    /*#__PURE__*/ _jsx(When, {
                        condition: isSortable,
                        children: /*#__PURE__*/ _jsx("div", {
                            onMouseOver: handleMouseOver,
                            onMouseOut: handleMouseOut,
                            style: {
                                width: 12
                            },
                            children: /*#__PURE__*/ _jsxs(If, {
                                condition: isSorted,
                                children: [
                                    /*#__PURE__*/ _jsx(Then, {
                                        children: /*#__PURE__*/ _jsx(Icon, {
                                            onClick: (e)=>onSort && onSort(e, column),
                                            iconName: isSortedDescending ? 'SortDown' : 'SortUp',
                                            styles: iconStyles
                                        })
                                    }),
                                    /*#__PURE__*/ _jsx(Else, {
                                        children: /*#__PURE__*/ _jsx(When, {
                                            condition: hovered,
                                            children: /*#__PURE__*/ _jsx(Icon, {
                                                onClick: (e)=>onSort && onSort(e, column),
                                                iconName: 'Sort',
                                                styles: iconStyles
                                            })
                                        })
                                    })
                                ]
                            })
                        })
                    })
                ]
            })
        ]
    });
});
function useContainerStyle(column) {
    const dimensions = useCellDimensions(column);
    return useMemo(()=>({
            lineHeight: column.data.compact ? COMPACT_LINE_HEIGHT : 'inherit',
            display: 'flex',
            justifyContent: 'space-between',
            width: dimensions.width
        }), [
        dimensions,
        column
    ]);
}
function useTextStyle(column, isClickable) {
    const theme = useTheme();
    return useMemo(()=>({
            cursor: isClickable ? 'pointer' : 'inherit',
            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,
        isClickable
    ]);
}
function useIconStyles() {
    const theme = useTheme();
    return useMemo(()=>({
            root: {
                cursor: 'pointer',
                position: 'absolute',
                right: 8,
                fontSize: 12,
                color: theme.palette.neutralSecondary
            }
        }), [
        theme
    ]);
}
