import legacyVariables from './variables';

const THUMB_SIZE = legacyVariables.BASE_SIZE * 1.5;
const THUMB_COLOR = legacyVariables.WHITE;
const TRACK_WIDTH = THUMB_SIZE * 2;
const TRACK_HEIGHT = THUMB_SIZE;
const TRACK_COLOR_ON = legacyVariables.PRIMARY_COLOR;
const TRACK_COLOR_OFF = legacyVariables.DISABLED_BACKGROUND_COLOR;
const WRAPPER_PADDING = 2;
const WRAPPER_WIDTH = TRACK_WIDTH + WRAPPER_PADDING * 2;
const WRAPPER_HEIGHT = TRACK_HEIGHT + WRAPPER_PADDING * 2;

const styles = {
  track: {
    width: WRAPPER_WIDTH,
    height: WRAPPER_HEIGHT,
    padding: WRAPPER_PADDING,
    borderRadius: WRAPPER_HEIGHT / 2,
  },
  trackOn: {
    backgroundColor: TRACK_COLOR_ON,
  },
  trackOff: {
    backgroundColor: TRACK_COLOR_OFF,
  },
  thumbWrapper: {
    width: TRACK_WIDTH,
    height: TRACK_HEIGHT,
    borderRadius: TRACK_HEIGHT / 2,
  },
  thumb: {
    position: 'absolute',
    top: 0,
    width: THUMB_SIZE,
    height: THUMB_SIZE,
    backgroundColor: THUMB_COLOR,
    borderRadius: THUMB_SIZE / 2,
  },
  thumbOff: {
    left: 0,
  },
  thumbOn: {
    left: TRACK_WIDTH - THUMB_SIZE,
  },
} as const;

export default styles;