<template>
	<div class="arca-modal-page">
		<h1>arca-modal</h1>

		<p>
			<span class="span-component-name">arca-modal</span> è un componente che gestisce finestre modali.
		</p>

		<hr class="section-separator">

		<h2>Configurazione</h2>

		<div class="showcase">
			<arca-button text="Mostra modale" @click="ShowModal" primary-color="#CC0000" />
		</div>

		<code-sample lang="javascript" :code="codeSamples.varSetup" />
		<code-sample lang="html" :code="codeSamples.modalSetup" />

		<arca-modal ref="modal" :show.sync="modal$show" title="Titolo della finestra" primary-color="#CC0000" :windowStyle="{ width: '420px', height: '420px' }">
			Contenuto
		</arca-modal>

		<p>
			Una volta configurato il tutto, per mostrare il modale basta impostare showModal a true.<br>
			Per esempio, il pulsante nell'esempio sopra esegue questa funzione:
		</p>

		<code-sample lang="javascript" :code="codeSamples.showFunction" />

		<hr class="section-separator">

		<h2>Azioni nel footer</h2>

		<p>
			<span class="span-component-name">arca-modal</span> offre la possibilità di assegnare una lista di azioni attivabili nel footer della finestra modale. <br>
			Per fare questo basta assegnare un array di pulsanti alla proprietà "buttons" di <span class="span-component-name">arca-modal</span>.
		</p>

		<div class="showcase">
			<arca-button text="Mostra modale" @click="ShowModal2" primary-color="#CC0000" />
		</div>

		<code-sample lang="javascript" :code="codeSamples.modalButtonsVar" />
		<code-sample lang="html" :code="codeSamples.modalButtonsAssign" />

		<p>
			Le proprietà assegnabili agli oggetti che descrivono i pulsanti sono le seguenti:
		</p>

		<code-sample lang="javascript" :code="codeSamples.modalButtonInterface" />

		<arca-modal :show.sync="modal2$show" :buttons="modal2$buttons" title="Modale con azioni" primary-color="#CC0000" :windowStyle="{ width: '420px', height: '420px' }">
			Contenuto<br>
			<span v-show="counting">{{ num }}...</span>
		</arca-modal>
	</div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator"

@Component
export default class ArcaModalPage extends Vue
{
	modal$show = false
	modal2$show = false

	modal2$buttons = [
		{ text: "Conta", action: this.Conta },
		{ text: "Conta e chiudi", action: this.Conta, close: "after-action" },
		{ text: "Chiudi e conta", action: this.Conta, close: "before-action" },
		{ text: "Annulla", close: true, action: () => {}, primary: true }
	]

	num = 3
	counting = false

	codeSamples = {
		varSetup:	`/**\n` +
						`* Variabile booleana che decide se il modale è attivo o no.\n` +
						`*/\n` +
						`showModal = false\n` +
						`\n` +
						`/**\n` +
						`* Bisogna specificare le dimensioni della finestra modale.\n` +
						`* Questo valore verrà assegnato alla proprietà "windowStyle" del modale.\n` +
						`*/\n` +
						`modalStyle = {\n` +
						`	width: "420px",\n` +
						`	height: "420px",\n` +
						`}`,

		modalSetup:	`<arca-modal :show.sync="showModal" title="Titolo della finestra" :windowStyle="modalStyle">\n` +
						`	<!-- Il contenuto del modale va messo qui! -->\n` +
						`	Contenuto\n` +
						`</arca-modal>`,

		showFunction:	`ShowModal()\n` +
							`{\n` +
							`	this.showModal = true;\n` +
							`}`,

		modalButtonsVar:	`modalButtons = [\n` +
								`	{ text: "Conta", action: this.Conta },\n` +
								`	{ text: "Conta e chiudi", action: this.Conta, close: "after-action" },\n` +
								`	{ text: "Chiudi e conta", action: this.Conta, close: "before-action" },\n` +
								`	{ text: "Annulla", close: true, action: () => {}, primary: true }\n` +
								`]`,

		modalButtonsAssign:	`<arca-modal :show.sync="showModal" :buttons="modalButtons" title="Modale con azioni" :windowStyle="modalStyle">\n` +
									`	Contenuto\n` +
									`</arca-modal>`,
		
		modalButtonInterface:	`interface IButton\n` +
										`{\n` +
										`	id: string\n` + 
										`	text: string\n` + 
										`	icon?: string\n` +
										`	transparent?: boolean\n` +
										`	primary?: boolean\n` +
										`	primaryColor?: string\n` +
										`	borderless?: boolean\n` +
										`\n` +
										`	disable?: "during-action" | "all-during-action" | string[] | boolean,\n` +
										`	close?: "before-action" | "after-action"\n` +
										`\n` +
										`	action(): void | Promise<void>\n` +
										`}`
	}

	ShowModal()
	{
		this.modal$show = true;
	}
	ShowModal2()
	{
		this.modal2$show = true;
	}

	Conta()
	{
		return new Promise((resolve) => {
			this.counting = true;

			var interval = setInterval(() => {
				this.num--;

				if (this.num <= 0) {
					clearInterval(interval);
					this.num = 3;
					this.counting = false;
					resolve(true);
					alert("Conteggio terminato!")
				}
			}, 1000)
		});
	}
}
</script>

<style lang="less" scoped>
.arca-modal-page {
	
}
</style>