import globals from '../globals';
import { CalendarClass } from '../../components/descope-date-field/descope-calendar/CalendarClass';
import { getThemeRefs } from '../../helpers/themeHelpers';
import { refs } from './inputWrapper';

const globalRefs = getThemeRefs(globals);

const vars = CalendarClass.cssVarList;

const calendar = {
  [vars.fontFamily]: refs.fontFamily,
  [vars.fontSize]: refs.fontSize,
  [vars.hostDirection]: refs.direction,

  [vars.calendarPadding]: '1em',

  [vars.topNavVerticalPadding]: '1em',
  [vars.topNavAlignment]: 'space-between',
  [vars.topNavGap]: '0',
  [vars.topNavSelectorsGap]: '0.5em',

  [vars.bottomNavVerticalPadding]: '0.75em',
  [vars.bottomNavHorizontalPadding]: '1.5em',
  [vars.bottomNavAlignment]: 'space-between',
  [vars.bottomNavGap]: '0.5em',

  [vars.navMarginBottom]: '0.75em',
  [vars.navBorderBottomWidth]: '1px',
  [vars.navBorderBottomColor]: globalRefs.colors.surface.highlight,
  [vars.navBorderBottomStyle]: 'solid',

  [vars.yearInputWidth]: '6em',
  [vars.monthInputWidth]: '8em',

  [vars.navButtonSize]: '24px',
  [vars.navButtonCursor]: 'pointer',

  [vars.weekdayFontSize]: '0.875em',
  [vars.weekdayFontWeight]: '500',

  // day table cell
  [vars.dayHeight]: '3.125em',

  // day value
  [vars.daySize]: '2.125em',
  [vars.dayFontSize]: '1em',
  [vars.dayRadius]: '50%',
  [vars.dayTextAlign]: 'center',
  [vars.dayPadding]: '0',
  [vars.dayTextColor]: globalRefs.colors.surface.contrast,
  [vars.dayFontWeight]: '500',
  [vars.dayBackgroundColor]: 'transparent',
  [vars.dayCursor]: 'pointer',
  [vars.dayBackgroundColorHover]: globalRefs.colors.primary.highlight,

  // selected day
  [vars.daySelectedBackgroundColor]: globalRefs.colors.primary.main,
  [vars.daySelectedTextdColor]: globalRefs.colors.primary.contrast,

  // disabled day (out of min/max range)
  [vars.dayDisabledTextdColor]: globalRefs.colors.surface.light,

  // today
  [vars.currentDayBorderColor]: globalRefs.colors.surface.light,
  [vars.currentDayBorderWidth]: '1px',
  [vars.currentDayBorderStyle]: 'solid',

  size: {
    xs: { [vars.fontSize]: '12px' },
    sm: { [vars.fontSize]: '14px' },
    md: { [vars.fontSize]: '16px' },
    lg: { [vars.fontSize]: '18px' },
  },

  [vars.navButtonRotation]: 'rotate(180deg)',

  _disabled: {
    [vars.navButtonOpacity]: '0.5',
    [vars.dayBackgroundColorHover]: 'none',
    [vars.navButtonCursor]: 'default',
    [vars.dayCursor]: 'default',
  },

  _fullWidth: {
    [vars.hostWidth]: '100%',
    [vars.dayBlockAlign]: '0 auto',
  },
};

export default calendar;
export { vars };
