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

interface DatePickerColors {
  disabledText: string;
  hoverBackground: string;
  inRangeBackground: string;
  inRangeHoverBackground: string;
  inRangeHoverText: string;
  rangeBorder: string;
  rangeFocusBar: string;
  rangeFocusBorder: string;
  selectedBackground: string;
  selectedText: string;
  text: string;
  todayBorder: string;
  todayText: string;
}

interface DatePickerSpace {
  calendarPadding: string;
  dayMargin: string;
  dayPadding: string;
  monthMargin: string;
  monthPadding: string;
  monthYearPadding: string;
  navigationPadding: string;
}

interface DatePickerSizes {
  day: string;
  month: string;
  monthYear: string;
  rangeFocusBar: string;
}

interface DatePickerFontSizes {
  day: string;
  month: string;
}

interface DatePickerFontWeights {
  day: number;
  month: number;
  selectedDay: number;
  selectedMonth: number;
}

interface DatePickerLineHeights {
  day: string;
  month: string;
}

interface DatePickerBorderWidths {
  day: string;
  month: string;
  range: string;
}

interface DatePickerRadii {
  day: string;
  month: string;
  range: string;
}

interface DatePickerShadows {
  dropdown: string;
  range: string;
}

const datePickerColors: DatePickerColors = {
  text: systemPalette.text,
  disabledText: systemPalette.subduedText,
  selectedText: systemPalette.lightText,
  todayText: systemPalette.primary,
  hoverBackground: systemPalette.primaryLightBackground,
  selectedBackground: systemPalette.primary,
  todayBorder: systemPalette.primary,
  inRangeBackground: systemPalette.primaryLightBackground,
  inRangeHoverBackground: systemPalette.hoverPrimary,
  inRangeHoverText: systemPalette.lightText,
  rangeBorder: systemPalette.defaultBorder,
  rangeFocusBorder: systemPalette.primary,
  rangeFocusBar: systemPalette.primary,
};

const datePickerSpace: DatePickerSpace = {
  navigationPadding: `${space.medium}px ${space.medium}px ${space.xsmall}px`,
  monthYearPadding: `0 ${space.small}px`,
  calendarPadding: `${space.small}px`,
  dayMargin: `${space.xsmall}px 0`,
  dayPadding: ` 0 ${space.small}px`,
  monthPadding: `${space.xxsmall}px 0`,
  monthMargin: `${space.xsmall}px ${space.small}px`,
};

const datePickerSizes: DatePickerSizes = {
  // TODO: When implement localization for month picker, must remove the fixed size
  // Because the months may not have enough space to display.
  month: '210px',
  monthYear: '100px',
  day: `${sizes.large}px`,
  rangeFocusBar: `${sizes.xxsmall}px`,
};

const datePickerFontSizes: DatePickerFontSizes = {
  day: `${fontSizes.medium}px`,
  month: `${fontSizes.medium}px`,
};

const datePickerFontWeights: DatePickerFontWeights = {
  day: fontWeights.regular,
  month: fontWeights.regular,
  selectedDay: fontWeights.bold,
  selectedMonth: fontWeights.bold,
};

const datePickerLineHeights: DatePickerLineHeights = {
  day: `${lineHeights.medium}px`,
  month: `${lineHeights.medium}px`,
};

const datePickerBorderWidths: DatePickerBorderWidths = {
  range: `${borderWidths.base}px`,
  day: `${borderWidths.base}px`,
  month: `${borderWidths.base}px`,
};

const datePickerRadii: DatePickerRadii = {
  day: `${radii.base}px`,
  month: `${radii.base}px`,
  range: `${radii.base}px`,
};

const datePickerShadows: DatePickerShadows = {
  dropdown: shadows.default,
  range: shadows.primary,
};

export {
  datePickerColors,
  datePickerSpace,
  datePickerSizes,
  datePickerFontSizes,
  datePickerFontWeights,
  datePickerLineHeights,
  datePickerBorderWidths,
  datePickerRadii,
  datePickerShadows,
};