"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var Styling_1 = require("../../Styling");
var GlobalClassNames = {
    root: 'ms-DetailsRow',
    compact: 'ms-DetailsList--Compact',
    cell: 'ms-DetailsRow-cell',
    cellCheck: 'ms-DetailsRow-cellCheck',
    cellMeasurer: 'ms-DetailsRow-cellMeasurer',
    listCellFirstChild: 'ms-List-cell:first-child',
    isFocusable: "[data-is-focusable='true']",
    isContentUnselectable: 'is-contentUnselectable',
    isSelected: 'is-selected',
    isCheckVisible: 'is-check-visible',
    fields: 'ms-DetailsRow-fields'
};
// Constant values
var values = {
    rowHeight: 42,
    compactRowHeight: 32,
    rowVerticalPadding: 11,
    rowHorizontalPadding: 8,
    compactRowVerticalPadding: 6,
    isPaddedMargin: 24,
    rowShimmerLineHeight: 7,
    rowShimmerIconPlaceholderHeight: 16,
    rowShimmerHorizontalBorder: 0,
    rowShimmerVerticalBorder: 0,
    compactRowShimmerVerticalBorder: 0
};
// Computed Values
values = tslib_1.__assign({}, values, {
    rowShimmerHorizontalBorder: values.rowHorizontalPadding,
    rowShimmerVerticalBorder: (values.rowHeight - values.rowShimmerLineHeight) / 2,
    compactRowShimmerVerticalBorder: (values.compactRowHeight - values.rowShimmerLineHeight) / 2
});
exports.getStyles = function (props) {
    var theme = props.theme, isSelected = props.isSelected, canSelect = props.canSelect, droppingClassName = props.droppingClassName, anySelected = props.anySelected, isCheckVisible = props.isCheckVisible, checkboxCellClassName = props.checkboxCellClassName, compact = props.compact, className = props.className;
    var _a = theme.palette, neutralPrimary = _a.neutralPrimary, neutralSecondaryAlt = _a.neutralSecondaryAlt, white = _a.white, neutralSecondary = _a.neutralSecondary, neutralLighter = _a.neutralLighter, neutralLight = _a.neutralLight, neutralDark = _a.neutralDark, neutralQuaternaryAlt = _a.neutralQuaternaryAlt, black = _a.black, themePrimary = _a.themePrimary;
    var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
    var colors = {
        // Default
        defaultHeaderTextColor: neutralPrimary,
        defaultMetaTextColor: neutralSecondaryAlt,
        defaultBackgroundColor: white,
        // Hover
        hoverTextColor: neutralPrimary,
        hoverMetaTextColor: neutralSecondary,
        hoverColorBackground: neutralLighter,
        // Selected
        selectedTextColor: neutralDark,
        selectedMetaTextColor: neutralPrimary,
        selectedBackgroundColor: neutralLight,
        // Selected Hover
        selectedHoverTextColor: black,
        selectedHoverMetaTextColor: neutralDark,
        selectedHoverBackgroundColor: neutralQuaternaryAlt,
        // Focus
        focusHeaderTextColor: black,
        focusBackgroundColor: neutralQuaternaryAlt,
        focusMetaTextColor: neutralDark
    };
    var thickBorderStyle = values.rowShimmerHorizontalBorder * 4 + "px solid " + colors.defaultBackgroundColor;
    var thinBorderStyle = values.rowShimmerHorizontalBorder + "px solid " + colors.defaultBackgroundColor;
    var selectedStyles = [
        Styling_1.getFocusStyle(theme, -1, undefined, undefined, themePrimary, white),
        classNames.isSelected,
        {
            color: colors.selectedMetaTextColor,
            background: colors.selectedBackgroundColor,
            borderBottom: "1px solid " + white,
            selectors: {
                '&:before': {
                    position: 'absolute',
                    display: 'block',
                    top: -1,
                    height: 1,
                    bottom: 0,
                    left: 0,
                    right: 0,
                    content: '',
                    borderTop: "1px solid " + white
                },
                // Selected State hover
                '&:hover': {
                    background: colors.selectedHoverBackgroundColor,
                    selectors: {
                        // Selected State hover meta cell
                        $cell: {
                            color: colors.selectedHoverMetaTextColor,
                            selectors: (_b = {},
                                _b[Styling_1.HighContrastSelector] = {
                                    color: 'HighlightText',
                                    selectors: {
                                        '> a': {
                                            color: 'HighlightText'
                                        }
                                    }
                                },
                                // Selected State hover Header cell
                                _b['&.$isRowHeader'] = {
                                    color: colors.selectedHoverTextColor,
                                    selectors: (_c = {},
                                        _c[Styling_1.HighContrastSelector] = {
                                            color: 'HighlightText'
                                        },
                                        _c)
                                },
                                _b)
                        }
                    }
                },
                // Focus state
                '&:focus': {
                    background: colors.focusBackgroundColor,
                    selectors: {
                        // Selected State hover meta cell
                        $cell: (_d = {
                                color: colors.focusMetaTextColor
                            },
                            _d[Styling_1.HighContrastSelector] = {
                                color: 'HighlightText',
                                selectors: {
                                    '> a': {
                                        color: 'HighlightText'
                                    }
                                }
                            },
                            // Row header cell
                            _d['&.$isRowHeader'] = {
                                color: colors.focusHeaderTextColor,
                                selectors: (_e = {},
                                    _e[Styling_1.HighContrastSelector] = {
                                        color: 'HighlightText'
                                    },
                                    _e)
                            },
                            _d)
                    }
                }
            }
        }
    ];
    var cannotSelectStyles = [
        classNames.isContentUnselectable,
        {
            userSelect: 'none',
            cursor: 'default'
        }
    ];
    var rootCompactStyles = {
        minHeight: values.compactRowHeight,
        border: 0
    };
    var cellCompactStyles = {
        minHeight: values.compactRowHeight,
        paddingTop: values.compactRowVerticalPadding,
        paddingBottom: values.compactRowVerticalPadding,
        paddingLeft: 12,
        selectors: (_f = {},
            // Masking the running shimmer background with borders
            _f["&.$shimmer"] = {
                padding: 0,
                borderLeft: thinBorderStyle,
                borderRight: thickBorderStyle,
                borderTop: values.compactRowShimmerVerticalBorder + "px solid " + colors.defaultBackgroundColor,
                borderBottom: values.compactRowShimmerVerticalBorder + "px solid " + colors.defaultBackgroundColor
            },
            // Masking the running shimmer background with borders when it's an Icon placeholder
            _f["&.$shimmerIconPlaceholder"] = {
                borderLeft: values.rowShimmerHorizontalBorder + "px solid " + colors.defaultBackgroundColor,
                borderBottom: (values.compactRowHeight - values.rowShimmerIconPlaceholderHeight) / 2 + "px solid " + colors.defaultBackgroundColor,
                borderTop: (values.compactRowHeight - values.rowShimmerIconPlaceholderHeight) / 2 + "px solid " + colors.defaultBackgroundColor
            },
            _f)
    };
    var defaultCellStyles = [
        Styling_1.getFocusStyle(theme, -1),
        classNames.cell,
        {
            display: 'inline-block',
            position: 'relative',
            boxSizing: 'border-box',
            minHeight: values.rowHeight,
            verticalAlign: 'top',
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            paddingTop: values.rowVerticalPadding,
            paddingBottom: values.rowVerticalPadding,
            paddingLeft: 12,
            selectors: (_g = {
                    '& > button': {
                        maxWidth: '100%'
                    }
                },
                _g[classNames.isFocusable] = Styling_1.getFocusStyle(theme, -1, undefined, undefined, neutralSecondary, white),
                _g['&.$shimmer'] = {
                    padding: 0,
                    borderLeft: thinBorderStyle,
                    borderRight: thickBorderStyle,
                    borderTop: values.rowShimmerVerticalBorder + "px solid " + colors.defaultBackgroundColor,
                    borderBottom: values.rowShimmerVerticalBorder + "px solid " + colors.defaultBackgroundColor
                },
                _g['&.$shimmerIconPlaceholder'] = {
                    borderLeft: values.rowShimmerHorizontalBorder + "px solid " + colors.defaultBackgroundColor,
                    borderBottom: (values.rowHeight - values.rowShimmerIconPlaceholderHeight) / 2 + "px solid " + colors.defaultBackgroundColor,
                    borderTop: (values.rowHeight - values.rowShimmerIconPlaceholderHeight) / 2 + "px solid " + colors.defaultBackgroundColor
                },
                _g)
        },
        isSelected && {
            selectors: (_h = {
                    '&.$isRowHeader': {
                        color: colors.selectedTextColor,
                        selectors: (_j = {},
                            _j[Styling_1.HighContrastSelector] = {
                                color: 'HighlightText'
                            },
                            _j)
                    }
                },
                _h[Styling_1.HighContrastSelector] = {
                    background: 'Highlight',
                    color: 'HighlightText',
                    '-ms-high-contrast-adjust': 'none',
                    selectors: {
                        a: {
                            color: 'HighlightText'
                        }
                    }
                },
                _h)
        },
        compact && cellCompactStyles
    ];
    return {
        root: [
            classNames.root,
            Styling_1.AnimationClassNames.fadeIn400,
            droppingClassName,
            isCheckVisible && classNames.isCheckVisible,
            Styling_1.getFocusStyle(theme, 0, undefined, undefined, isSelected ? neutralSecondary : themePrimary, white),
            {
                borderBottom: "1px solid " + neutralLighter,
                background: colors.defaultBackgroundColor,
                color: colors.defaultMetaTextColor,
                display: 'flex',
                minWidth: '100%',
                minHeight: values.rowHeight,
                whiteSpace: 'nowrap',
                padding: 0,
                boxSizing: 'border-box',
                verticalAlign: 'top',
                textAlign: 'left',
                selectors: (_k = {},
                    _k[classNames.listCellFirstChild + " &:before"] = {
                        display: 'none'
                    },
                    _k['&:hover'] = {
                        background: colors.hoverColorBackground,
                        color: colors.hoverMetaTextColor
                    },
                    _k['&:hover $check'] = {
                        opacity: 1
                    },
                    _k)
            },
            isSelected && selectedStyles,
            !canSelect && cannotSelectStyles,
            compact && rootCompactStyles,
            className
        ],
        cellUnpadded: [
            {
                paddingRight: values.rowHorizontalPadding
            }
        ],
        cellPadded: [
            {
                paddingRight: values.isPaddedMargin + values.rowHorizontalPadding,
                selectors: {
                    '&.$checkCell': {
                        paddingRight: 0
                    }
                }
            }
        ],
        cell: defaultCellStyles,
        cellMeasurer: [
            classNames.cellMeasurer,
            {
                overflow: 'visible',
                whiteSpace: 'nowrap'
            }
        ],
        checkCell: [
            defaultCellStyles,
            classNames.cellCheck,
            checkboxCellClassName,
            {
                padding: 0,
                // Ensure that the check cell covers the top border of the cell.
                // This ensures the click target does not leave a spot which would
                // cause other items to be deselected.
                paddingTop: 1,
                marginTop: -1,
                flexShrink: 0
            }
        ],
        checkCover: [
            {
                position: 'absolute',
                top: -1,
                left: 0,
                bottom: 0,
                right: 0,
                display: 'none'
            },
            anySelected && {
                display: 'block'
            }
        ],
        fields: [
            classNames.fields,
            {
                display: 'flex',
                alignItems: 'stretch'
            }
        ],
        isRowHeader: [
            {
                color: colors.defaultHeaderTextColor,
                fontSize: Styling_1.FontSizes.medium
            }
        ],
        isMultiline: [
            {
                whiteSpace: 'normal',
                wordBreak: 'break-word',
                textOverflow: 'clip'
            }
        ],
        shimmer: [],
        shimmerIconPlaceholder: [],
        shimmerLeftBorder: [
            {
                // 40px to take into account the checkbox of items if present.
                borderLeft: "40px solid " + colors.defaultBackgroundColor
            }
        ],
        shimmerBottomBorder: [
            {
                // 1px to take into account the border-bottom when items replace shimmer lines and in default state.
                borderBottom: "1px solid " + colors.defaultBackgroundColor
            }
        ],
        check: []
    };
    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
};
//# sourceMappingURL=DetailsRow.styles.js.map