<script lang="ts">

	import Debug from './tmp_debug.svelte';

	import { layout }      from './Store_chat';
	import ChatBox         from './Chat_box_css.svelte';

	import CloseLayout     from './Layout_close.svelte';
	import HomeLayout      from './Layout_home.svelte';
	import RoomLayout      from './Layout_room.svelte';
	import NewLayout       from './Layout_new.svelte';
	import SettingsLayout  from './Layout_settings.svelte';
	import RoomsetLayout   from './Layout_room_set.svelte';
	import ProtectedLayout from './Layout_protected.svelte';
	import CreateLayout    from './Layout_create.svelte';
	import MuteLayout      from './Layout_mute.svelte';
	import UserLayout      from './Layout_user.svelte';

	import Button from './Element_button.svelte';

	/* global variables
	*/
	export let color;
	let room = "";
	let admin = false;
	let layouts = ["home", "home"];

	/* hold previous version of layout, to go back
	*/
	function set_layouts($layout)
	{
		console.log("layouts:", layouts);
		console.log("layout:", $layout);
		if ($layout.length === 0)
			layout.set(layouts[0]);
		else if ($layout === "close")
			return;
		else if ($layout === layouts[0])
			return;
		else if ($layout === layouts[1])
			layouts = [$layout, "home"];
		else
			layouts = [$layout, layouts[0]];
		console.log("- layouts:", layouts);
	}
	$: set_layouts($layout);

</script>

<ChatBox color={color}>

	{#if $layout === "home"}
		<HomeLayout />

	{:else if $layout === "close"}
		<CloseLayout back={layouts[0]} />

	{:else if $layout === "room"}
		<RoomLayout back={layouts[1]} />

	{:else if $layout === "new"}
		<NewLayout back={layouts[1]} />

	{:else if $layout === "settings"}
		<SettingsLayout back={layouts[1]} />

	{:else if $layout === "room_set"}
		<RoomsetLayout back={layouts[1]} />

	{:else if $layout === "protected"}
		<ProtectedLayout back={layouts[1]} />

	{:else if $layout === "create"}
		<CreateLayout back={layouts[1]} />

	{:else if $layout === "mute"}
		<MuteLayout back={layouts[1]} />

	{:else if $layout === "user"}
		<UserLayout back={layouts[1]} />

	{/if}

</ChatBox>

<!-- TMP DEBUG -->
<Debug bind:layouts />

<style></style>

