(function(e){
    "use strict";

    var search_type_filter = [];
    var usersList = null;
    var id = null;


    function delay(callback, ms) {
        var timer = 0;
        return function () {
          var context = this,
            args = arguments;
          clearTimeout(timer);
          timer = setTimeout(function () {
            callback.apply(context, args);
          }, ms || 0);
        };
    }

    function initActionEdit(){
        $('[data-action-edit]').each(function(e){
            $(this).on('click', function(e){
                var row = $(this).closest("tr");
                id = usersList.row(row).data().id;

                window.location.href="/userEdit/" + id;
            });
        });
    }

    function getDataTableData(){

    }

    function initList(){
        $('.txt_search_email').on("keyup",delay(function(e){
            usersList.search($('.txt_search_email').val()).draw()
        },500));
  
        const search_type_default = "Company";
        const search_types = ["ID", "Company", "Code"];
  
        $.each(search_types, function (i, n) {
            $(".email-search-type").append(
              `<li class="dropdown-item cursor-pointer py-0"><span class="text-sm">` +
                n +
                `</span></li>`
            );
        });
  
    $(".email-search-type li").each(function () {
        if ($(this).text() == search_type_default) {
          $(this).removeClass("active").addClass("active");
          var active_items_arr = [];
          active_items_arr.push(search_type_default);
          search_type_filter = JSON.stringify(active_items_arr);
        }

        $(this).on("click", function () {
          //remove all selected menu
          $(".email-search-type")
            .find("li.active")
            .map(function () {
              $(this).removeClass("active");
            });

          $(this).toggleClass("active");

          var active_items = $(".email-search-type")
            .find("li.active")
            .map(function () {
              var item = {};
              // item.id = this.value;
              item.status = $(this).text();
              return item;
            });

          var active_items_arr = [];
          $.each(active_items, function (i, n) {
            active_items_arr.push(n.status);
          });

          search_type_filter = JSON.stringify(active_items_arr);
          //  refreshOrcrPlateTable();
          //  if ($('#txt_search').val() != '') {
            usersList.draw(false);
          //  }
        });
      });

    }

    var cols = [
        {
            title: "ID",
            data: 'id',
            className: 'align-middle p-1 dt-left',
            orderable: true,
            width: "5%",
        },
        {
            title: "Name",
            data: 'name',
            className: 'align-middle p-1 dt-left',
            orderable: true,
            width: "25%",
        },
        {
            title: "Action",
            data: null,
            orderable: false,
            width: "20%",
            className: "align-middle p-1 dt-center",
            render: function (data, type, row, meta) {
                return `
                         <div class="row justify-content-center">
                                 <a data-action-edit style="cursor:pointer; width: fit-content;" class="m-1 btn btn-sm btn-primary btn-icon" title="Edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>&nbsp;Edit</a> 
                         </div>
                         `;
            },
        },
    ];
    usersList = $('#userTable').DataTable({
        fnDrawCallback: function () {
            initActionEdit();
        },
        order: [[0, "desc"]],
        retrieve: true,
        columns: cols,
        paging: true,
        lengthChange: false,
        searching: true,
        pageLength: 5,
        info: true,
        autoWidth: true,
        responsive: true,
        processing: true,
        serverSide: true,
        autoWidth: true,
        columnDefs: [
          { width: '20%', targets: 0 }
        ],
        fixedColumns: true,
        ajax: {
            url:'/fetchUsers',
            data: function (d){
                return $.extend({},d,{
                    search_type: search_type_filter,
                    data: getDataTableData(),
                })
            }
        },
        sDom: "lrtip",
    });

    $(function(){

        $('#reload_list').on('click', function(e){
            usersList.draw(false);
        });
        initList();
    });
})();