<script setup>
import { computed } from "vue";
import BaseButton from "../../../components/base/BaseButton.vue";
import BaseDatePicker from "../../../components/base/BaseDatePicker.vue";
import strings from "../strings.js";

const props = defineProps({
  selectedIsoDate: { type: String, required: true },
  viewMode: { type: String, required: true },
  dateTitle: { type: String, required: true },
  disableNav: { type: Boolean, default: false },
});

const emit = defineEmits([
  "update:viewMode",
  "update:selectedIsoDate",
  "shift-week",
  "shift-day",
  "goto-today",
  "goto-month-prev",
  "goto-month-next",
]);

const modeOptions = [
  { label: strings.viewDay, value: "day" },
  { label: strings.viewWeek, value: "week" },
  { label: strings.viewMonth, value: "month" },
  { label: strings.viewList, value: "list" },
];

const innerMode = computed({
  get: () =>
    /** @type {"day"|"week"|"month"|"list"} */ (props.viewMode),

  set: (v) => emit("update:viewMode", v),
});

function onPicker(val) {
  if (typeof val === "string" && val) {
    emit("update:selectedIsoDate", val);
  }
}

const pickerValue = computed({
  get: () => props.selectedIsoDate,
  set: onPicker,
});
</script>

<template>
  <div class="flex flex-col gap-3">
    <div class="flex flex-wrap items-start justify-between gap-3">
      <div class="min-w-[12rem]">
        <h1 class="text-2xl font-semibold text-surface-950 dark:text-surface-0 m-0 leading-tight flex items-center gap-2">
          <i class="pi pi-clock text-primary" aria-hidden="true" />
          {{ dateTitle }}
        </h1>
        <p class="text-surface-500 dark:text-surface-400 text-sm m-0 mt-1">
          {{ strings.workbenchSubtitle }}
        </p>
      </div>

      <div class="flex flex-wrap items-center justify-end gap-2">
        <div class="flex flex-wrap items-center gap-1 border border-surface-200 dark:border-surface-700 rounded-lg p-1">
          <BaseButton icon="pi pi-angle-double-left" outlined size="small" :disabled="disableNav"
            @click="emit('shift-week', -1)" />
          <BaseButton
            icon="pi pi-chevron-left"
            outlined
            size="small"
            :disabled="disableNav"
            @click="
              viewMode === 'month'
                ? emit('goto-month-prev')
                : viewMode === 'day'
                  ? emit('shift-day', -1)
                  : emit('shift-week', -1)
            "
          />

          <div class="w-[10.5rem] px-1">
            <BaseDatePicker
              v-model="pickerValue"
              :label="strings.calendarPick"
              class="[&_label]:sr-only [&_label+*]:mt-0"
            />
          </div>

          <BaseButton
            icon="pi pi-chevron-right"
            outlined
            size="small"
            :disabled="disableNav"
            @click="
              viewMode === 'month'
                ? emit('goto-month-next')
                : viewMode === 'day'
                  ? emit('shift-day', 1)
                  : emit('shift-week', 1)
            "
          />
          <BaseButton icon="pi pi-angle-double-right" outlined size="small" :disabled="disableNav"
            @click="emit('shift-week', 1)" />
          <BaseButton variant="secondary" outlined size="small" :disabled="disableNav" :label="strings.today"
            @click="emit('goto-today')" />
        </div>

        <div
          class="inline-flex rounded-lg border border-surface-200 dark:border-surface-700 overflow-hidden"
          role="group"
          aria-label="Hours view mode"
        >
          <button
            v-for="opt in modeOptions"
            :key="opt.value"
            type="button"
            class="px-3 py-1.5 text-sm font-medium transition-colors border-r border-surface-200 dark:border-surface-700 last:border-r-0"
            :class="innerMode === opt.value
              ? 'bg-primary-600 text-white dark:bg-primary-500'
              : 'bg-surface-0 dark:bg-surface-900 text-surface-600 dark:text-surface-300 hover:bg-surface-50 dark:hover:bg-surface-800'"
            @click="innerMode = opt.value"
          >
            {{ opt.label }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
