import { RowSelection } from "gridjs/plugins/selection";
export function initGridTable(column, data, paginate, url, permission) {


  let selection =       {
    id: 'id',
    name: 'Select',
    plugin: {
      component: RowSelection
    }
  };
  column.push(selection);
  
    if (permission.length !== 0) {
        if (permission.includes("EDIT") || permission.includes("DELETE")) {
            let actions = {
                id: "id",
                name: "Actions",
                sort: false,
                className: "justify-center",
                formatter: (cell, row, id) =>
                    Gridjs.html(`
                <div class="flex justify-center space-x-2">
                  ${
                      permission.includes("EDIT")
                          ? `
                    <a href="${url}/${cell}/edit" @click="editItem" class="btn h-8 w-8 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
                      <i aria-hidden="true" class="fa fa-edit"></i>
                    </a>
                  `
                          : ""
                  }
                  
                  ${
                      permission.includes("DELETE")
                          ? `
                    <div x-data="{showModal:false}">
                      <a @click="showModal = true" class="btn h-8 w-8 p-0 text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25">
                        <i aria-hidden="true" class="fa fa-trash-alt"></i>
                      </a>
                      
                      <template x-teleport="#x-teleport-target">
                        <div class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5" x-show="showModal" role="dialog" @keydown.window.escape="showModal = false">
                          <div class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300" @click="showModal = false" x-show="showModal" x-transition:enter="ease-out" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"></div>
                          <div class="relative p-4 max-w-lg rounded-lg bg-white px-4 py-10 text-center transition-opacity duration-300 dark:bg-navy-700 sm:px-5" x-show="showModal" x-transition:enter="ease-out" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
                            <svg xmlns="http://www.w3.org/2000/svg" class="inline h-28 w-28 text-error" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <div class="mt-4 mx-5">
                              <h2 class="text-2xl text-slate-700 dark:text-navy-100">Are you sure <br> you want to delete this item ?</h2>
                              <p class="mt-2"></p>
                              <button @click="showModal = false" class="btn mt-6 bg-[#6a6e69] font-medium text-white hover:bg-[#313430] focus:bg-[#313430]-focus active:bg-[#313430]-focus/90">Close</button>
                              <a href="#" @click.prevent="deleteItem('${url}' ,${cell} ), showModal = false" class="btn mt-6 bg-error font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90">confirm</a>
                            </div>
                          </div>
                        </div>
                      </template>
                    </div>
                  `
                          : ""
                  }
                </div>
              `),
            };

            column.push(actions);
        }
    }

    return {
        table: null,
        config: {
            columns: column,
            data: data,
            sort: true,
            search: true,
            pagination: {
                enabled: true,
                limit: paginate,
            },
        },
        reloadTable() {
          if (this.table) {
              this.table.destroy();
          }
          this.table = new Gridjs.Grid(this.config).render(this.$root);
      },

        init() {
            this.table = new Gridjs.Grid(this.config).render(this.$root);
        },
        deleteItem(url, cell) {
            const csrfToken = document.querySelector(
                'meta[name="csrf-token"]'
            ).content;
            fetch(`${url}/${cell}`, {
                method: "DELETE",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": csrfToken,
                },
            }).then((response) => {
                    // console.log(response);
                    this.$notification({
                        text: "Item deleted successfully",
                        variant: "success",
                    });
                    window.location.href = url;
                })
                .catch((error) => {
                    this.$notification({
                        text: error,
                        variant: "error",
                    });
                });
        },

        editItem() {
            this.$notification({ text: "Item edit action", variant: "info" });
        },
    };
}