<script>
	import { useTinyRouter } from 'svelte-tiny-router';

	import { t } from '../../translations.svelte';
	import { api, post } from '../../urls.svelte';
	import { error, yikes } from '../../warn.svelte';
	import { user }  from '../../user.svelte';
	import Autocomplete from '../../Components/Autocomplete.svelte';
    import Tags from '../tags/TagList.svelte';

	let defaultAccount = {
		id       : 0,
		name     : '',
		currency : ''
	};
	let { account = defaultAccount, new_account = false, onSave = () => {} } = $props();

	let entry = $state({
		account,
		date : new Date().toISOString().substring(0, 10),
		source : {
			display: user.name,
			id: user.id
		},
		destination : {},
		amount : 0.0,
		purpose : {},
		tags    : []
	});
	let router = useTinyRouter();

	async function dst_selected(destination){
		destination = JSON.parse(JSON.stringify(destination));
		let source  = JSON.parse(JSON.stringify(entry.source));
		const url   = api(`accounting/${entry.account.id}/tags`)
		const res   = await post(url,{source,destination});
		if (res.ok) {
			yikes();
			const json = await res.json();
			entry.tags = json;
		} else error(res);
	}

	function focusOnEnter(ev,id){
		if (ev.key == 'Enter') {
			proposePurpose();
			document.getElementById(id).focus();
		}
	}

	async function getAccountTags(text){
		if (!text) return [];
		const url = api(`accounting/${entry.account.id}/tags`)
		return await getProposals(text,url);
	}

	async function getDestinations(text){
		const url = api('accounting/destinations');
		return await getProposals(text,url);
	}

	async function getProposals(text,url){
		const res = await post(url,text);
        if (res.ok){
            yikes();
            const input = await res.json();
            return Object.values(input).map(mapDisplay);
        } else {
            error(res);
            return {};
        }
	}


	async function getPurposes(text) {
		const url = api('accounting/purposes');
		return await getProposals(text,url);
	}

	async function getSources(text){
		const url = api('accounting/sources');
		return await getProposals(text,url);
	}

	function gotoTags(purpose){
		document.getElementById('new_tag_input');
	}

	function mapDisplay(object){
		if (object.display){
			return object;
		} else if (object.name) {
			return {...object, display: object.name};
		} else {
		    return { display : object }
		}
	}

	async function proposePurpose(){
		const source      = entry.source;
		const destination = entry.destination;
		const amount      = entry.amount;
		const url         = api(`accounting/${account.id}/purposes`);
		const res         = await post(url,{source,destination,amount});
		if (res.ok) {
			yikes();
			var lastTransaction = await res.json();
			entry.purpose       = { display: lastTransaction.purpose};
			entry.tags          = lastTransaction.tags;
		} else error(res);
	}

	async function save(){
		let data = {
			...entry,
			purpose: entry.purpose.display
		}
		let url = api('accounting');
		let res = await post(url, data);
		if (res.ok) {
			yikes();
			if (new_account){
				router.navigate('/accounting');
				return;
			}
			//entry.tags = [];
			onSave();
			document.getElementById('date-input').focus();
		} else error(res);
	}
</script>

<style>
	hr{
		grid-column: 1 / -1;
		margin: 0.5rem 0;
        border: 0;
        height: 1px;
        align-self: center;
        background: red;
	}
</style>

<fieldset class="grid2 new_transaction">
	{#if new_account}
		<legend>{t('create_new_object',{object:t('account')})}</legend>
		<span style="display:none"></span>
		<span>{t('account name')}</span>
		<span>
			<input type="text" bind:value={entry.account.name} />
		</span>
		<span>{t('currency')}</span>
		<span>
			<input type="text" bind:value={entry.account.currency} />
		</span>
		<hr/>
		<span style="grid-column-end: span 2">{t('first transaction')}</span>
	{:else}
		<legend>{t('add_object',{object:t('transaction')})}</legend>
		<span style="display:none"></span>
	{/if}

	<span>{t('date')}</span>
	<span>
		<input type="date" bind:value={entry.date} id="date-input" />
	</span>

	<span>{t('source')}</span>
	<Autocomplete bind:candidate={entry.source} getCandidates={getSources} id="source-input" />

	<span>{t('destination')}</span>
	<Autocomplete bind:candidate={entry.destination} getCandidates={getDestinations} onSelect={dst_selected} />

	<span>{t('amount')}</span>
	<span>
		<input type="number" bind:value={entry.amount} onkeyup={e => focusOnEnter(e,'purpose_input')} />&nbsp;{entry.account.currency}
	</span>

	<span>{t('purpose')}</span>
	<Autocomplete bind:candidate={entry.purpose} getCandidates={getPurposes} onCommit={gotoTags} id="purpose_input" />

	<span>{t('tags')}</span>
	<Tags getCandidates={getAccountTags} module={null} bind:tags={entry.tags} onEmptyCommit={save} />

	<span></span>
	<span>
		<button onclick={save}>{t('save')}</button>
	</span>
</fieldset>
