"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var Styling_1 = require("../../Styling");
var DetailsRow_styles_1 = require("./DetailsRow.styles");
var DetailsHeader_styles_1 = require("./DetailsHeader.styles");
var GlobalClassNames = {
    isActionable: 'is-actionable',
    cellIsCheck: 'ms-DetailsHeader-cellIsCheck',
    collapseButton: 'ms-DetailsHeader-collapseButton',
    isCollapsed: 'is-collapsed',
    isAllSelected: 'is-allSelected',
    isSelectAllHidden: 'is-selectAllHidden',
    isResizingColumn: 'is-resizingColumn',
    isEmpty: 'is-empty',
    isIconVisible: 'is-icon-visible',
    cellSizer: 'ms-DetailsHeader-cellSizer',
    isResizing: 'is-resizing',
    dropHintCircleStyle: 'ms-DetailsHeader-dropHintCircleStyle',
    dropHintLineStyle: 'ms-DetailsHeader-dropHintLineStyle',
    cellTitle: 'ms-DetailsHeader-cellTitle',
    cellName: 'ms-DetailsHeader-cellName',
    filterChevron: 'ms-DetailsHeader-filterChevron',
    gripperBarVerticalStyle: 'ms-DetailsColumn-gripperBar'
};
exports.getStyles = function (props) {
    var theme = props.theme, headerClassName = props.headerClassName, iconClassName = props.iconClassName, isActionable = props.isActionable, isEmpty = props.isEmpty, isIconVisible = props.isIconVisible, isPadded = props.isPadded, isIconOnly = props.isIconOnly, _a = props.cellStyleProps, cellStyleProps = _a === void 0 ? DetailsRow_styles_1.DEFAULT_CELL_STYLE_PROPS : _a;
    var semanticColors = theme.semanticColors, palette = theme.palette;
    var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
    var colors = {
        iconForegroundColor: semanticColors.bodySubtext,
        headerForegroundColor: semanticColors.bodyText,
        headerBackgroundColor: semanticColors.bodyBackground,
        dropdownChevronForegroundColor: palette.neutralTertiary,
        resizerColor: palette.neutralTertiaryAlt
    };
    var nearIconStyle = {
        color: colors.iconForegroundColor,
        opacity: 1,
        paddingLeft: 8
    };
    return {
        root: [
            DetailsHeader_styles_1.getCellStyles(props),
            headerClassName,
            theme.fonts.small,
            isActionable && [
                classNames.isActionable,
                {
                    selectors: {
                        ':hover': {
                            color: semanticColors.bodyText,
                            background: semanticColors.listHeaderBackgroundHovered
                        },
                        ':active': {
                            background: semanticColors.listHeaderBackgroundPressed
                        }
                    }
                }
            ],
            isEmpty && [
                classNames.isEmpty,
                {
                    textOverflow: 'clip'
                }
            ],
            isIconVisible && classNames.isIconVisible,
            isPadded && {
                paddingRight: cellStyleProps.cellExtraRightPadding + cellStyleProps.cellRightPadding
            },
            {
                selectors: {
                    ':hover i[data-icon-name="GripperBarVertical"]': {
                        display: 'block'
                    }
                }
            }
        ],
        gripperBarVerticalStyle: [
            {
                display: 'none',
                position: 'absolute',
                textAlign: 'left',
                color: palette.neutralTertiary,
                left: 1
            }
        ],
        nearIcon: nearIconStyle,
        sortIcon: [
            nearIconStyle,
            {
                paddingLeft: 4,
                position: 'relative',
                top: 1
            }
        ],
        iconClassName: [
            {
                color: colors.iconForegroundColor,
                opacity: 1
            },
            iconClassName
        ],
        filterChevron: [
            classNames.filterChevron,
            {
                color: colors.dropdownChevronForegroundColor,
                paddingLeft: 4,
                verticalAlign: 'middle'
            }
        ],
        cellTitle: [
            classNames.cellTitle,
            Styling_1.getFocusStyle(theme),
            tslib_1.__assign({ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'stretch', boxSizing: 'border-box', overflow: 'hidden', padding: "0 " + cellStyleProps.cellRightPadding + "px 0 " + cellStyleProps.cellLeftPadding + "px" }, (isIconOnly
                ? {
                    alignContent: 'flex-end',
                    maxHeight: '100%',
                    flexWrap: 'wrap-reverse'
                }
                : {}))
        ],
        cellName: [
            classNames.cellName,
            {
                flex: '0 1 auto',
                overflow: 'hidden',
                textOverflow: 'ellipsis'
            },
            isIconOnly && {
                selectors: {
                    $nearIcon: {
                        paddingLeft: 0
                    }
                }
            }
        ],
        cellTooltip: [
            {
                display: 'block',
                position: 'absolute',
                top: 0,
                left: 0,
                bottom: 0,
                right: 0
            }
        ],
        accessibleLabel: [Styling_1.hiddenContentStyle],
        borderAfterDropping: [
            {
                borderStyle: 'solid',
                borderWidth: 1,
                borderColor: palette.themePrimary,
                left: -1,
                lineHeight: 31
            }
        ],
        borderWhileDragging: [
            {
                borderStyle: 'solid',
                borderWidth: 1,
                borderColor: palette.themePrimary
            }
        ]
    };
};
//# sourceMappingURL=DetailsColumn.styles.js.map