<template>
  <div>
    <div>
      <select v-model="link.type" class="form-control link-type-select" @change="link.value = null">
        <option value="none">Нет ссылки</option>
        <option value="category">Ссылка на категорию</option>
        <option value="product">Ссылка на товар</option>
        <option value="url">Внешняя ссылка</option>
      </select>
    </div>

    <div v-if="link.type === 'url'" class="mt-10">
      <input
        :value="link.value?.url"
        @input="setLink($event.target.value)"
        type="text"
        placeholder="https://example.com"
        class="form-control"
      />
    </div>

    <div v-else-if="link.type === 'category'" class="mt-10">
      <CategorySelect v-model="link.value"/>
    </div>

    <div v-else-if="link.type === 'product'" class="mt-10">
      <ProductSelect v-model="link.value"/>
    </div>

    <div v-else-if="link.type === 'none'"></div>

    <div v-else class="alert alert-danger">Не поддерживается: {{ link.type }}</div>
  </div>
</template>

<script setup>
import CategorySelect from "@/components/Slider/CategorySelect.vue";
import ProductSelect from "@/components/Slider/ProductSelect.vue";

const link = defineModel();

function setLink(value) {
  if (link.value?.value) {
    link.value.value.url = value;
  } else {
    link.value.value = { url: value };
  }
}
</script>

<style scoped>
.link-type-select {
  cursor: pointer;
}

.mt-10 {
  margin-top: 10px;
}
</style>
