<script setup>
import { ref, computed, watch } from "vue";
const timeOptions = Array.from({ length: 24 * 4 }, (_, i) => {
  const h = Math.floor(i / 4);
  const m = i % 4 * 15;
  return `${h.toString().padStart(2, "0")}:${m.toString().padStart(2, "0")}`;
});
const props = defineProps({
  event: { type: Object, required: false },
  teams: { type: Array, required: true }
});
const emit = defineEmits(["save", "cancel", "delete", "update:event"]);
const localEvent = ref({});
watch(
  () => props.event,
  (incoming) => {
    if (incoming) {
      localEvent.value = { ...incoming };
    }
  },
  { immediate: true }
);
const allTeamMembers = computed(
  () => props.teams.flatMap(
    (team) => team.members.map((member) => ({
      ...member,
      teamId: team.id,
      teamName: team.name
    }))
  )
);
const teamMemberItems = computed(
  () => allTeamMembers.value.map((member) => ({
    label: member.name,
    value: member.id
  }))
);
function updateMember(id) {
  const member = allTeamMembers.value.find((m) => m.id === id);
  if (member) {
    localEvent.value = {
      ...localEvent.value,
      teamId: member.teamId,
      teamMemberId: member.id
    };
  }
}
function handleSave() {
  emit("update:event", { ...localEvent.value });
  emit("save");
}
</script>

<template>
  <slot
    :event="localEvent"
    :teams="teams"
  >
    <div
      class="lg:border border-default lg:rounded-2xl"
    >
      <UForm
        v-if="localEvent"
        :state="localEvent"
        class="divide-y divide-default bg-elevated rounded-2xl "
        @submit="handleSave"
      >
        <div class="bg-default rounded-2xl lg:shadow-xs">
          <!-- Name -->
          <div class="px-5 py-3 flex items-center justify-between hover:bg-elevated/60 transition-colors">
            <div class="w-full flex items-center gap-3 text-highlighted">
              <UIcon
                name="i-hugeicons:text"
                class="size-4"
              />
              <span class="text-sm">Name</span>
            </div>
            <div>
              <UInput
                v-model="localEvent.title"
                placeholder="Event title"
              />
            </div>
          </div>

          <!-- Category -->
          <div class="px-5 py-3 flex items-center justify-between hover:bg-elevated/60 transition-colors">
            <div class="w-full flex items-center gap-3 text-highlighted">
              <UIcon
                name="i-hugeicons:tag-02"
                class="size-4"
              />
              <span class="text-sm">Category</span>
            </div>
            <div>
              <USelect
                v-model="localEvent.category"
                :items="['Meeting', 'Work', 'Personal', 'Other']"
                placeholder="Select"
                :ui="{ base: 'text-right cursor-pointer' }"
              />
            </div>
          </div>

          <!-- All Day -->
          <div class="px-5 py-3 flex items-center justify-between hover:bg-elevated/60 transition-colors">
            <div class="w-full flex items-center gap-3 text-highlighted">
              <UIcon
                name="i-hugeicons:calendar-04"
                class="size-4"
              />
              <span class="text-sm">All Day</span>
            </div>
            <div>
              <USwitch v-model="localEvent.allDay" />
            </div>
          </div>

          <!-- Start Time -->
          <div
            v-if="!localEvent.allDay"
            class="px-5 py-3 flex items-center justify-between hover:bg-elevated/60 transition-colors"
          >
            <div class="w-full flex items-center gap-3 text-highlighted">
              <UIcon
                name="i-hugeicons:time-schedule"
                class="size-4"
              />
              <span class="text-sm">Start</span>
            </div>
            <div>
              <USelect
                v-model="localEvent.startTime"
                :items="timeOptions"
                placeholder="Select start time"
                :ui="{ base: 'text-right cursor-pointer' }"
              />
            </div>
          </div>

          <!-- End Time -->
          <div
            v-if="!localEvent.allDay"
            class="px-5 py-3 flex items-center justify-between hover:bg-elevated/60 transition-colors"
          >
            <div class="w-full flex items-center gap-3 text-highlighted">
              <UIcon
                name="i-hugeicons:timer-01"
                class="size-4"
              />
              <span class="text-sm">End</span>
            </div>
            <div>
              <USelect
                v-model="localEvent.endTime"
                :items="timeOptions"
                placeholder="Select end time"
                :ui="{ base: 'text-right cursor-pointer' }"
              />
            </div>
          </div>

          <!-- Link -->
          <div class="px-5 py-3 flex items-center justify-between hover:bg-elevated/60 transition-colors">
            <div class="w-full flex items-center gap-3 text-highlighted">
              <UIcon
                name="i-hugeicons:link-02"
                class="size-4"
              />
              <span class="text-sm">Link</span>
            </div>
            <div>
              <UInput
                v-model="localEvent.meetLink"
                placeholder="https://..."
              />
            </div>
          </div>

          <!-- Team -->
          <div class="px-5 py-3 flex items-center justify-between hover:bg-elevated/60 transition-colors">
            <div class="w-full flex items-center gap-3 text-highlighted">
              <UIcon
                name="i-hugeicons:user"
                class="size-4"
              />
              <span class="text-sm">Team</span>
            </div>
            <div>
              <USelect
                :model-value="localEvent.teamMemberId"
                :items="teamMemberItems"
                :ui="{ base: 'text-right cursor-pointer' }"
                @update:model-value="updateMember"
              />
            </div>
          </div>
        </div>

        <div
          class="pr-4 pl-3 py-3 flex items-center justify-between gap-3 "
        >
          <UButton
            type="button"
            color="neutral"
            variant="ghost"
            label="delete"
            @click="emit('delete')"
          />
          <UButton
            variant="subtle"
            color="neutral"
            class="bg-default"
            type="submit"
          >
            Save
          </UButton>
        </div>
      </UForm>
    </div>
  </slot>
</template>
