<script setup>
import { ref } from 'vue'

const props = defineProps({
  competitors: { type: Array, required: true },
  submitting: { type: Boolean, default: false }
})
const emit = defineEmits(['submit'])

const TRAVEL_STYLES = ['Classic', 'Premium', 'Basic', 'NGS']

const productName = ref('')
const destination = ref('')
const duration = ref('')
const travelStyle = ref('Classic')
const tabType = ref('Standard')
const selectedIds = ref([])

function toggle(id) {
  const i = selectedIds.value.indexOf(id)
  if (i === -1) selectedIds.value.push(id)
  else selectedIds.value.splice(i, 1)
}

function submit() {
  emit('submit', {
    productName: productName.value,
    destination: destination.value,
    duration: Number(duration.value),
    travelStyle: travelStyle.value,
    tabType: tabType.value,
    competitorIds: selectedIds.value
  })
}
</script>

<template>
  <div class="card" style="padding:20px;">
    <div class="ct" style="margin-bottom:16px;">Describe the trip to research</div>

    <form style="display:flex;flex-direction:column;gap:14px;" @submit.prevent="submit">
      <UFormField label="Product name">
        <UInput v-model="productName" placeholder="Inca Trail Classic" class="w-full" />
      </UFormField>
      <div style="display:grid;grid-template-columns:2fr 1fr;gap:12px;">
        <UFormField label="Destination">
          <UInput v-model="destination" placeholder="Peru" required class="w-full" />
        </UFormField>
        <UFormField label="Duration (days)">
          <UInput v-model="duration" type="number" placeholder="15" required class="w-full" />
        </UFormField>
      </div>
      <UFormField label="Travel style">
        <USelect v-model="travelStyle" :items="TRAVEL_STYLES" class="w-full" />
      </UFormField>
      <UFormField label="Tab type">
        <URadioGroup v-model="tabType" :items="['Standard', 'NGS']" orientation="horizontal" />
      </UFormField>

      <div>
        <div style="font-size:12.5px;font-weight:700;color:var(--t3);margin-bottom:8px;">Competitors</div>
        <div style="display:flex;flex-direction:column;gap:6px;">
          <label
            v-for="competitor in competitors"
            :key="competitor.id"
            style="display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;"
          >
            <UCheckbox :model-value="selectedIds.includes(competitor.id)" @update:model-value="toggle(competitor.id)" />
            {{ competitor.name }}
          </label>
        </div>
      </div>

      <UButton
        type="submit"
        color="primary"
        block
        :loading="submitting"
        :disabled="!selectedIds.length || !destination || !duration"
      >
        Find & Analyse
      </UButton>
    </form>
  </div>
</template>
