import { fontSizes, lineHeights, fontWeights } from '../global/typography';
import { borderWidths, radii } from '../global/borders';
import { space } from '../global/space';
import { sizes } from '../global/sizes';
import { systemPalette, palette } from '../global/colors';
import { shadows } from '../global/shadows';

const tableSizes = {
  expandableIcon: `${sizes.medium}px`,
  itemsPerPageInputWidth: '65px',
  columnDividerWidth: '20px',
  filterButton: `${sizes.xlarge}px`,
};

const tableColors = {
  background: systemPalette.defaultLightBackground,
  headerText: systemPalette.text,
  headerBackground: systemPalette.primaryHeaderBackground,
  rowFocusBackground: systemPalette.defaultGreyBackground,
  cellText: systemPalette.text,
  cellBorder: systemPalette.defaultBorder,
  expandableIconBorder: systemPalette.defaultBorder,
  emptyText: systemPalette.subduedText,
  filterButtonBackground: systemPalette.defaultLightBackground,
  filterButtonBorder: systemPalette.defaultBorder,
  filterButtonHoverBorder: systemPalette.black,
  filterButtonActiveBackground: palette.smaltLight75,
  filterButtonActiveBorder: systemPalette.black,
  filterLabelText: systemPalette.subduedText,
};

const tableSpace = {
  headerPadding: `${space.medium}px`,
  cellPadding: `${space.medium}px`,
  sortingIconMarginLeft: `${space.small}px`,
  expandableIconPadding: `${space.xxsmall}px`,
  paginationMarginTop: `${space.medium}px`,
  emptyContentMargin: `${space.large}px`,
  emptyContentPadding: `${space.large}px`,
  filterButtonMarginRight: `${space.small}px`,
  filterButtonMarginBottom: `${space.small}px`,
  filterButtonPadding: `${space.small}px ${space.medium}px`,
  filterButtonIconPadding: `${space.small}px`,
  filterDropdownPadding: `${space.medium}px`,
  filterLabelContentPadding: `${space.xsmall}px`,
};

const tableFontSizes = {
  header: `${fontSizes.medium}px`,
  cell: `${fontSizes.medium}px`,
  sortingIcon: `${fontSizes.xsmall}px`,
  expandableIcon: `${fontSizes.xsmall}px`,
  filterButton: `${fontSizes.medium}px`,
};

const tableFontWeights = {
  header: fontWeights.semiBold,
  cell: fontWeights.regular,
  filterButton: fontWeights.semiBold,
  filterLabel: fontWeights.semiBold,
  filterBy: fontWeights.semiBold,
};

const tableLineHeights = {
  header: `${lineHeights.medium}px`,
  cell: `${lineHeights.medium}px`,
  sortingIcon: `${lineHeights.xsmall}px`,
  filterButton: `${lineHeights.medium}px`,
};

const tableBorderWidths = {
  cell: `${borderWidths.base}px`,
  expandableIcon: `${borderWidths.base}px`,
  filterButton: `${borderWidths.base}px`,
};

const tableRadii = {
  expandableIcon: `${radii.base}px`,
  header: `${radii.base}px`,
  filterButton: `6px`,
};

const tableShadows = {
  columnDivider: `${shadows.divider}`,
};

export {
  tableSizes,
  tableColors,
  tableSpace,
  tableFontSizes,
  tableFontWeights,
  tableLineHeights,
  tableBorderWidths,
  tableRadii,
  tableShadows,
};