<template>
  <ConfigSection
    :title="$t('config_options.feedback_designer.feedback_type.title')"
    :icon-component="GaugeCircle">
    <div class="flex font-heading">
      <FeedbackTypeButton
        v-for="(option, key) in feedbackTypeOptions" :key="key" :title="$t(option.titleKey)"
        :icon="option.icon" :selected="feedbackType===key" @select="feedbackType=key" />
    </div>
  </ConfigSection>
  <ConfigSection
    :title="$t('config_options.feedback_designer.haptic_response.title')"
    :icon-component="AudioWaveform"
    :show-toggle="true">
    <SteppedSlider
      v-model="feedbackStrength"
      :label="$t('config_options.feedback_designer.haptic_response.feedback_strength')" />
    <Separator />
    <SteppedSlider
      v-model="bounceBackStrength"
      :label="$t('config_options.feedback_designer.haptic_response.bounce_back_strength')" />
    <Separator />
    <SteppedSlider
      v-model="outputRampDampening"
      :label="$t('config_options.feedback_designer.haptic_response.output_ramp_dampening')" />
  </ConfigSection>
  <ConfigSection
    :title="$t('config_options.feedback_designer.auditory_response.title')"
    :icon-component="AudioLines" :show-toggle="true">
    <SteppedSlider
      v-model="auditoryHapticLevel"
      :label="$t('config_options.feedback_designer.auditory_response.haptic_level')" />
    <Separator />
    <SteppedSlider
      v-model="auditoryMagnitude"
      :label="$t('config_options.feedback_designer.auditory_response.magnitude')"
      :max="3"
      :named-positions="[
              {value:0, label: 'Faint'},
              {value:1, label: 'Soft'},
              {value:2, label: 'Normal'},
              {value:3, label: 'Loud'}]" />
  </ConfigSection>
</template>
<script setup>
import { AudioLines, AudioWaveform, GaugeCircle } from 'lucide-vue-next'
import ConfigSection from '@/components/config/ConfigSection.vue'
import SteppedSlider from '@/components/config/SteppedSlider.vue'
import { ref } from 'vue'
import FdIcon from '@/assets/gui-ico/ico-fd.svg'
import CdIcon from '@/assets/gui-ico/ico-cd.svg'
import VfIcon from '@/assets/gui-ico/ico-vf.svg'
import RcIcon from '@/assets/gui-ico/ico-rc.svg'
import FeedbackTypeButton from '@/components/config/FeedbackTypeButton.vue'

const feedbackType = ref('fineDetents') // TODO: replace with actual value

const feedbackTypeOptions = {
  fineDetents: {
    icon: FdIcon,
    titleKey: 'config_options.feedback_designer.feedback_type.fine_detents',
  },
  coarseDetents: {
    icon: CdIcon,
    titleKey: 'config_options.feedback_designer.feedback_type.coarse_detents',
  },
  viscousRotation: {
    icon: VfIcon,
    titleKey: 'config_options.feedback_designer.feedback_type.viscous_rotation',
  },
  returnToCenter: {
    icon: RcIcon,
    titleKey: 'config_options.feedback_designer.feedback_type.return_to_center',
  },
}

const feedbackStrength = ref(2)
const bounceBackStrength = ref(2)
const outputRampDampening = ref(2)

const auditoryHapticLevel = ref(2)
const auditoryMagnitude = ref(2)

</script>