var _ = require('underscore');
var __ = require('localize');
var $ = require('jquery');
var App = require('./app');
var utils = require('../components/utils');
let {showConfirm, createFlashMsg} = utils;

const swal = require('./vendor/sweetalert2');
const OUTBOUND_CSV_URL = `//${appConfig.server_url}/outbound/csv`;

const API_ROOT = `//${appConfig.server_url}/api/outbound`;
const OUTBOUND_DATA_URL = API_ROOT;


/**
 * Initialize the Widget datatable.
 */
function initWidget ($el) {
    var dataUrl = OUTBOUND_DATA_URL;

    App.datatables();

    var actionCellTemplate = _.template($('#action-cell').html());
    var tableApi = $('#outbound-datatable').DataTable({
        buttons: [
            {
                text: 'Download csv',
                className: 'btn-primary btn btn-csv-dl',
                action: function (e, dt, node, config) {
                    var searchOptions = _.extend({}, dt.ajax.params(), { length: 9999999 });
                    var queryString = $.param(searchOptions);
                    var url = `${OUTBOUND_CSV_URL}?${queryString}`;

                    window.open(url);
                }
            }
        ],
        dom: "<'row'<'col-sm-3 col-md-3 col-lg-2'B><'col-sm-2 col-lg-2'l><'col-xs-12 col-sm-7 col-md-7 col-lg-8 datatables-padding text-right'f>>" +
                 "<'row'<'col-sm-12't>>" +
                 "<'row'<'col-sm-5'i><'col-sm-7'rp>>",
        columns: [
            {
                data: null,
                render: function (data, type, row, meta) {
                    return tableApi.page.info().start + meta.row + 1;
                },
                searchable: false,
                orderable: false
            },
            {
                data: 1,
                render: function (data, type, row) {
                    var enabled = row['5'];
                    if (!enabled)
                        return `<del>${data}</del>`;
                    return `${data}`;
                }
            },
            {
                searchable: false,
                orderable: true,
            },
            {
                data: 3,
                searchable: false,
                render: function (date) {
                    return `<time datetime='${date}'>${moment(date).fromNow()}</time>`;
                }
            },
            {
                data: 4,
                searchable: false,
                render: function (date) {
                    return `<time datetime='${date}'>${moment(date).fromNow()}</time>`;
                }
            },
            {
                data: null,
                className: 'text-center',
                searchable: false,
                orderable: false,
                render: function (data, type, row) {
                    var id = row[0];
                    return actionCellTemplate({
                        __: __,
                        editUrl: `//${appConfig.server_url}/outbound/${id}`, installURL: `//${appConfig.server_url}/outbound/install-instructions/${id}`,
                        enabled: row[5],
                        usageOverLimit: row[6]
                    });
                }
            }
        ],
        order: [[ 1, "desc" ]],
        "language": {
            "lengthMenu": 'Display <select class="form-control dataTables-records-length-select">'+
            '<option value="10"> 10</option>'+
            '<option value="20"> 20</option>'+
            '<option value="30"> 30</option>'+
            '<option value="40"> 40</option>'+
            '<option value="50"> 50</option>'+
            '<option value="-1"> All</option>'+
            '</select> records'
        },
        processing: false,
        serverSide: true,
        ajax: dataUrl,

        createdRow: function (row, data, dataIndex) {
            var id = data[0];
            var $row = $(row);

            $row.find('.disable-button').click(function () {
                $.post(`${API_ROOT}/disable/${id}`).done(function () {
                    tableApi.ajax.reload();
                }).fail(function () {
                    utils.flash(__('There was an error updating the routing.'), 'error');
                });
            });
            $row.find('.enable-button').click(function () {
                $.post(`${API_ROOT}/enable/${id}`).done(function () {
                    tableApi.ajax.reload();
                }).fail(function () {
                    utils.flash(__('There was an error updating the routing.'), 'error');
                });
            });
            $row.find('.delete-button').click(function (event) {
                event.preventDefault();
                {swal({title: 'Are you sure about this deletion?',
                      text: "You won't be able to revert this change.",
                      type: 'warning',
                      showCancelButton: true,
                      confirmButtonColor: '#03a9f4',
                      cancelButtonColor: '#f44336',
                      confirmButtonText: 'Yes, delete it!'
                      }).then(function(isConfirm)
                      {
                      if (isConfirm){
                        var csrf_token = $('meta[name=csrf-token]').attr('content');
                        $.ajax({
                            url: `${API_ROOT}/delete/${id}`,
                            headers: {
                                        "X-CSRFToken": csrf_token,
                                },
                            method: 'DELETE'
                        }).done(function () {
                            tableApi.ajax.reload();
                            swal({
                                title: 'Deleted!',
                                text: 'The widget has been deleted.',
                                type: 'success',
                                confirmButtonColor: '#03a9f4'
                                }
                            );
                        }).fail(function () {
                            utils.flash(__('There was an error deleting the widget.','danger'));
                        });
                      }
                  })
                }
            });
        }
    });
    // Add material-design datatables classes to divs
    $('#outbound-datatable_filter label').addClass('form-group');
    $('#outbound-datatable_length label').addClass('form-group');

    /* Add placeholder attribute to the search input */
    $('.dataTables_filter input').attr('placeholder', 'Search Records');
}


$(function () {
    var csrfToken = $('meta[name=csrf-token]').attr('content');
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrfToken);
            }
        }
    });

    initWidget($('#outbound-datatable'));
});