/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { useTheme } from '@fluentui/react';
import merge from 'lodash-es/merge.js';
import { useMemo } from 'react';
/**
 * Create a DetailsHeader style with enough height to handle the options we've turned on.
 * Each one requires a small amount of vertical space that stacks up.
 * @param options -
 * @returns
 */ export function useDetailsListStyles(isHeaderFixed, features, styles, hasColumnClick, compact) {
    const theme = useTheme();
    const isFeatureEnabled = useMemo(()=>{
        return features?.smartHeaders || features?.histogramColumnHeaders || features?.statsColumnHeaders;
    }, [
        features
    ]);
    return useMemo(()=>merge({}, {
            headerWrapper: {
                position: isHeaderFixed ? 'sticky' : 'inherit',
                zIndex: '2',
                top: '0',
                background: theme.palette.white,
                selectors: {
                    '.ms-DetailsHeader': {
                        lineHeight: compact && !isFeatureEnabled ? 'normal' : '42px',
                        height: 'auto'
                    },
                    '.ms-DetailsHeader-cell': {
                        cursor: hasColumnClick ? 'pointer' : 'default',
                        height: 'auto',
                        padding: 'unset'
                    }
                }
            }
        }, styles), [
        theme,
        isFeatureEnabled,
        styles,
        isHeaderFixed,
        hasColumnClick,
        compact
    ]);
}
