import { sizes } from '../global/sizes';
import { space } from '../global/space';
import { borderWidths, radii } from '../global/borders';
import { systemPalette } from '../global/colors';

interface SliderColors {
  background: string;
  disabled: string;
  thumbBackground: string;
  thumbBorder: string;
  track: string;
}

interface SliderBorderWidths {
  thumb: string;
}

interface SliderRadii {
  default: string;
}

interface SliderSizes {
  inputHeight: string;
  thumb: string;
  tooltipMinWidth: string;
  trackHeight: string;
}

interface SliderSpace {
  tooltipOffsetLeft: string;
  tooltipPointerOffsetTop: string;
  trackOffsetTop: string;
}

interface SliderShadows {
  thumb: string;
}

const sliderColors: SliderColors = {
  background: systemPalette.defaultGreyBackground,
  thumbBackground: systemPalette.defaultLightBackground,
  thumbBorder: systemPalette.primaryRingBackground,
  track: systemPalette.primary,
  disabled: systemPalette.neutralDarkBackground,
};

const sliderBorderWidths: SliderBorderWidths = {
  thumb: `${borderWidths.base * 2}px`,
};

const sliderRadii: SliderRadii = {
  default: `${radii.base}px`,
};

const sliderSizes: SliderSizes = {
  trackHeight: `${sizes.xsmall}px`,
  thumb: `${sizes.medium}px`,
  inputHeight: `${sizes.medium}px`,
  tooltipMinWidth: `${sizes.medium}px`,
};

const sliderSpace: SliderSpace = {
  trackOffsetTop: `calc((${sliderSizes.inputHeight} - ${sliderSizes.trackHeight}) / 2)`,
  tooltipOffsetLeft: `calc(${sliderSizes.thumb} / 2 - ${sliderBorderWidths.thumb})`,
  tooltipPointerOffsetTop: `${sizes.large + space.xxsmall}px`,
};

const sliderShadows: SliderShadows = {
  thumb: `0 0 0 3px ${systemPalette.primaryBackground}`,
};

export {
  sliderColors,
  sliderBorderWidths,
  sliderRadii,
  sliderSizes,
  sliderSpace,
  sliderShadows,
};