<script lang="ts">
import { domain_url } from "util/Util";
import CopyButton from "layout/CopyButton.svelte";
import { formatDate } from "util/Formatting";
import { type FSNode, type NodeOptions } from "lib/FilesystemAPI.svelte";
import AccessControl from "./AccessControl.svelte";
import { user } from "lib/UserStore";

let {
	file = $bindable(),
	options = $bindable(),
}: {
	file?: FSNode;
	options: NodeOptions;
} = $props();

let is_shared = $derived(file.is_shared() || options.link_permissions?.read)
let embed_html: string = $derived.by(() => {
	if (!is_shared) {
		return "File is not shared, can't generate embed code"
	}

	let url = domain_url()+"/d/"+file.id
	return `<iframe ` +
		`src="${url}" ` +
		`style="border: none; width: 100%; max-width 90vw; height: 800px; max-height: 75vh; border-radius: 6px;" ` +
		`allowfullscreen` +
		`></iframe>`
})
let preview_area: HTMLDivElement = $state()

let example = $state(false)
const toggle_example = () => {
	if (is_shared) {
		example = !example
		if (example) {
			preview_area.innerHTML = embed_html
		} else {
			preview_area.innerHTML = ""
		}
	}
}

let share_link = $derived(window.location.protocol+"//"+window.location.host+"/d/"+file.id)
</script>

{#if $user.subscription.file_sharing === false}
	<div class="highlight_yellow">
		Your account does not support sharing features. Access controls will not
		have any effect until you upgrade to premium.
	</div>
{/if}

<fieldset>
	<legend>Public link</legend>

	{#if file.abuse_type !== undefined}
		<div class="highlight_red">
			This file or directory has received an abuse report. It cannot be
			shared.<br/>
			Type of abuse: {file.abuse_type}<br/>
			Report time: {formatDate(file.abuse_report_time, true, true, true)}
		</div>
	{/if}

	<div class="link_grid">
			<a href={share_link}>{share_link}</a>
			<CopyButton text={share_link}>Copy</CopyButton>
	</div>
</fieldset>

<AccessControl options={options}/>

<fieldset>
	<legend>Embedding</legend>
	<p>
		If you have a website you can embed Nova directories and files in your
		own webpages with the code below. If you embed a directory then all
		subdirectories and files will be accessible through the frame. Branding
		options will also apply in the frame, but only when applied to this
		directory. It will not inherit the style from parent directories.
	</p>
	<p>
		Put this code in your website to embed the file or directory.
	</p>
	<div class="center">
		<textarea bind:value={embed_html} style="width: 100%; height: 4em;"></textarea>
		<br/>
		<CopyButton text={embed_html} disabled={!is_shared}>Copy HTML</CopyButton>
		<button onclick={toggle_example} class:button_highlight={example} disabled={!is_shared}>
			<i class="icon">visibility</i> Show example
		</button>
	</div>
	<hr/>

	<div bind:this={preview_area} style="text-align: center;"></div>
</fieldset>

<!-- <fieldset>
	<legend>Custom domain</legend>
	<p>
		Experimental options
	</p>
	<div class="form_grid">
		<label for="custom_domain_name">Domain name</label>
		<input
			id="custom_domain_name"
			bind:value={options.custom_domain_name}
			type="text"
			disabled={!options.shared}
		/>

		<label for="custom_domain_cert">Certificate</label>
		<textarea id="custom_domain_cert" bind:value={options.custom_domain_cert} style="height: 4em;"></textarea>

		<label for="custom_domain_key">Key</label>
		<textarea id="custom_domain_key" bind:value={options.custom_domain_key} style="height: 4em;"></textarea>
	</div>
</fieldset> -->

<style>
.center {
	text-align: center;
}

.link_grid {
	display: grid;
	grid-template-columns: 10fr auto;
	align-items: center;
}
/* .form_grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
} */
</style>
