const serverLicenseSelect = {
  serverkey: {
    valueField: "id",
    searchField: "name",
    options: [], // Initialize empty array for options
    placeholder: "",
    plugins: ['remove_button'],
    onDelete: function (values) {
    },
    render: {
      option: function (data, escape) {
        if (!data.name) {
          console.error("Invalid data for option:", data);
          return "";
        }
        return `<div class="flex space-x-3">
                            <div class="flex flex-col">
                                <span>${escape(data.name)}</span>
                            </div>
                        </div>`;
      },
      item: function (data, escape) {
        if (!data.name) {
          console.error("Invalid data for item:", data);
          return "";
        }
        return `<span class="badge rounded-lg bg-primary dark:bg-accent text-white p-px m-1 mr-2 py-2">
                            <span class="mx-2">${escape(data.name)}</span>
                        </span>`;
      },
    },
  },
};

const fetchServerLicenses = (serverLicenseSelect) => {
  return fetch('/get-serverlicense')
    .then(response => response.json())
    .then(data => {
      if (!data.serverLicenses || !Array.isArray(data.serverLicenses)) {
        console.error("Invalid response format:", data);
        return;
      }

      serverLicenseSelect.serverkey.options = data.serverLicenses;
    })
    .catch(error => console.error('Error fetching serverkey data:', error));
};


export { serverLicenseSelect, fetchServerLicenses };