<template>
  <div class="flex justify-center">
    <div class="w-[1348px]">
      <div class="flex items-center justify-between mt-[46px]">
        <div class="flex items-center gap-3">
          <MalioButtonIcon
            icon="mdi:arrow-left-bold"
            icon-size="24"
            aria-label="Précédent"
            variant="ghost"
          />
          <h1 class="text-[32px] text-m-primary font-bold">Filtres</h1>
        </div>
        <MalioButton
          label="Filtres"
          variant="tertiary"
          icon-name="mdi:tune"
          icon-position="left"
          button-class="w-[184px] px-2 py-2 justify-start text-black gap-4"
          @click="drawerOpen = true"
        />
      </div>
    </div>

    <MalioDrawer
      v-model="drawerOpen"
      side="right"
      drawer-class="max-w-[450px]"
      body-class="p-0"
      footer-class="sticky bottom-0 flex justify-between gap-4 bg-white px-5 py-7"
    >
      <template #header>
        <h2 class="text-[24px] font-bold uppercase">Filtres</h2>
      </template>

      <MalioAccordion>
        <MalioAccordionItem title="Type de camion" value="camion">
          <div class="flex flex-col gap-6">
            <MalioCheckbox v-model="semiBenne" label="Semi Benne" />
            <MalioCheckbox v-model="benne" label="Benne" />
          </div>
        </MalioAccordionItem>

        <MalioAccordionItem title="Date à Date" value="date">
          <div class="grid grid-cols-[auto_1fr] items-center gap-x-3 gap-y-4">
            <span>Du</span>
            <MalioDate v-model="dateDebut"/>
            <span>Au</span>
            <MalioDate v-model="dateFin"/>
          </div>
        </MalioAccordionItem>
      </MalioAccordion>

      <template #footer>
        <MalioButton
          label="Réinitialiser"
          variant="tertiary"
          button-class="w-[150px]"
          @click="resetFiltres"
        />
        <MalioButton
          label="Voir les résultats"
          variant="primary"
          button-class="w-[170px]"
        />
      </template>
    </MalioDrawer>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'

const drawerOpen = ref(false)

const semiBenne = ref(false)
const benne = ref(false)

const dateDebut = ref<string | null>(null)
const dateFin = ref<string | null>(null)

function resetFiltres() {
  semiBenne.value = false
  benne.value = false
  dateDebut.value = null
  dateFin.value = null
}
</script>
