<script setup>
import {ref, watch} from "vue";
import SlideOver from "../../../components/SlideOver/SlideOver.vue";
import DangerButton from "../../../components/Buttons/DangerButton.vue";
import SecondaryButton from "../../../components/Buttons/SecondaryButton.vue";
import PrimaryButton from "../../../components/Buttons/PrimaryButton.vue";
import ConfirmationModal from "../../../components/Modal/ConfirmationModal.vue";

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  directory: {
    id: null,
    name: null,
  }
});

const form = ref({
  name: null,
});

watch(() => props.directory, (directory) => {
  form.value.name = directory?.name;
});

const showDeleteDirectoryModal = ref(false);

const closeDeleteDirectoryModal = () => {
  showDeleteDirectoryModal.value = false;
};

const saveDirectory = async () => {
  const response = await fetch(`${window.daylight.apiBase}/media/directories/${props.directory.id}`, {
    method: 'PUT',
    body: JSON.stringify({
      name: form.value.name
    }),
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
    },
  }).then(res => {
    if (!res.ok) {
      throw new Error('Network response was not ok');
    }

    return res.json();
  });

  emit('directoryUpdated', response)
  emit('close');
};

const confirmDeleteDirectory = async() => {
  await fetch(`${window.daylight.apiBase}/media/directories/${props.directory.id}`, {
    method: 'DELETE',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
    },
  });

  showDeleteDirectoryModal.value = false;

  emit('directoryDeleted');
  emit('close');
}

const emit = defineEmits(['close', 'directoryUpdated', 'directoryDeleted']);
</script>

<template>
  <div>
    <SlideOver :show="show" @close="emit('close')">
      <template #header>
        <div class="space-y-1">
          <h2 class="text-base font-semibold leading-6 text-white" id="slide-over-title">
            {{directory?.name}}
          </h2>
          <p class="text-sm text-white text-opacity-75">
            {{ __('daylight::media.change_directory_message') }}
          </p>
        </div>
      </template>

      <template #content>
        <div class="space-y-6 py-6 sm:space-y-0 sm:divide-y sm:divide-gray-200 sm:py-0">
          <!-- Project name -->
          <div
              class="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
            <div>
              <label for="name"
                     class="block text-sm font-medium leading-6 text-gray-900 sm:mt-1.5">{{ __('daylight::general.name') }}</label>
            </div>
            <div class="sm:col-span-2">
              <input v-model="form.name" type="text" id="name"
                     class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
            </div>
          </div>
        </div>
      </template>

      <template #footer>
        <div class="flex justify-between">
          <DangerButton @click.prevent="showDeleteDirectoryModal = true">
            {{ __('daylight::general.delete') }}
          </DangerButton>

          <div class="space-x-4">
            <SecondaryButton @click.prevent="emit('close')">
              {{ __('daylight::general.cancel') }}
            </SecondaryButton>

            <PrimaryButton @click.prevent="saveDirectory">
              {{ __('daylight::general.save') }}
            </PrimaryButton>
          </div>
        </div>

      </template>
    </SlideOver>

    <ConfirmationModal :show="showDeleteDirectoryModal" @close="closeDeleteDirectoryModal">
      <template #title>
        {{ __('daylight::general.confirm_deletion') }}
      </template>

      <template #content>
        {{ __('daylight::media.confirm_delete_directory', { name: directory.name }) }}
      </template>

      <template #footer>
        <div class="space-x-4">
          <SecondaryButton @click.prevent="closeDeleteDirectoryModal">
            {{ __('daylight::general.cancel') }}
          </SecondaryButton>

          <DangerButton @click.prevent="confirmDeleteDirectory">
            {{ __('daylight::general.delete') }}
          </DangerButton>
        </div>
      </template>
    </ConfirmationModal>
  </div>
</template>
