<script setup>
import ConfigurationSelect from "@/components/displays/superuser/configuration/ConfigurationSelect.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import { ref, defineProps, defineEmits } from "vue";
const props = defineProps({
  timeBookingsNewProcess: {
    type: Object,
    required: true,
  },
});

const emits = defineEmits(['update:selected']);
const countryCodes = ref(null);

// Fetch country codes for phone numbers
SessionUser.objects.department_notification_sms.columns.phone_country_code.options().then(options => {
  countryCodes.value = options.map(option => ({
    value: option.value || option.id,
    label: option.label || option.name,
  }));
});

const departmentOptions = ref([]);
// Fetch department options
SessionUser.objects.department_time_bookings_entries.columns.department.options().then(options => {
  departmentOptions.value = options.map(option => ({
    value: option.value || option.id,
    label: option.label || option.name,
    icon: option.icon || 'fas fa-building',
  }));
});

const onSelectDepartment = (id) => {
  const dpt_object = departmentOptions.value.find(d => d.value === parseInt(id));
  props.timeBookingsNewProcess.setDepartment(id, dpt_object);
};

</script>

<template>
  <!-- Department selection -->
  <div class="field">
    <label class="label"> {{ SessionUser.objects.department_time_bookings_entries.columns.department.label }}</label>
    <div class="control">
      <ConfigurationSelect
          v-bind:value="timeBookingsNewProcess.department.value"
          :options="departmentOptions"
          :icon="'fas fa-building'"
          :is-rounded="true"
          :on-select="onSelectDepartment"
      />
    </div>
  </div>
  <!-- Phone number input -->
  <div class="field">
    <label class="label">{{SessionUser.objects.global.language.phone_number}}</label>
    <div class="control">
    <div class="field has-addons">
      <p class="control">
      <span class="select is-rounded">
        <select v-model="timeBookingsNewProcess.phone_country_code.value">
          <option v-for="country in countryCodes" :key="country.value" :value="country.value">
            {{ country.label }}
          </option>
        </select>
      </span>
      </p>
      <p class="control is-expanded">
        <input
            v-model="timeBookingsNewProcess.phone.value"
            class="input is-rounded"
            type="number"
            placeholder="Indtast telefonnummer"
        />
      </p>
    </div>
  </div>
  </div>
  <!-- Registration number input -->
  <div class="field">
    <label class="label">{{SessionUser.objects.orders.columns.reg_1.label}} ({{ SessionUser.objects.global.language.optional.toLowerCase() }})</label>
    <input
        v-model="timeBookingsNewProcess.reg_1.value"
        class="input is-rounded is-upper-alpha"
        type="text"
        placeholder="Indtast registreringsnummer"
        />
  </div>
</template>

<style scoped>

</style>