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

const itemLineWidth = sizes.xxsmall;
const itemMarkerSize = sizes.medium;
const itemBorderWidth = sizes.xxsmall;
const itemMarkerPositionTop = space.xxsmall;

const timelineSpace = {
  itemPaddingBottom: `${space.large}px`,
  itemLinePositionLeft: `${itemMarkerSize / 2}px`,
  itemLinePositionTop: `${itemMarkerSize + itemMarkerPositionTop}px`,
  itemMarkerPositionTop: `${itemMarkerPositionTop}px`,
  itemContentMarginLeft: `${space.xlarge}px`,
};

const timelineSizes = {
  itemLineWidth: `${itemLineWidth}px`,
  itemMarkerWidth: `${itemMarkerSize + itemBorderWidth}px`,
  itemMarkerHeight: `${itemMarkerSize + itemBorderWidth}px`,
  itemLineHeight: `calc(100% - ${itemMarkerSize}px)`,
};

const timelineFontSizes = {
  itemText: `${fontSizes.large}px`,
  itemHelpText: `${fontSizes.medium}px`,
};

const timelineLineHeights = {
  itemText: `${lineHeights.large}px`,
  itemHelpText: `${lineHeights.medium}px`,
};

const timelineFontWeights = {
  itemText: fontWeights.semiBold,
  itemHelpText: fontWeights.regular,
};

const timelineColors = {
  itemLineBg: systemPalette.neutralBackground,
  itemMarkerBg: systemPalette.defaultLightBackground,
  itemText: systemPalette.text,
  itemHelpText: systemPalette.text,
  itemMarkerDefault: systemPalette.neutralDarkBackground,
  itemMarkerSuccess: systemPalette.success,
  itemMarkerInfo: systemPalette.primary,
  itemMarkerWarning: systemPalette.warning,
  itemMarkerDanger: systemPalette.danger,
  itemMarkerError: systemPalette.error,
};

const timelineBorderWidths = {
  itemMarker: `${itemBorderWidth}px`,
};

export {
  timelineSpace,
  timelineSizes,
  timelineFontSizes,
  timelineLineHeights,
  timelineFontWeights,
  timelineColors,
  timelineBorderWidths,
};