import { UNSELECTED_TRACK_OPACITY } from '../../components/Slider/constants';
import { dimHex, hexToRgba } from '../../utils/helpers';
import type { GlobalTheme } from '../global';

const getSliderTheme = (theme: GlobalTheme) => {
  const colors = {
    // Unselected track colors
    unselectedTrack: hexToRgba(
      theme.colors.overlayGlobalSurface,
      UNSELECTED_TRACK_OPACITY
    ),
    disabledUnselectedTrack: dimHex(
      theme.colors.overlayGlobalSurface,
      theme.colors.defaultGlobalSurface
    ),

    // Selected track colors
    selectedTrack: theme.colors.primary,
    disabledSelectedTrack: dimHex(
      theme.colors.primary,
      theme.colors.defaultGlobalSurface
    ),

    // Thumb/marker colors
    thumb: theme.colors.primary,
    disabledThumb: dimHex(
      theme.colors.primary,
      theme.colors.defaultGlobalSurface
    ),
  };

  const shadows = {
    marker: theme.shadows.default,
  };

  const sizes = {
    trackHeight: theme.sizes.xsmall,
    markerWidth: theme.sizes.large,
    markerHeight: theme.sizes.large,
    markerBorderRadius: theme.radii.rounded,
  };

  const radii = {
    marker: theme.radii.rounded,
  };

  return { colors, shadows, sizes, radii };
};

export default getSliderTheme;