<script>
import FilePicker from "../file_viewer/FilePicker.svelte";
import CustomBanner from "../file_viewer/CustomBanner.svelte";
import LoadingIndicator from "../util/LoadingIndicator.svelte";
import SuccessMessage from "../util/SuccessMessage.svelte";
import ThemePicker from "../util/ThemePicker.svelte";
import { onMount } from "svelte";

let loading = false
let success_message

let file_picker
let currently_selecting = "" // header, background or footer

let theme = ""
let header_image = ""
let header_link = ""
let background_image = ""
let footer_image = ""
let footer_link = ""

let select_file = t => {
	currently_selecting = t
	file_picker.open()
}
let add_file = files => {
	let type = files[0].type
	if (type != "image/png" && type != "image/jpeg" && type != "image/gif" && type != "image/webp") {
		success_message.set(false, "File must be an image type")
		return
	}
	if (files[0].size > 10e6) {
		success_message.set(false, "Files larger than 10 MB are not allowed. Recommended size is below 1 MB")
		return
	}

	if (currently_selecting === "header") {
		header_image = files[0].id
	} else if (currently_selecting === "background") {
		background_image = files[0].id
	} else if (currently_selecting === "footer") {
		footer_image = files[0].id
	}

	save()
}

let save = async () => {
	loading = true
	const form = new FormData()
	form.append("theme", theme)
	form.append("header_image", header_image)
	form.append("header_link", header_link)
	form.append("background_image", background_image)
	form.append("footer_image", footer_image)
	form.append("footer_link", footer_link)

	try {
		const resp = await fetch(
			window.api_endpoint+"/user/file_customization",
			{ method: "PUT", body: form }
		);
		if(resp.status >= 400) {
			let json = await resp.json()
			console.debug(json)
			throw json.message
		}

		success_message.set(true, "Changes saved")
	} catch(err) {
		success_message.set(false, err)
	} finally {
		loading = false
	}
}

onMount(() => {
	// The fields are undefined when they're empty. So we need to check if each
	// field is defined before converting to a string
	if (window.user.file_viewer_branding) {
		let b = window.user.file_viewer_branding
		theme = b.theme ? b.theme : ""
		header_image = b.header_image ? b.header_image : ""
		header_link = b.header_link ? b.header_link : ""
		background_image = b.background_image ? b.background_image : ""
		footer_image = b.footer_image ? b.footer_image : ""
		footer_link = b.footer_link ? b.footer_link : ""
	}
})
</script>

<LoadingIndicator loading={loading}/>

<section>
	<h2>File viewer branding</h2>
	{#if !window.user.subscription.file_viewer_branding}
		<div class="highlight_red">
			Sharing settings are not available for your account. Subscribe to
			the Persistence plan or higher to enable these features.
		</div>
	{:else if !window.user.hotlinking_enabled}
		<div class="highlight_red">
			To use custom file viewer branding bandwidth sharing needs to be
			enabled. Enable bandwidth sharing on the
			<a href="/user/sharing/bandwidth">bandwidth sharing page</a>.
		</div>
	{/if}
	<SuccessMessage bind:this={success_message}></SuccessMessage>

	<p>
		You can change the appearance of your file viewer pages. The images you
		choose here will be loaded each time someone visits one of your files.
		The data usage will also be subtracted from your account's data cap.
		Keep in mind that large images can take a very long time to load over
		cellular connections. I recommend keeping the header and footer images
		below 100 kB, and the background image below 1 MB. Allowed image types
		are PNG, JPEG, GIF and WebP. If you want to use an animated banner you
		should use APNG or WebP. Avoid using animated GIFs as they are very slow
		to load.
	</p>
	<h3>Theme</h3>
	<p>
		Choose a theme for your download pages. This theme will override the
		theme preference of the person viewing the file. Set to 'None' to let
		the viewer choose their own theme.
	</p>
	<ThemePicker
		theme={theme}
		on:theme_change={e => {theme = e.detail; save()}}>
	</ThemePicker>

	<h3>Header image</h3>
	<p>
		Will be shown above the file. Maximum height is 90px. Will be shrunk if
		larger. You can also add a link to open when the visitor clicks the
		image. The link need to start with 'https://'.
	</p>
	<button on:click={() => {select_file("header")}}>
		<i class="icon">add_photo_alternate</i>
		Select header image
	</button>
	<button on:click={() => {header_image = ""; save()}}>
		<i class="icon">close</i>
		Remove
	</button>
	<br/>
	Header image link:<br/>
	<form class="form_row" on:submit|preventDefault={save}>
		<input class="grow" bind:value={header_link} type="text" placeholder="https://"/>
		<button class="shrink" action="submit"><i class="icon">save</i> Save</button>
	</form>

	{#if header_image}
		<div class="highlight_shaded">
			<CustomBanner src={"/api/file/"+header_image} link={header_link}></CustomBanner>
		</div>
	{/if}

	<h3>Background image</h3>
	<p>
		This image will be shown behind the file which is being viewed. I
		recommend choosing something dark and not too distracting. Try to keep
		the file below 1 MB to not harm page loading times. Using a JPEG image
		with a quality value of 60 is usually good enough.
	</p>
	<button on:click={() => {select_file("background")}}>
		<i class="icon">add_photo_alternate</i>
		Select background image
	</button>
	<button on:click={() => {background_image = ""; save()}}>
		<i class="icon">close</i>
		Remove
	</button>
	{#if background_image}
		<div class="highlight_shaded">
			<img class="background_preview" src="/api/file/{background_image}" alt="Custom file viewer background"/>
		</div>
	{/if}

	<h3>Footer image</h3>
	<p>
		Will be shown below the file. Maximum height is 90px. Will be shrunk if
		larger.
	</p>
	<button on:click={() => {select_file("footer")}}>
		<i class="icon">add_photo_alternate</i>
		Select footer image
	</button>
	<button on:click={() => {footer_image = ""; save()}}>
		<i class="icon">close</i>
		Remove
	</button>
	<br/>
	Footer image link:<br/>
	<form class="form_row" on:submit|preventDefault={save}>
		<input class="grow" bind:value={footer_link} type="text" placeholder="https://"/>
		<button class="shrink" action="submit"><i class="icon">save</i> Save</button>
	</form>
	{#if footer_image}
		<div class="highlight_shaded">
			<CustomBanner src={"/api/file/"+footer_image} link={footer_link}></CustomBanner>
		</div>
	{/if}
</section>

<FilePicker
	bind:this={file_picker}
	on:files={e => {add_file(e.detail)}}
	multi_select={false}
	title="Select image file"
/>

<style>
.background_preview {
	max-height: 200px;
	max-width: 100%;
	display: block;
	margin: auto;
}
.form_row {
	display: inline-flex;
	flex-direction: row;
	width: 100%;
	align-items: center;
}
.grow {
	flex: 1 1 auto;
}
.shrink {
	flex: 0 0 auto;
}
</style>
