<!--
  (C) 2013-22 - ntop.org
-->

<template>
  <div class="row">
    <div class="col-md-12 col-lg-12">
      <div class="card  card-shadow">
        <div class="card-body">
          <Loading v-if="loading"></Loading>
          <div id="manage_configurations_backup" :class="[ loading ? 'ntopng-gray-out' : '' ]">
            <Datatable ref="table_manage_configurations_backup" :id="table_config.id" :key="table_config.data_url"
              :table_buttons="table_config.table_buttons" :columns_config="table_config.columns_config"
              :data_url="table_config.data_url" :table_config="table_config.table_config">

              <template v-slot:menu>
                <div class="d-flex align-items-center">
                </div>
              </template>
            </Datatable>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import { default as Datatable } from "./datatable.vue";
import { default as Loading } from "./loading.vue"

const _i18n = (t) => i18n(t);
const table_manage_configurations_backup = ref(null);
const url = `${http_prefix}/lua/rest/v2/get/system/configurations/list_available_backups.lua`
const table_config = ref({})
const loading = ref(false);

const props = defineProps({
  date_format: String,
});


const format_flows_icon = function (data, rowData) {
  const ms_data = data * 1000;
  let date_format = "HH:MM:SS";
  if (props.date_format == "little_endian") {
    date_format = "DD/MM/YYYY " + date_format;
  } else if (props.date_format == "middle_endian") {
    date_format = "MM/DD/YYYY " + date_format;
  } else {
    date_format = "YYYY/MM/DD " + date_format;
  }
  return ntopng_utility.from_utc_to_server_date_format(ms_data, date_format);
}


const reload_table = () => {
  loading.value = true;
  table_manage_configurations_backup.value.reload();
  loading.value = false;
}

onBeforeMount(async () => {
  await set_datatable_config();
});

const trigger_download = function (row) {
  window.open(`${http_prefix}/lua/rest/v2/get/system/configurations/download_backup.lua?epoch=${row.epoch}&download=true`);
}

const add_action_column = function (rowData) {

  let download_backup_handler = {
    handlerId: "download_backup_handler",
    onClick: () => {
      trigger_download(rowData);
    },
  }

  return DataTableUtils.createActionButtons([
    { class: `pointer`, handler: download_backup_handler, icon: 'fas fa-download fa-lg', title: i18n('download') },
  ]);
}

async function set_datatable_config() {
  const datatableButton = [];

  /* Manage the buttons close to the search box */
  datatableButton.push({
    text: '<i class="fas fa-sync"></i>',
    className: 'btn-link',
    action: function (e, dt, node, config) {
      reload_table();
    }
  });


  let defaultDatatableConfig = {
    table_buttons: datatableButton,
    data_url: `${url}`,
    enable_search: true,
    id: "manage_configurations_backup",
    table_config: {
      serverSide: true,
      responsive: false,
      scrollX: true,
      columnDefs: [
        { type: "file-size", targets: 0 },
      ]
    }
  };

  let columns = [];

  columns.push(
    {
      columnName: _i18n("backup_date"), orderable: true, targets: 0, name: 'epoch', data: 'epoch', className: 'text-left', responsivePriority: 1, render: (data, _, rowData) => {
        return format_flows_icon(data, rowData)
      }
    }, {
    columnName: _i18n("actions"), orderable: false, width: '5%', name: 'actions', className: 'text-center', orderable: false, responsivePriority: 0, render: function (_, type, rowData) { return add_action_column(rowData) }
  }
    ,
  );



  defaultDatatableConfig.columns_config = columns;
  table_config.value = defaultDatatableConfig;
}

</script>
