/**
 * Copyright © Volker Schukai and all contributing authors, {{copyRightYear}}. All rights reserved.
 * Node module: @schukai/monster
 *
 * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
 * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
 *
 * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
 * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
 * For more information about purchasing a commercial license, please contact Volker Schukai.
 *
 * SPDX-License-Identifier: AGPL-3.0
 */

import { instanceSymbol } from "../../constants.mjs";
import { registerCustomElement } from "../../dom/customelement.mjs";
import { ButtonBarStyleSheet } from "./stylesheet/button-bar.mjs";
import { ControlBar } from "./control-bar.mjs";

export { ButtonBar };

/**
 * A button bar control.
 *
 * @fragments /fragments/components/form/button-bar/
 *
 * @example /examples/components/form/button-bar-simple Button bar
 *
 * @copyright Volker Schukai
 * @summary A responsive button bar that groups multiple actions and moves overflowed buttons into a menu.
 * @fires monster-fetched
 */
class ButtonBar extends ControlBar {
	/**
	 * This method is called by the `instanceof` operator.
	 * @return {symbol}
	 */
	static get [instanceSymbol]() {
		return Symbol.for("@schukai/monster/components/form/button-bar@@instance");
	}

	/**
	 * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
	 *
	 * @return {Object}
	 */
	get defaults() {
		return Object.assign({}, super.defaults, {
			templates: {
				main: getTemplate(),
			},
		});
	}

	/**
	 * This method is called internal and should not be called directly.
	 *
	 * @return {CSSStyleSheet[]}
	 */
	static getCSSStyleSheet() {
		return [...super.getCSSStyleSheet(), ButtonBarStyleSheet];
	}

	/**
	 * This method is called internal and should not be called directly.
	 *
	 * @return {string}
	 */
	static getTag() {
		return "monster-button-bar";
	}
}

/**
 * @private
 * @return {string}
 */
function getTemplate() {
	// language=HTML
	return `
        <div data-monster-role="control" part="control">
            <div data-monster-role="button-bar">
                <slot></slot>
                <div part="popper-nav" data-monster-role="popper-nav"
                     tabindex="-1">
                    <button part="popper-switch" data-monster-role="switch"
                            class="monster-button-outline-tertiary hidden" hidden>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                             viewBox="0 0 16 16">
                            <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
                        </svg>
                    </button>
                </div>
            </div>
            <div data-monster-role="popper">
                <slot name="popper"></slot>
            </div>
        </div>`;
}

registerCustomElement(ButtonBar);
