<script>
import VTabulator from '@molecules/Tabulator/VTabulator.vue';

export default {
  name: 'UsersManagerUsersTable',
  components: {VTabulator},
  props: {
    usersList: {
      type: Array,
      default: () => []
    },
  },
  data() {
    const editItem = (item)   =>  this.editItem(item)
    const deleteItem = (item) =>  this.deleteItem(item)
    return {
      rerenderStep: 3,
      columns: [
        {
          field: "id",
          title: "ID",
          width: 100,
          sorter: "number",
        },
        {
          field: "first_name",
          title: "First Name",
          width: 150,
          sorter: "string",
        },
        {
          field: "last_name",
          title: "Last Name",
          width: 150,
          sorter: "string",
        },
        {
          field: "role",
          title: "Role",
          width: 150,
          sorter: "string",
        },
        {
          title: "Actions",
          formatter: (cell) => {
            const record = cell.getRow().getData();
            const id = record.id;
            return `
                    <button action="edit" class="text-white mr-2 text-xs bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-3 py-2 text-center mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-900">
                      <i action="edit" class="ri-pencil-line"></i>
                    </button>
                    <input action="toggle-remove" type="checkbox" id="remove-option-${id}" value="" class="hidden peer" required="">
                    <label for="remove-option-${id}"  class="peer-checked:hidden cursor-pointer inline-text text-white text-xs bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 font-medium rounded-full text-sm px-3 py-2 text-center mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
                    >
                        <i class="ri-delete-bin-line"></i>
                    </label>
                    <label action="remove" for="remove-option-${id}" class="hidden cursor-pointer mr-2 peer-checked:flex text-white text-xs bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 font-medium rounded-full text-sm px-3 py-2 text-center mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
                     >
                        <i action="remove" class="ri-check-line"></i>
                    </label>
                    <label action="close-remove" for="remove-option-${id}" class="hidden cursor-pointer peer-checked:flex text-white text-xs bg-gray-700 hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-full text-sm px-3 py-2 text-center mb-2 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-900">
                        <i class="ri-close-line"></i>
                    </label>


`;
          },
          cellClick: function(e, cell) {
            const action = e.target.getAttribute('action');
            if (action === 'edit') {
              editItem(cell.getRow().getData());
            } else if (action === 'remove') {
              deleteItem(cell.getRow().getData());
            }
          },
        }],
    }
  },
  methods: {
    editItem(item) {
      console.log('Edit item:', item);
    },
    deleteItem(item) {
      console.log('Delete item:', item);
    },
  }
}
</script>

<template>
  <div
    class="flex flex-col max-h-[70vh] mb-14"
  >
    <div>
      <VTabulator
        :dataSource="usersList"
        :columns="columns"
      />
    </div>
  </div>
</template>
