define(['jquery', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js'], function (jQuery) {
	'use strict';

	function Control() {}

	Control.prototype.draw = function (oControlHost) {
		var o = oControlHost.configuration;
		this.m_sCardNames = [];
		var aButtons = o.Tabs || this.generateTabsFromDataStore(oControlHost);
		var sID = oControlHost.container.id;
		var sInputName = sID + '__bs-buttonbar__';

		var aHtml = [];
		aHtml.push('<div class="btn-group" data-toggle="buttons" role="group">');
		for (var i = 0; i < aButtons.length; i++) {
			var oButton = aButtons[i];
			this.m_sCardNames[i] = oButton.card;

			aHtml.push(
				'<input type="radio" class="btn-check" name="buttonitems" id="' + sInputName + i + '" autocomplete="off" cardIndex="' + i + '" checked />' +
				'<label class="btn btn-outline-primary" for="' + sInputName + i + '">' + oButton.label + '</label>'
			);
		}
		aHtml.push('</div>');
		oControlHost.container.innerHTML = aHtml.join('');

		var nl = oControlHost.container.querySelectorAll('INPUT');
		for (var i = 0; i < aButtons.length; i++) {
			var el = nl.item(i);
			el.onclick = this.onTabClick.bind(this, el, oControlHost.page);
		}

		jQuery('.btn-group input:eq(0)').click();
	};

	Control.prototype.onTabClick = function (el, oPage) {
		jQuery(el).button('toggle');
		var iCardIndex = +el.getAttribute('cardIndex');

		if (this.m_sCards) {
			var a = oPage.getControlsByName(this.m_sCards);
			for (var i = 0; i < a.length; i++) {
				a[i].setDisplay(i === iCardIndex);
			}
			return;
		}

		for (var i = 0; i < this.m_sCardNames.length; i++) {
			oPage.getControlByName(this.m_sCardNames[i]).setDisplay(i === iCardIndex);
		}
	};

	Control.prototype.generateTabsFromDataStore = function (oControlHost) {
		var oDataStore = this.m_oDataStore;
		if (!oDataStore) {
			return null;
		}
		var iLabelColumn = oDataStore.getColumnIndex('Label') || 0;
		this.m_sCards = oControlHost.configuration.Cards;
		var aButtons = [];
		var iRowCount = oDataStore.rowCount;
		for (var iRow = 0; iRow < iRowCount; iRow++) {
			aButtons.push({
				label: oDataStore.getFormattedCellValue(iRow, iLabelColumn),
				card: this.m_sCards
			});
		}
		return aButtons;
	};

	Control.prototype.setData = function (oControlHost, oDataStore) {
		this.m_oDataStore = oDataStore;
	};

	return Control;
});