<template>
  <section class="h-full | flex flex-col" style="--row-gap: var(--space-32)">
    <Header
      :selectedTags="selectedTags"
      @update:selectedTags="changeSelectedTags"
    />
    <div class="h-full | masonry">
      <button
        data-icon="upload"
        class="flex flex-col | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-2xl"
        @click="isAddImagesModalOpen = true"
      >
        Ajouter une ou plusieurs images
      </button>
      <template v-for="image in images" :key="image.uri">
        <figure
          v-if="
            selectedTags.length === 0 ||
            selectedTags.some((pageSelectedTag) =>
              image.tags.includes(pageSelectedTag)
            )
          "
          class="image"
          @click="imageDetails = image"
        >
          <span class="tag | btn btn--sm">Tag</span>
          <img :src="image.url" alt="" />
        </figure>
      </template>
    </div>

    <AddImagesModal
      v-if="isAddImagesModalOpen"
      :isAddImagesModalOpen="isAddImagesModalOpen"
      @close="isAddImagesModalOpen = false"
    />
    <ImageDetailsModal v-if="imageDetails" :imageDetails="imageDetails" />
  </section>
</template>

<script setup>
import Header from "./Header.vue";
import { usePageStore } from "../../../stores/page";
import { ref } from "vue";
import ImageDetailsModal from "./ImageDetailsModal.vue";
import AddImagesModal from "./AddImagesModal.vue";

const { page } = usePageStore();

const selectedTags = ref([]);
const imageDetails = ref(null);
const images = ref(page.images);
const isAddImagesModalOpen = ref(false);

function 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));
  }
}

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

function changeSelectedTags(newTags) {
  selectedTags.value = newTags;
}
</script>

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

button[data-icon="upload"] {
  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;
}

[role="dialog"] {
  position: relative;
}
[data-pc-section="mask"] {
  background-color: var(--color-black-50);
}
[data-pc-section="header"] {
  height: var(--space-40);
}
[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;
  width: var(--space-40);
  height: var(--space-40);
}
[data-pc-name="pcclosebutton"] svg {
  width: 1.25rem;
  height: 1.25rem;
}
[data-pc-name="pcclosebutton"] span {
  display: none;
}
[data-pc-section="content"] {
  flex-grow: 1;
}
</style>
