<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { employeeApi } from "../generated/api";
import { useModelApi } from "../composables/useModelApi";

const selectedEmployeeId = defineModel<number>({ required: true });
const search = ref("");
const showSelector = ref(false);

const {
  items: employees,
  loading,
  load: loadEmployees,
} = useModelApi(employeeApi, {
  defaultListParams: { ordering: "id" },
  loadErrorMessage: "Не удалось загрузить сотрудников",
});

const filteredEmployees = computed(() => {
  const value = search.value.trim().toLowerCase();
  if (!value) {
    return employees.value;
  }

  return employees.value.filter((employee) => employee.name.toLowerCase().includes(value));
});

const selectedEmployee = computed(() =>
  employees.value.find((employee) => employee.id === selectedEmployeeId.value),
);

const selectedEmployeeName = computed(() => selectedEmployee.value?.name ?? "не указан");

function openSelector() {
  search.value = "";
  showSelector.value = true;
}

function selectEmployee(id: number) {
  selectedEmployeeId.value = id;
  showSelector.value = false;
}

onMounted(loadEmployees);
</script>

<template>
  <button class="employee-select" type="button" @click="openSelector">
    <span>{{ selectedEmployeeName }}</span>
    <van-icon name="arrow" />
  </button>

  <van-popup v-model:show="showSelector" round position="bottom" class="employee-popup">
    <div class="employee-popup-header">
      <h2>Выберите сотрудника</h2>
      <van-button size="small" type="primary" plain @click="selectEmployee(0)">Не указан</van-button>
    </div>

    <van-search v-model="search" placeholder="Поиск по имени" />

    <van-loading v-if="loading" class="employee-state" type="spinner">Загрузка...</van-loading>

    <template v-else>
      <van-cell-group inset>
        <van-cell
          v-for="employee in filteredEmployees"
          :key="employee.id"
          :title="employee.name"
          :label="`ID: ${employee.id}`"
          clickable
          center
          @click="selectEmployee(employee.id)"
        >
          <template #icon>
            <van-image class="employee-avatar" round width="36" height="36" :src="employee.avatar" />
          </template>
          <template #right-icon>
            <van-icon v-if="selectedEmployeeId === employee.id" name="success" color="#1989fa" />
          </template>
        </van-cell>
      </van-cell-group>

      <van-empty v-if="filteredEmployees.length === 0" description="Сотрудники не найдены" />
    </template>
  </van-popup>
</template>

<style scoped>
.employee-popup {
  min-height: 55vh;
  padding: 18px 0 28px;
}

.employee-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px 10px;
}

.employee-popup-header h2 {
  margin: 0;
  font-size: 18px;
}

.employee-avatar {
  margin-right: 10px;
}

.employee-state {
  display: flex;
  justify-content: center;
  padding: 36px 0;
}

.employee-select {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: 100%;
  border: 0;
  padding: 0;
  color: #323233;
  background: transparent;
  font: inherit;
  line-height: 24px;
  text-align: right;
}

.employee-select .van-icon {
  color: #969799;
  font-size: 16px;
}
</style>
