import { scanState } from '@/models/scanState';
import { watch, WatchSource } from 'vue';
import { useViewer3cr } from '@/composables/useViewer3cr';
import { SlidersActions } from '@3cr/types-ts';

type WatchScanSliders = {
  [key in SlidersActions]: WatchSource<number>;
};

const sliders: WatchScanSliders = {
  [SlidersActions.sl01]: () => scanState.value.Display.Brightness,
  [SlidersActions.sl02]: () => scanState.value.Display.Contrast,
  [SlidersActions.sl03]: () => scanState.value.Display.Opacity,
  [SlidersActions.sl04]: () => scanState.value.Display.WindowLower,
  [SlidersActions.sl05]: () => scanState.value.Display.WindowUpper,
  [SlidersActions.sl06]: () => scanState.value.Display.ThresholdLower,
  [SlidersActions.sl07]: () => scanState.value.Display.ThresholdUpper,
  [SlidersActions.sl08]: () => scanState.value.Slice.TransverseLower,
  [SlidersActions.sl09]: () => scanState.value.Orientations.Transverse.Slice,
  [SlidersActions.sl10]: () => scanState.value.Slice.TransverseUpper,
  [SlidersActions.sl11]: () => scanState.value.Slice.SagittalLower,
  [SlidersActions.sl12]: () => scanState.value.Orientations.Sagittal.Slice,
  [SlidersActions.sl13]: () => scanState.value.Slice.SagittalUpper,
  [SlidersActions.sl14]: () => scanState.value.Slice.CoronalLower,
  [SlidersActions.sl15]: () => scanState.value.Orientations.Coronal.Slice,
  [SlidersActions.sl16]: () => scanState.value.Slice.CoronalUpper,
};

export function useScanSliders(): void {
  const viewer3cr = useViewer3cr();
  for (const slider of Object.keys(sliders) as (keyof WatchScanSliders)[]) {
    watch(sliders[slider], async (value: number) => {
      await viewer3cr.sliderHandler(slider, value);
    });
  }
}