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

const iconSize = fontSizes.medium;
const activeIconSize = sizes.medium;
const stepLineHeight = sizes.xxsmall;

const stepMaxWidthMobile = sizes.xxlarge;
const stepMaxWidthDesktop = sizes.xxlarge * 3;

const stepsSizes = {
  iconSize: `${iconSize}px`,
  lineHeight: `${stepLineHeight}px`,
  activeIconSize: `${activeIconSize}px`,
  maxWidthDesktop: `${iconSize + stepMaxWidthDesktop}px`,
  maxWidthMobile: `${iconSize + stepMaxWidthMobile}px`,
};

const stepsSpace = {
  padding: `${space.medium}px 0px`,
  linePositionTop: `${(iconSize - stepLineHeight) / 2}px`,
  linePositionLeft: `calc(-50% + ${iconSize / 2}px)`,
  linePositionRight: `calc(50% + ${iconSize / 2}px)`,
  labelMargin: `${space.small}px 0 0 0`,
};

const stepsColors = {
  labelCompleteText: systemPalette.lightPrimary,
  labelIncompleteText: systemPalette.bodyText,
  labelActiveText: systemPalette.primary,
  lineCompleteBg: systemPalette.lightPrimary,
  lineIncompleteBg: systemPalette.neutralBackground,
  completeBg: systemPalette.defaultDarkBackground,
  activeCompleteBg: systemPalette.primaryBackground,
  activeIncompleteBg: systemPalette.defaultLightBackground,
  activeIconBorder: systemPalette.primary,
  incompleteIconBorder: systemPalette.subduedText,
};

const stepsFontSizes = {
  labelInactive: `${fontSizes.small}px`,
  labelActive: `${fontSizes.medium}px`,
  activeIcon: `${fontSizes.xsmall}px`,
};

const stepsLineHeights = {
  labelInactive: `${lineHeights.small}px`,
  labelActive: `${lineHeights.medium}px`,
};

const stepsFontWeights = {
  labelActive: fontWeights.semiBold,
};

const stepsRadii = {
  icon: '100%',
};

// TODO: Invalidate that can we define borderWidths using sizes
const stepsBorderWidths = {
  activeIcon: `${sizes.xxsmall}px`,
  incompleteIcon: `${sizes.xxsmall}px`,
};

export {
  stepsSizes,
  stepsRadii,
  stepsBorderWidths,
  stepsSpace,
  stepsColors,
  stepsFontSizes,
  stepsFontWeights,
  stepsLineHeights,
};