import { ref } from 'vue'
import { DEFAULT_FORM_STYLES } from '@/constants/defaultFormStyles'
import { SLIDER_STYLE_DEFAULTS } from '@/constants/sliderStyleDefaults'
import { resolveSyncStringValue } from '@/utils/styleUtils'
import type { AdvancedModeSettings } from '@/types/form-style'

const defaults = DEFAULT_FORM_STYLES.advancedMode?.slider ?? SLIDER_STYLE_DEFAULTS

function resolveSliderTrackColor(
  advancedMode: AdvancedModeSettings | undefined,
): string | undefined {
  return advancedMode?.slider?.trackColor ?? advancedMode?.slider?.rangeColor
}

export function createSliderStyleRefs() {
  return {
    sliderHandleColor: ref(defaults.handleColor ?? SLIDER_STYLE_DEFAULTS.handleColor),
    sliderHighlightColor: ref(defaults.highlightColor ?? SLIDER_STYLE_DEFAULTS.highlightColor),
    sliderBorderColor: ref(defaults.borderColor ?? SLIDER_STYLE_DEFAULTS.borderColor),
    sliderTrackColor: ref(defaults.trackColor ?? SLIDER_STYLE_DEFAULTS.trackColor),
    sliderRemainingTrackColor: ref(
      defaults.remainingTrackColor ?? SLIDER_STYLE_DEFAULTS.remainingTrackColor,
    ),
  }
}

export type SliderStyleRefs = ReturnType<typeof createSliderStyleRefs>

export function syncSliderStyleRefs(
  refs: SliderStyleRefs,
  advancedMode: AdvancedModeSettings | undefined,
) {
  refs.sliderHandleColor.value = resolveSyncStringValue(
    advancedMode?.slider?.handleColor,
    defaults.handleColor,
  )
  refs.sliderHighlightColor.value = resolveSyncStringValue(
    advancedMode?.slider?.highlightColor,
    defaults.highlightColor,
  )
  refs.sliderBorderColor.value = resolveSyncStringValue(
    advancedMode?.slider?.borderColor,
    defaults.borderColor,
  )
  refs.sliderTrackColor.value = resolveSyncStringValue(
    resolveSliderTrackColor(advancedMode),
    defaults.trackColor,
  )
  refs.sliderRemainingTrackColor.value = resolveSyncStringValue(
    advancedMode?.slider?.remainingTrackColor,
    defaults.remainingTrackColor,
  )
}

export function getSliderStyleStoreWatchers(refs: SliderStyleRefs) {
  return [
    {
      ref: refs.sliderHandleColor,
      storePath: 'advancedMode.slider.handleColor',
      syncPaths: ['advancedMode.slider.handleColor'],
    },
    {
      ref: refs.sliderHighlightColor,
      storePath: 'advancedMode.slider.highlightColor',
      syncPaths: ['advancedMode.slider.highlightColor'],
    },
    {
      ref: refs.sliderBorderColor,
      storePath: 'advancedMode.slider.borderColor',
      syncPaths: ['advancedMode.slider.borderColor'],
    },
    {
      ref: refs.sliderTrackColor,
      storePath: 'advancedMode.slider.trackColor',
      syncPaths: ['advancedMode.slider.trackColor', 'advancedMode.slider.rangeColor'],
    },
    {
      ref: refs.sliderRemainingTrackColor,
      storePath: 'advancedMode.slider.remainingTrackColor',
      syncPaths: ['advancedMode.slider.remainingTrackColor'],
    },
  ]
}