<script setup lang="ts">
import type { Orientation } from './Slider'
import type { UseZoomAxis } from '@/lib/useZoomAxis'
import Add from '@material-design-icons/svg/filled/add.svg'
import Remove from '@material-design-icons/svg/filled/remove.svg'
import Slider from '@/components/library/Slider.vue'
import ToolButtonSmall from './ToolButtonSmall.vue'

const {
  axis,
  orientation = 'horizontal',
} = defineProps<{
  axis: UseZoomAxis
  orientation?: Orientation
}>()
</script>

<!-- for some reason min-width does not propagate up from Slider -->
<template>
  <div
    class="tw:px-2 tw:flex tw:items-center tw:gap-2"
    :class="orientation === 'vertical' ? 'tw:flex-col' : 'tw:flex-row'"
  >
    <ToolButtonSmall :icon="Remove" title="Zoom Out" :disabled="axis.isAtMin.value" @click="axis.zoomOut" />

    <!-- skip :defaultValue="axis.default.discrete.value" because snapping makes dragging to negative values impossible -->
    <Slider
      v-model.number="axis.zoom.discrete.value"
      :min="axis.min.discrete.value"
      :max="axis.max.discrete.value"
      :step="axis.stepSmall.discrete.value"
      :orientation
      :reset="axis.reset"
    />

    <ToolButtonSmall :icon="Add" title="Zoom In" :disabled="axis.isAtMax.value" @click="axis.zoomIn" />
  </div>
</template>

<style scoped></style>
