import globals from '../globals';
import { getThemeRefs } from '../../helpers/themeHelpers';
import { GridClass } from '../../components/descope-grid/GridClass';
import { refs } from './inputWrapper';

const globalRefs = getThemeRefs(globals);
const vars = GridClass.cssVarList;

export const grid = {
  [vars.hostWidth]: '100%',
  [vars.hostHeight]: '100%',
  [vars.hostMinHeight]: '400px',
  [vars.fontWeight]: '400',
  [vars.backgroundColor]: globalRefs.colors.surface.main,

  [vars.fontSize]: refs.fontSize,
  [vars.fontFamily]: refs.fontFamily,

  [vars.sortIndicatorsColor]: globalRefs.colors.surface.light,
  [vars.activeSortIndicator]: globalRefs.colors.surface.dark,
  [vars.resizeHandleColor]: globalRefs.colors.surface.light,

  [vars.borderWidth]: refs.borderWidth,
  [vars.borderStyle]: refs.borderStyle,
  [vars.borderRadius]: refs.borderRadius,
  [vars.borderColor]: 'transparent',

  [vars.headerRowTextColor]: globalRefs.colors.surface.dark,
  [vars.separatorColor]: globalRefs.colors.surface.light,

  [vars.valueTextColor]: globalRefs.colors.surface.contrast,
  [vars.selectedBackgroundColor]: globalRefs.colors.surface.highlight,
  [vars.hostDirection]: globalRefs.direction,

  [vars.toggleDetailsPanelButtonSize]: '1em',
  [vars.toggleDetailsPanelButtonOpenedColor]: globalRefs.colors.surface.contrast,
  [vars.toggleDetailsPanelButtonClosedColor]: globalRefs.colors.surface.light,
  [vars.toggleDetailsPanelButtonCursor]: 'pointer',
  [vars.detailsPanelBackgroundColor]: globalRefs.colors.surface.highlight,
  [vars.detailsPanelBorderTopColor]: globalRefs.colors.surface.light,
  [vars.detailsPanelLabelsColor]: globalRefs.colors.surface.dark,
  [vars.detailsPanelLabelsFontSize]: '0.8em',
  [vars.detailsPanelItemsGap]: '2em',
  [vars.detailsPanelPadding]: '12px 0',

  _bordered: {
    [vars.borderColor]: refs.borderColor,
  },
};

export default grid;
export { vars };
