<template>
  <section class="h-full | flex flex-col" style="--row-gap: var(--space-32)">
    <header
      class="project-details | flex items-start | bg-white | rounded-2xl | p-16 | w-full"
    >
      <div class="project-details__description | flex-1">
        <label
          for="project-description"
          class="flex | text-sm text-grey-700 | mb-8"
          >Description du projet</label
        >
        <textarea
          name="project-description"
          id="project-description"
          placeholder="Ajoutez une description générale de votre projet…"
          rows="3"
          class="border border-grey-200 | rounded-xl | p-16 | w-full"
        ></textarea>
      </div>
      <fieldset class="project-details__filters | flex-1">
        <legend class="text-sm text-grey-700 | mb-8">Filtrer par tags</legend>
        <div class="flex" style="gap: var(--space-8)">
          <button class="btn btn--sm btn--grey" id="all" aria-pressed="true">
            Voir tout
          </button>
          <input class="sr-only" type="checkbox" id="bouchon" name="bouchon" />
          <label class="btn btn--sm btn--primary" for="bouchon">Bouchon</label>
          <input
            class="sr-only"
            type="checkbox"
            id="bouchon-poussoir"
            name="bouchon-poussoir"
          />
          <label class="btn btn--sm btn--primary" for="bouchon-poussoir"
            >Bouton Poussoir</label
          >
          <input
            class="sr-only"
            type="checkbox"
            id="coloris-nuances"
            name="coloris-nuances"
          />
          <label class="btn btn--sm btn--primary" for="coloris-nuances"
            >Coloris & Nuances</label
          >
          <input
            class="sr-only"
            type="checkbox"
            id="da-globale"
            name="da-globale"
          />
          <label class="btn btn--sm btn--primary" for="da-globale"
            >DA Globale</label
          >
          <input
            class="sr-only"
            type="checkbox"
            id="forme-design"
            name="forme-design"
          />
          <label class="btn btn--sm btn--primary" for="forme-design"
            >Forme & Design</label
          >
          <input
            class="sr-only"
            type="checkbox"
            id="materiaux-textures"
            name="materiaux-textures"
          />
          <label class="btn btn--sm btn--primary" for="materiaux-textures"
            >Matériaux & Textures</label
          >
          <input
            class="sr-only"
            type="checkbox"
            id="parachevements"
            name="parachevements"
          />
          <label class="btn btn--sm btn--primary" for="parachevements"
            >Parachèvements</label
          >
        </div>
      </fieldset>
    </header>
    <div class="h-full | masonry">
      <FileUpload
        mode="basic"
        name="images[]"
        :url="'/upload-images.json?pageUri=' + page.uri"
        @upload="onAdvancedUpload($event)"
        :auto="true"
        :multiple="true"
        accept="image/*"
        :maxFileSize="1000000"
        invalidFileSizeMessage="Fichier trop lourd"
        chooseLabel="Ajouter une ou plusieurs images"
        class="flex flex-col | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-2xl"
      >
        <template #chooseicon>
          <svg
            width="20"
            height="20"
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M0.714355 15.0001V16.4286C0.714355 17.1864 1.01538 17.9131 1.55119 18.4489C2.08701 18.9848 2.81374 19.2858 3.5715 19.2858H16.4286C17.1864 19.2858 17.9131 18.9848 18.4489 18.4489C18.9848 17.9131 19.2858 17.1864 19.2858 16.4286V15.0001M5.71436 5.71436L10.0001 0.714355M10.0001 0.714355L14.2858 5.71436M10.0001 0.714355V13.5715"
              stroke="currentColor"
              stroke-width="1.25"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </template>
        <template
          #content="{
            files,
            uploadedFiles,
            removeUploadedFileCallback,
            removeFileCallback,
          }"
        >
          <div v-if="files.length > 0">Fichiers importés</div>
        </template>
      </FileUpload>
      <Toast />
      <figure v-for="image in images" class="image" @click="visible = true">
        <span class="tag | btn btn--sm">Tag</span>
        <img :src="image.url" alt="" />
      </figure>
    </div>
    <Dialog
      v-model:visible="visible"
      modal
      header="Détails de l’image"
      :style="{ width: '62.5rem', height: '50rem' }"
      class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden"
    >
      <img :src="image" alt="" class="bg-grey-200" loading="lazy" />
      <div class="flex flex-col | p-32" style="--row-gap: var(--space-32)">
        <fieldset class="image__tags">
          <legend class="text-sm text-grey-700 | mb-8">Tags</legend>
          <div class="flex" style="gap: var(--space-8)">
            <input
              class="sr-only"
              type="checkbox"
              id="bouchon"
              name="bouchon"
            />
            <label class="btn btn--sm btn--primary" for="bouchon"
              >Bouchon</label
            >
            <input
              class="sr-only"
              type="checkbox"
              id="bouchon-poussoir"
              name="bouchon-poussoir"
            />
            <label class="btn btn--sm btn--primary" for="bouchon-poussoir"
              >Bouton Poussoir</label
            >
            <input
              class="sr-only"
              type="checkbox"
              id="coloris-nuances"
              name="coloris-nuances"
            />
            <label class="btn btn--sm btn--primary" for="coloris-nuances"
              >Coloris & Nuances</label
            >
            <input
              class="sr-only"
              type="checkbox"
              id="da-globale"
              name="da-globale"
            />
            <label class="btn btn--sm btn--primary" for="da-globale"
              >DA Globale</label
            >
            <input
              class="sr-only"
              type="checkbox"
              id="forme-design"
              name="forme-design"
            />
            <label class="btn btn--sm btn--primary" for="forme-design"
              >Forme & Design</label
            >
            <input
              class="sr-only"
              type="checkbox"
              id="materiaux-textures"
              name="materiaux-textures"
            />
            <label class="btn btn--sm btn--primary" for="materiaux-textures"
              >Matériaux & Textures</label
            >
            <input
              class="sr-only"
              type="checkbox"
              id="parachevements"
              name="parachevements"
            />
            <label class="btn btn--sm btn--primary" for="parachevements"
              >Parachèvements</label
            >
          </div>
        </fieldset>
        <div class="image__description | w-full">
          <label
            for="image-description"
            class="flex | text-sm text-grey-700 | mb-8"
            >Description de l’image</label
          >
          <textarea
            name="image-description"
            id="image-description"
            placeholder="Ajoutez une description à l’image…"
            class="border border-grey-200 | rounded-xl | p-16 | w-full"
          ></textarea>
        </div>
        <button
          data-icon="delete"
          class="btn btn--black-10 | ml-auto mt-auto"
          @click="visible = false"
        >
          Supprimer cette image
        </button>
      </div>
    </Dialog>
  </section>
