/*=========================================================================================
    File Name: ag-grid.js
    Description: Aggrid Table
    --------------------------------------------------------------------------------------
    Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
    Author: PIXINVENT
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

$(function () {
  'use strict';

  /*** COLUMN DEFINE ***/
  var columnDefs = [
    {
      headerName: 'First Name',
      field: 'firstname',
      editable: true,
      sortable: true,
      filter: true,
      width: 175,
      filter: true,
      checkboxSelection: true,
      headerCheckboxSelectionFilteredOnly: true,
      headerCheckboxSelection: true
    },
    {
      headerName: 'Last Name',
      field: 'lastname',
      editable: true,
      sortable: true,
      filter: true,
      width: 175
    },
    {
      headerName: 'Company',
      field: 'company',
      editable: true,
      sortable: true,
      filter: true,
      width: 250
    },
    {
      headerName: 'City',
      field: 'city',
      editable: true,
      sortable: true,
      filter: true,
      width: 125
    },
    {
      headerName: 'Country',
      field: 'country',
      editable: true,
      sortable: true,
      filter: true,
      width: 150
    },
    {
      headerName: 'State',
      field: 'state',
      editable: true,
      sortable: true,
      filter: true,
      width: 125
    },
    {
      headerName: 'Zip',
      field: 'zip',
      editable: true,
      sortable: true,
      filter: true,
      width: 125
    },
    {
      headerName: 'Email',
      field: 'email',
      editable: true,
      sortable: true,
      filter: true,
      width: 260,
      pinned: 'left'
    },
    {
      headerName: 'Followers',
      field: 'followers',
      editable: true,
      sortable: true,
      filter: true,
      width: 150
    }
  ];

  /*** GRID OPTIONS ***/
  var gridOptions = {
    columnDefs: columnDefs,
    rowSelection: 'multiple',
    floatingFilter: true,
    filter: true,
    pagination: true,
    paginationPageSize: 20,
    pivotPanelShow: 'always',
    colResizeDefault: 'shift',
    animateRows: true,
    resizable: true
  };

  /*** DEFINED TABLE VARIABLE ***/
  var gridTable = document.getElementById('myGrid');

  var assetPath = '../../../app-assets/';
  if ($('body').attr('data-framework') === 'laravel') {
    assetPath = $('body').attr('data-asset-path');
  }

  /*** GET TABLE DATA FROM URL ***/

  agGrid.simpleHttpRequest({ url: assetPath + 'data/ag-grid-data.json' }).then(function (data) {
    gridOptions.api.setRowData(data);
  });

  /*** FILTER TABLE ***/
  function updateSearchQuery(val) {
    gridOptions.api.setQuickFilter(val);
  }

  $('.ag-grid-filter').on('keyup', function () {
    updateSearchQuery($(this).val());
  });

  /*** CHANGE DATA PER PAGE ***/
  function changePageSize(value) {
    gridOptions.api.paginationSetPageSize(Number(value));
  }

  $('.sort-dropdown .dropdown-item').on('click', function () {
    var $this = $(this);
    changePageSize($this.text());
    $('.filter-btn').text('1 - ' + $this.text() + ' of 500');
  });

  /*** EXPORT AS CSV BTN ***/
  $('.ag-grid-export-btn').on('click', function (params) {
    gridOptions.api.exportDataAsCsv();
  });

  /*** INIT TABLE ***/
  new agGrid.Grid(gridTable, gridOptions);

  /*** SET OR REMOVE EMAIL AS PINNED DEPENDING ON DEVICE SIZE ***/

  if ($(window).width() < 768) {
    gridOptions.columnApi.setColumnPinned('email', null);
  } else {
    gridOptions.columnApi.setColumnPinned('email', 'left');
  }
  $(window).on('resize', function () {
    if ($(window).width() < 768) {
      gridOptions.columnApi.setColumnPinned('email', null);
    } else {
      gridOptions.columnApi.setColumnPinned('email', 'left');
    }
  });
});
