﻿<script setup lang="ts">
import { noImagePlaceholder } from '~/assets/images'
import { usePage } from '@inertiajs/vue3'
import Computer from '#models/computer'
import ComputerCard from '~/pages/widgets/ComputerCard.vue'
import { computed, reactive, ref } from 'vue'

const { computers } = usePage<{ computers: Computer[] }>().props
const stateDropdownOpen = ref(false)

function toggleDropdown() {
  stateDropdownOpen.value = !stateDropdownOpen.value
}

const filters = reactive({
  onGoing: true,
  finished: true,
  sold: false,
})
const filteredComputers = computed(() => {
  return computers.filter((computer) => {
    const isOnGoing = filters.onGoing && computer.state.name == 'ON_GOING'
    const isFinished = filters.finished && computer.state.name == 'FINISHED'
    const isSold = filters.sold && computer.state.name == 'SOLD'
    return isOnGoing || isFinished || isSold
  })
})
</script>

<template>
  <div>
    <!-- Dropdown pour les filtres -->
    <div class="relative">
      <h4 class="text-xl underline">Filters</h4>
      <div class="flex gap-2">
        <!-- Usage Dropdown -->
        <div id="usage-selector" class="relative" style="width: fit-content">
          <button
            @click="toggleDropdown()"
            class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-blue-700 transition text-center inline-flex items-center"
            type="button"
          >
            Usage
            <svg
              class="w-4 h-4 ml-2"
              aria-hidden="true"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M19 9l-7 7-7-7"
              ></path>
            </svg>
          </button>

          <!-- Dropdown menu -->
          <div
            v-show="stateDropdownOpen"
            class="absolute right-0 z-20 py-2 mt-2 bg-white rounded-md shadow-xl"
          >
            <ul class="space-y-2 text-sm px-4 py-2">
              <li class="flex items-center">
                <input
                  id="unused"
                  type="checkbox"
                  v-model="filters.onGoing"
                  class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
                />
                <label
                  for="unused"
                  class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100"
                >
                  On Going
                </label>
              </li>
              <li class="flex items-center">
                <input
                  id="used"
                  type="checkbox"
                  v-model="filters.finished"
                  class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
                />
                <label for="used" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">
                  Finished
                </label>
              </li>
              <li class="flex items-center">
                <input
                  id="used"
                  type="checkbox"
                  v-model="filters.sold"
                  class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
                />
                <label for="used" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">
                  Sold
                </label>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="mt-4 mb-3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4">
        <ComputerCard
          v-for="computer in filteredComputers"
          :key="computer.id"
          :computerId="computer.id"
          :image-src="computer.pictures.find((p) => p.order === 1)?.link || noImagePlaceholder"
          image-alt="Computer Image"
          :title="computer.title"
          :cost="computer.cost"
          :price="computer.sellPrice"
        />
      </div>
    </div>
  </div>
</template>

<style scoped></style>
