/**
 * 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.
 */

import { instanceSymbol } from "../../constants.mjs";
import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
import { CustomElement } from "../../dom/customelement.mjs";
import {
	assembleMethodSymbol,
	registerCustomElement,
} from "../../dom/customelement.mjs";
import { KpiTileStyleSheet } from "./stylesheet/kpi-tile.mjs";
import { AccessibilityStyleSheet } from "../stylesheet/accessibility.mjs";

export { KpiTile };

/**
 * A KPI Tile Control
 *
 * @fragments /fragments/components/data/kpi/tile/
 *
 * @example /examples/components/data/kpi/tile-simple
 * @example /examples/components/data/kpi/tile-with-labels
 *
 * @since 4.38.0
 * @copyright Volker Schukai
 * @summary A KPI tile for highlighting one key metric with label, value and supporting context.
 */
class KpiTile extends CustomElement {
	static get [instanceSymbol]() {
		return Symbol.for("@schukai/monster/components/data/kpi/tile@@instance");
	}

	/**
	 * @returns {symbol}
	 * @summary Returns the instance symbol for the KPI Tile control.
	 */
	[assembleMethodSymbol]() {
		super[assembleMethodSymbol]();
		return this;
	}

	/**
	 * To set the option via the HTML Tag use the attribute `data-monster-options-`
	 * with the name of the option.
	 *
	 * @property {Object} templates
	 * @property {string} templates.main The main template for the KPI Tile control.
	 * @property {Object} values
	 * @property {string} values.main The main value displayed in the tile.
	 * @property {string} values.small The small value displayed in the tile.
	 * @property {string} values.top The top value displayed in the tile.
	 * @property {string} values.bottom The bottom value displayed in the tile.
	 * @returns {Object}
	 * @summary Returns the default options for the KPI Tile control.
	 */
	get defaults() {
		return Object.assign({}, super.defaults, {
			templates: {
				main: getTemplate(),
			},
			values: {
				main: null,
				small: null,
				top: null,
				bottom: null,
			},
		});
	}

	/**
	 * @returns {string}
	 * @summary Returns the role of the control.
	 */
	static getTag() {
		return "monster-kpi-tile";
	}

	/**
	 * @returns {string}
	 * @summary Returns the role of the control.
	 */
	static getCSSStyleSheet() {
		return [KpiTileStyleSheet, AccessibilityStyleSheet];
	}
}

/**
 * @private
 * @returns {string}
 * @summary Returns the template for the KPI Tile control.
 */
function getTemplate() {
	return `
		<div data-monster-role="control" part="control">
			<div class="top"                data-monster-role="top"    part="top"    data-monster-replace="path:values.top">—</div>
 			<div                            data-monster-role="main"   part="main"   data-monster-replace="path:values.main">—</div>
			<div style="width: 100%; height: 0;"                       part="divider"></div>
			<div                            data-monster-role="small"  part="small"  data-monster-replace="path:values.small">—</div>
			<div                            data-monster-role="bottom" part="bottom" data-monster-replace="path:values.bottom">—</div>
		</div>`;
}

registerCustomElement(KpiTile);
