<template>
  <tr
    :data-pivot-id="resource.id.pivotValue"
    :dusk="`${resource.id.value}-row`"
    class="group"
  >
    <!-- Fields -->
    <td
      v-for="(field, index) in resource.fields"
      :key="field.uniqueKey"
      class="dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-900 px-2"
    >
      <component
        :is="'index-' + field.component"
        :class="`text-${field.textAlign}`"
        :field="field"
        :resource="resource"
        :resource-name="resourceName"
        :via-resource="viaResource"
        :via-resource-id="viaResourceId"
      />
    </td>

    <td class="px-2 td-fit text-right align-middle dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-900 py-2">
      <div class="flex items-center justify-end space-x-0 text-gray-400">
        <!-- Preview Resource Link -->
        <button
          type="button"
          v-tooltip.click="__('View')"
          :aria-label="__('View')"
          :dusk="`${resource['id'].value}-edit-button`"
          class="toolbar-button hover:text-primary-500 px-2 disabled:opacity-50 disabled:pointer-events-none"
          @click="openPreviewModal"
        >
          <Icon type="eye" />
        </button>

        <!-- Edit Resource Link -->
        <!-- <button
          type="button"
          v-tooltip.click="__('Edit')"
          :aria-label="__('Edit')"
          :data-testid="`${testId}-delete-button`"
          :dusk="`${resource['id'].value}-edit-button`"
          class="toolbar-button hover:text-primary-500 px-2 disabled:opacity-50 disabled:pointer-events-none"
          @click.stop="openEditModal"
        >
          <Icon type="pencil-alt" />
        </button> -->

        <!-- Delete Resource Link -->
        <button
          type="button"
          v-tooltip.click="__('Delete')"
          :aria-label="__('Delete')"
          :data-testid="`${testId}-delete-button`"
          :dusk="`${resource['id'].value}-delete-button`"
          class="toolbar-button hover:text-primary-500 px-2 disabled:opacity-50 disabled:pointer-events-none"
          @click.stop="openDeleteModal"
        >
          <Icon type="trash" />
        </button>

        <DeleteResourceModal
          mode="delete"
          :show="deleteModalOpen"
          @close="closeDeleteModal"
          @confirm="confirmDelete"
        />
      </div>
    </td>
  </tr>

  <PreviewResourceModal
    v-if="previewModalOpen"
    :resource-id="resource.id.value"
    :resource-name="resourceName"
    :show="previewModalOpen"
    @close="closePreviewModal"
    @confirm="closePreviewModal"
  />
</template>

<script>
import { Localization } from 'laravel-nova'

export default {
  emits: ['actionExecuted'],

  mixins: [Localization],

  props: [
    'testId',
    'restoreResource',
    'resource',
    'resourcesSelected',
    'resourceName',
    'relationshipType',
    'viaRelationship',
    'viaResource',
    'viaResourceId',
    'viaManyToMany',
    'checked',
    'shouldShowCheckboxes',
    'shouldShowColumnBorders',
    'tableStyle',
    'updateSelectionStatus',
    'queryString',
    'clickAction',
  ],

  data: () => ({
    previewModalOpen: false,
    editModalOpen: false,
    deleteModalOpen: false,
  }),

  methods: {
    openPreviewModal() {
      this.previewModalOpen = true;
    },

    closePreviewModal() {
      this.previewModalOpen = false;
    },

    openEditModal() {
      this.editModalOpen = true;
    },

    closeEditModal() {
      this.editModalOpen = false;
    },

    openDeleteModal() {
      this.deleteModalOpen = true
    },

    closeDeleteModal() {
      this.deleteModalOpen = false
    },

    confirmDelete() {
      this.deleteResource(this.resource)
      this.closeDeleteModal()
    },

    /**
     * Delete the given resource.
     */
    deleteResource(resource) {
      return Nova.request({
        url: '/nova-api/' + this.resourceName,
        method: 'delete',
        params: {
          'resources[]': resource.id.value
        },
      }).then(response => {
        this.deleteModalOpen = false

        Nova.success(this.__('The :resource was deleted!', { resource: this.resourceName }))
      }).catch(exception => {
        console.log({exception});
      })
    },
  },

}
</script>