</template>

<script setup>
import Toast from "primevue/toast";
import FileUpload from "primevue/fileupload";
import Dialog from "primevue/dialog";
import { useToast } from "primevue/usetoast";
import { usePageStore } from "../../../stores/page";
import { ref } from "vue";

const { page } = usePageStore();
const toast = useToast();

const beforeSend = (event) => {
  const formData = event.formData;
  formData.append(
    "pageUri",
    "projects/miss-dior-blooming-bouquet/client-brief"
  );
};

const images = ref(page.images);

const onAdvancedUpload = (event) => {
  if (event.xhr.status === 200) {
    toast.add({
      severity: "success",
      summary: "Upload réussi",
      detail: event.xhr.response.success,
      life: 3000,
    });
    const response = JSON.parse(event.xhr.response);
    console.log(response);
    images.value = response.images;
  } else {
    toast.add({
      severity: "error",
      summary: "Échec de l'upload",
      detail: event.xhr.response.error,
      life: 3000,
    });
    console.error(JSON.parse(event.xhr.response));
  }
};
</script>

<style>
fieldset {
  appearance: none;
  padding: 0;
  margin: 0;
  border: none;
}

[data-pc-name="fileupload"] button {
  padding: 6.875rem 4.875rem;
}
[data-pc-name="fileupload"] button:hover {
  background: var(--color-primary-10);
  border-color: var(--color-primary-20);
  color: var(--color-primary-100);
}
input[type="file"] {
  display: none;
}

[data-pc-section="mask"] {
  background-color: var(--color-black-50);
}
[data-pc-name="dialog"] {
  flex-direction: row !important;
  position: relative;
}
[data-pc-name="dialog"] [data-pc-section="header"] {
  position: absolute;
  left: 50%;
  right: 0;
  z-index: 1102;
  padding: 1.5rem var(--space-32);
}
[data-pc-section="title"] {
  font-weight: 500;
  font-size: var(--text-lg);
}
[data-pc-name="pcclosebutton"] {
  position: absolute;
  top: var(--space-16);
  right: var(--space-16);
  padding: 0.625rem;
}
[data-pc-name="pcclosebutton"] svg {
  width: 1.25rem;
  height: 1.25rem;
}
[data-pc-name="pcclosebutton"] span {
  display: none;
}
[data-pc-name="dialog"] [data-pc-section="content"] {
  display: flex;
}
[data-pc-name="dialog"] [data-pc-section="content"] > * {
  width: 50%;
}
[data-pc-name="dialog"] [data-pc-section="content"] > div {
  padding-top: 5rem;
}
</style>
