import { CMOptions } from '../../Config/VariablesAndData';
import {
	ColorTextPre, ColorBorderPre, ColorGray, ColorBlue, ColorRed, ColorYellow, ColorPurple, TooltipType,
} from '../VariablesAndData';

/** Creates various sections of tooltips */

/**
 * This function creates a tooltipBox object which contains all CookieMonster added tooltip information.
 * @returns {object}	div		An object containing the stylized box
 */
export function TooltipCreateTooltipBox() {
	l('tooltip').firstChild.style.paddingBottom = '4px'; // Sets padding on base-tooltip
	const tooltipBox = document.createElement('div');
	tooltipBox.style.border = '1px solid';
	tooltipBox.style.padding = '4px';
	tooltipBox.style.margin = '0px -4px';
	tooltipBox.id = 'CMTooltipBorder';
	tooltipBox.className = ColorTextPre + ColorGray;
	return tooltipBox;
}

/**
 * This function creates a header object for tooltips.
 * @param	{string}	text	Title of header
 * @returns {object}	div		An object containing the stylized header
 */
export function TooltipCreateHeader(text) {
	const div = document.createElement('div');
	div.style.fontWeight = 'bold';
	div.id = `${text}Title`;
	div.className = ColorTextPre + ColorBlue;
	div.textContent = text;
	return div;
}

/**
 * This function creates the tooltip objectm for warnings
 * The object is also removed by CM.Disp.UpdateTooltipWarnings() when type is 's' or 'g'
 * @returns {object}	TooltipWarn	The Warnings-tooltip object
 */
export function TooltipCreateWarningSection() {
	const TooltipWarn = document.createElement('div');
	TooltipWarn.style.position = 'absolute';
	TooltipWarn.style.display = 'block';
	TooltipWarn.style.left = 'auto';
	TooltipWarn.style.bottom = 'auto';
	TooltipWarn.id = 'CMDispTooltipWarningParent';

	const create = function (boxId, color, labelTextFront, labelTextBack, deficitId) {
		const box = document.createElement('div');
		box.id = boxId;
		box.style.display = 'none';
		box.style.transition = 'opacity 0.1s ease-out';
		box.className = ColorBorderPre + color;
		box.style.padding = '2px';
		box.style.background = '#000 url(img/darkNoise.png)';
		const labelDiv = document.createElement('div');
		box.appendChild(labelDiv);
		const labelSpan = document.createElement('span');
		labelSpan.className = ColorTextPre + color;
		labelSpan.style.fontWeight = 'bold';
		labelSpan.textContent = labelTextFront;
		labelDiv.appendChild(labelSpan);
		labelDiv.appendChild(document.createTextNode(labelTextBack));
		const deficitDiv = document.createElement('div');
		box.appendChild(deficitDiv);
		const deficitSpan = document.createElement('span');
		deficitSpan.id = deficitId;
		deficitDiv.appendChild(document.createTextNode('Deficit: '));
		deficitDiv.appendChild(deficitSpan);
		return box;
	};

	TooltipWarn.appendChild(create('CMDispTooltipWarnLucky', ColorRed, 'Warning: ', 'Purchase of this item will put you under the number of Cookies required for "Lucky!"', 'CMDispTooltipWarnLuckyText'));
	TooltipWarn.firstChild.style.marginBottom = '4px';
	TooltipWarn.appendChild(create('CMDispTooltipWarnLuckyFrenzy', ColorYellow, 'Warning: ', 'Purchase of this item will put you under the number of Cookies required for "Lucky!" (Frenzy)', 'CMDispTooltipWarnLuckyFrenzyText'));
	TooltipWarn.lastChild.style.marginBottom = '4px';
	TooltipWarn.appendChild(create('CMDispTooltipWarnConjure', ColorPurple, 'Warning: ', 'Purchase of this item will put you under the number of Cookies required for "Conjure Baked Goods"', 'CMDispTooltipWarnConjureText'));
	TooltipWarn.lastChild.style.marginBottom = '4px';
	TooltipWarn.appendChild(create('CMDispTooltipWarnConjureFrenzy', ColorPurple, 'Warning: ', 'Purchase of this item will put you under the number of Cookies required for "Conjure Baked Goods" (Frenzy)', 'CMDispTooltipWarnConjureFrenzyText'));
	TooltipWarn.lastChild.style.marginBottom = '4px';
	TooltipWarn.appendChild(create('CMDispTooltipWarnEdifice', ColorPurple, 'Warning: ', 'Purchase of this item will put you under the number of Cookies needed for "Spontaneous Edifice" to possibly give you your most expensive building"', 'CMDispTooltipWarnEdificeText'));
	TooltipWarn.lastChild.style.marginBottom = '4px';
	TooltipWarn.appendChild(create('CMDispTooltipWarnUser', ColorRed, 'Warning: ', `Purchase of this item will put you under the number of Cookies equal to ${CMOptions.ToolWarnUser} seconds of CPS`, 'CMDispTooltipWarnUserText'));

	return TooltipWarn;
}

/**
 * This function appends the sections for Bonus Income, PP and Time left (to achiev) to the tooltip-object
 * The actual data is added by the Update-functions themselves
 * @param	{object}	tooltip		Object of a TooltipBox, normally created by a call to CM.Disp.TooltipCreateTooltipBox()
 */
export function TooltipCreateCalculationSection(tooltip) {
	tooltip.appendChild(TooltipCreateHeader('Bonus Income'));
	const income = document.createElement('div');
	income.style.marginBottom = '4px';
	income.style.color = 'white';
	income.id = 'CMTooltipIncome';
	tooltip.appendChild(income);

	tooltip.appendChild(TooltipCreateHeader('Bonus Cookies per Click'));
	tooltip.lastChild.style.display = 'none';
	const click = document.createElement('div');
	click.style.marginBottom = '4px';
	click.style.color = 'white';
	click.style.display = 'none';
	click.id = 'CMTooltipCookiePerClick';
	tooltip.appendChild(click);

	tooltip.appendChild(TooltipCreateHeader('Payback Period'));
	const pp = document.createElement('div');
	pp.style.marginBottom = '4px';
	pp.id = 'CMTooltipPP';
	tooltip.appendChild(pp);

	tooltip.appendChild(TooltipCreateHeader('Time Left'));
	const time = document.createElement('div');
	time.id = 'CMTooltipTime';
	tooltip.appendChild(time);

	if (TooltipType === 'b') {
		tooltip.appendChild(TooltipCreateHeader('Production left till next achievement'));
		tooltip.lastChild.id = 'CMTooltipProductionHeader'; // Assign a id in order to hid when no achiev's are left
		const production = document.createElement('div');
		production.id = 'CMTooltipProduction';
		tooltip.appendChild(production);
	}
}