"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.tableStyle = void 0;

var _ThemeProvider = require("../ThemeProvider");

var tableStyle = function tableStyle(_ref, _ref2) {
  var height = _ref.height,
      sticky = _ref.sticky,
      sortable = _ref.sortable,
      expandedContent = _ref.expandedContent,
      _ref$span = _ref.span,
      span = _ref$span === void 0 ? 1 : _ref$span;
  var colors = _ref2.colors;
  return {
    style: {
      color: 'bodyText',
      width: '100%',
      borderColor: 'border',
      borderRadius: 'radius',
      borderWidth: '1px',
      bg: 'cardBg'
    },
    container: {
      maxHeight: height,
      overflowY: height && 'auto',
      overflowX: 'auto',
      position: 'relative',
      _scrollbar: {
        width: '0.4em',
        height: '0.4em'
      },
      _thumb: {
        backgroundColor: colors.track
      }
    },
    row: {
      display: 'flex',
      width: '100%',
      position: 'relative',
      borderBottomWidth: expandedContent ? 0 : '5px',
      borderColor: 'border'
    },
    expandedRow: {
      backgroundColor: colors.tableHeaderBg,
      boxShadow: 'inset 0 3px 6px -3px rgba(0, 0, 0, .2)'
    },
    cell: {
      flex: span,
      textAlign: 'left',
      p: 4,
      display: 'inline-flex',
      alignItems: 'center'
    },
    headerRow: {
      position: sticky && 'sticky',
      top: 0,
      bg: 'tableHeaderBg',
      zIndex: 'docked'
    },
    headerCell: {
      display: 'inline-flex',
      alignItems: 'center',
      position: 'relative',
      cursor: sortable && 'pointer'
    },
    header: {
      color: 'titleText',
      bg: 'tableHeaderBg',
      fontWeight: 'semibold'
    },
    footer: {
      p: 4,
      bg: 'tableHeaderBg'
    }
  };
};

exports.tableStyle = tableStyle;

var useTableStyle = function useTableStyle(props) {
  var theme = (0, _ThemeProvider.useTheme)();
  var styles = theme['styles'].table ? theme['styles'].table(props, theme) : tableStyle(props, theme);
  return {
    // base style
    table: styles.style,
    container: styles.container,
    row: styles.row,
    expandedRow: styles.expandedRow,
    cell: styles.cell,
    headerCell: styles.headerCell,
    headerRow: styles.headerRow,
    header: styles.header,
    footer: styles.footer
  };
};

var _default = useTableStyle;
exports["default"] = _default;
//# sourceMappingURL=styles.js.map