<template>
  <div
    class="pointer-events-none absolute left-0 top-0 z-10 w-screen sm:w-auto"
  >
    <Transition
      enter-active-class="transition-max-height ease-out duration-200 overflow-hidden"
      enter-from-class="max-h-0"
      enter-to-class="max-h-14"
      leave-active-class="transition-max-height ease-in duration-150 overflow-hidden"
      leave-from-class="max-h-14"
      leave-to-class="max-h-0"
    >
      <div
        v-if="open"
        class="pointer-events-auto w-full overflow-auto border-2 border-t-0 border-gray-200 bg-white shadow-lg sm:overflow-visible sm:rounded-br-md"
      >
        <div class="h-14 px-2 py-2.5">
          <div class="flex flex-row items-center space-x-4 px-4">
            <button @click="router.go(-1)" :title="$t('common.back')">
              <span class="sr-only">{{ $t('common.back') }}</span
              ><ChevronLeftIcon class="-ml-4 h-6 w-6" />
            </button>
            <div class="flex flex-row items-center space-x-4">
              <label for="building">{{ $t('common.building') }}:</label>
              <select
                id="building"
                class="rounded-sm border-gray-300 py-1 focus:ring-2 focus:ring-blue-200"
                :value="selectedBuildingId"
                @change="
                  emit(
                    'update:selectedBuildingId',
                    Number(($event.target as HTMLSelectElement).value),
                  )
                "
              >
                <option v-for="building of buildings" :value="building.id">
                  {{ building.displayName }}
                </option>
              </select>
            </div>
            <div
              class="flex flex-row items-center space-x-4"
              v-if="selectedBuildingId"
            >
              <label for="floor">{{ $t('common.floor') }}:</label>
              <select
                id="floor"
                class="rounded-sm border-gray-300 py-1 focus:ring-2 focus:ring-blue-200"
                :value="selectedFloorId"
                @change="
                  emit(
                    'update:selectedFloorId',
                    Number(($event.target as HTMLSelectElement).value),
                  )
                "
              >
                <option v-for="floor of floors" :value="floor.id">
                  {{ floor.displayName }} ({{ floor.number }})
                </option>
              </select>
            </div>
            <div v-if="selectedFloorId">
              {{ $t('planner.status.' + status) }}
            </div>
          </div>
        </div>
      </div>
    </Transition>
    <button
      :class="[
        'bg-white',
        'pointer-events-auto -mt-0.5 ml-2 h-8 rounded-bl-md rounded-br-md px-2 py-2 ring-1 ring-black ring-opacity-5',
      ]"
      :title="`${open ? 'Hide' : 'Open'} panel`"
      :aria-expanded="open"
      @click="() => (open = !open)"
    >
      <span class="sr-only">{{ open ? 'Hide' : 'Open' }} panel</span>
      <ChevronDoubleUpIcon class="h-4 w-4" v-if="open" />
      <ChevronDoubleDownIcon class="h-4 w-4" v-else />
    </button>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import {
  ChevronLeftIcon,
  ChevronDoubleDownIcon,
  ChevronDoubleUpIcon,
} from '@heroicons/vue/24/outline';
import { BuildingListItem } from '../../interfaces/building.interfaces';
import { FloorListItem } from '../../interfaces/floor.interfaces';
import { useRouter } from 'vue-router';

const open = ref(true);
const router = useRouter();

const props = defineProps<{
  floors: FloorListItem[];
  buildings: BuildingListItem[];
  selectedBuildingId?: number;
  selectedFloorId?: number;
  status: string;
}>();

const emit = defineEmits<{
  (e: 'update:selectedBuildingId', buildingId: number): void;
  (e: 'update:selectedFloorId', buildingId: number): void;
}>();
</script>
