<script setup lang="ts">
import { onUpdated } from 'vue';
import { InputType } from '../types';

interface Props {
  type: InputType;
  min?: number;
  max?: number;
}

const props = withDefaults(defineProps<Props>(), {
  type: InputType.Number,
})

const modelValue = defineModel<number | string>();

onUpdated(() => {
  // Задать граничное значение при выходе за допуустимые пределы
  if (props.type === InputType.Number && typeof modelValue.value === 'number') {
    if (props.min !== undefined) {
      if (modelValue.value < props.min) {
        modelValue.value = props.min
      }
    }

    if (props.max !== undefined) {
      if (modelValue.value > props.max) {
        modelValue.value = props.max
      }
    }
  }
})

</script>

<template>
  <div class="input-container">
    <label class="label">
      <slot></slot>
    </label>
    <br />
    <input
      :class="{
        input: true,
        'input--color': type === InputType.Color,
      }"
      :type="type"
      v-model="modelValue"
      :min="min"
      :max="max"
    />
  </div>
</template>

<style scoped>
.input-container {
  margin: 10px 0 0 0;
}

input {
  border: #333 1px solid;
}

.input {
  margin: 10px 0 0 0;
  border: 1px solid #c6ac8f;
  padding: 10px;
  border-radius: 10px;
}

.input--color {
  padding: 0;
  background-color: v-bind(modelValue);
}

.input--color::-webkit-color-swatch {
  border: none;
}
</style>
