/**
 * 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 { ContextHelpStyleSheet } from "./stylesheet/context-help.mjs";
import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
import { ContextBase } from "./context-base.mjs";

export { ContextHint };

/**
 * A context hint control.
 *
 * @fragments /fragments/components/form/context-hint
 * @example /examples/components/form/context-hint-inline
 * @example /examples/components/form/context-hint-shortcuts
 *
 * @since 3.55.0
 * @copyright Volker Schukai
 * @summary A context hint control
 */
class ContextHint extends ContextBase {
	/**
	 * This method is called by the `instanceof` operator.
	 * @return {symbol}
	 */
	static get [instanceSymbol]() {
		return Symbol.for(
			"@schukai/monster/components/form/context-hint@@instance",
		);
	}

	/**
	 * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
	 *
	 * The individual configuration values can be found in the table.
	 *
	 * @property {Object} templates - The templates for the control.
	 * @property {string} templates.main - The main template.
	 * @property {string} mode - The mode of the popper. Possible values are `click`, `enter` and `hover`.
	 * @property {string} content - The content of the popper.
	 * @property {object} popper - The popper options.
	 * @property {string} popper.placement - The placement of the popper.
	 * @property {Object} classes - Custom CSS classes.
	 * @property {string} classes.button - CSS class for the button element.
	 */
	get defaults() {
		return Object.assign({}, super.defaults, {
			templates: {
				main: getTemplate(),
			},
			mode: "auto",
			classes: {
				button: "monster-theme-tertiary-2",
			},
		});
	}

	/**
	 * @return {string}
	 */
	static getTag() {
		return "monster-context-hint";
	}

	/**
	 * @return {CSSStyleSheet[]}
	 */
	static getCSSStyleSheet() {
		return [ContextHelpStyleSheet, ThemeStyleSheet];
	}
}

/**
 * @private
 * @return {string}
 */
function getTemplate() {
	// language=HTML
	return `
        <div data-monster-role="control" part="control">

            <div data-monster-role="button"
                 data-monster-attributes="class path:classes.button"
                 part="button"><svg class="hidden"
				xmlns="http://www.w3.org/2000/svg"
				width="1.2em"
				height="1.2em"
				fill="currentColor"
				viewBox="0 0 16 16">
				<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a2 2 0 0 0-.453-.618A5.98 5.98 0 0 1 2 6m6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1"/>
            </svg></div>

            <div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">
                <div data-monster-role="arrow"></div>
                <div part="content" class="flex">
                    <slot></slot>
                </div>
            </div>

        </div>
    `;
}

registerCustomElement(ContextHint);
