
<script lang="ts">

	import Button from './Chat_button.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';

	export let color = "transparent";

	let room = "";
	let admin = false;
	let layout = "close";
	let layouts = ["home", "home"];

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

</script>

<div class="{layout} chat_box" style="background-color: {color};">

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

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

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

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

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

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

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

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

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

	{:else}
		<div class="grid_box">
			<Button bind:layout new_layout={layouts[0]} my_class="chat">
				chat
			</Button>
		</div>

	{/if}


</div>

<!-- TEMP for test -->
<div style="display: flex; flex-direction: column; font-size: 12px; position: fixed; top: 20px; left: 20px; background-color: white;">
	<p>temp, for testing :</p>
	<button on:click={function(){layout = "close"    }}>close</button>
	<button on:click={function(){layout = "home"     }}>home</button>
	<button on:click={function(){layout = "room"     }}>room</button>
	<button on:click={function(){layout = "new"      }}>new</button>
	<button on:click={function(){layout = "settings" }}>settings</button>
	<button on:click={function(){layout = "room_set" }}>room_set</button>
	<button on:click={function(){layout = "protected"}}>protected</button>
	<button on:click={function(){layout = "create"   }}>create</button>
	<button on:click={function(){layout = "mute"     }}>mute</button>
	<button on:click={function(){
		layouts = ["settings", "settings"];
		layout = "user";
	}}>user from settings</button>
	<button on:click={function(){
		layouts = ["room_set", "room_set"];
		layout = "user";
	}}>user from room_set</button>
</div>
<!-- END TEMP for test -->

<style>

	/* chat_box and default style
	*/
	.chat_box {
		display: flex;
		position: fixed;
		bottom: 20px;
		right: 20px;
		padding: 5px;
		width: 300px;
		height: 400px;
		border: 1px solid black;
	}


	/* style if chat_box is closed
	*/
	.chat_box .chat {grid-area: chat;}
	.chat_box.close .grid_box {
		gap: 0px;
		grid:
			' chat ' auto
			/ auto ;
	}
	.chat_box.close {
		padding: 0px;
		width: auto;
		height: auto;
	}




	/* * * * * * * * * * * * * * * * * * * * *
		GLOBAL STYLES
	*/

	/* all grid elements names

			:global(#chat_box #chat            ){grid-area: chat;}
			:global(#chat_box #close           ){grid-area: close;}
			:global(#chat_box #new             ){grid-area: new;}
			:global(#chat_box #settings        ){grid-area: settings;}
			:global(#chat_box #room_name       ){grid-area: room_name;}
			:global(#chat_box #send            ){grid-area: send;}
			:global(#chat_box #create          ){grid-area: create;}
		:global(#chat_box #user            ){grid-area: user;}
			:global(#chat_box #back            ){grid-area: back;}
			:global(#chat_box #panel_home      ){grid-area: panel_home;}
			:global(#chat_box #panel_new       ){grid-area: panel_new;}
			:global(#chat_box #panel_msg       ){grid-area: panel_msg;}
			:global(#chat_box #panel_write     ){grid-area: panel_write;}
			:global(#chat_box #panel_settings  ){grid-area: panel_settings;}
			:global(#chat_box #panel_room_set  ){grid-area: panel_room_set;}
			:global(#chat_box #panel_protected ){grid-area: panel_protected;}
			:global(#chat_box #panel_create    ){grid-area: panel_create;}
		:global(#chat_box #panel_user      ){grid-area: panel_user;}
		:global(#chat_box #panel_mute      ){grid-area: panel_mute;}

	*/


	/* Hide scrollbar
	*/
	.chat_box :global(*) {
		-ms-overflow-style: none;  /* IE and Edge */
		scrollbar-width: none;  /* Firefox */
	}
	.chat_box :global(*::-webkit-scrollbar) {
		display: none;  /* Chrome, Safari and Opera */
	}


	/* for grid_box and all childrens
	*/
	.chat_box :global(.grid_box) {
		display: grid;
		margin: 0px;
		gap: 5px;
		width: 100%;
		height: 100%;
	}
	.chat_box :global(.grid_box *) {
		display: flex;
		flex-direction: column;
		position: relative;
		box-sizing: border-box;
	}


	/* all p
	*/
	.chat_box :global(.grid_box p) {
		padding: 10px;
		font-size: 15px;
	}


	/* all panel
	*/
	.chat_box :global(.panel) {
		overflow-y: scroll;
	}
	.chat_box :global(.panel > *) {
		margin-top: 10px;
		margin-bottom: 10px;
	}




	/* * * * * * * * * * * * * * * * * * * * *
		GLOBAL UTILITIES
	*/


	/* __show_if_only_child
	*/
	.chat_box :global(.__show_if_only_child) {
		display: none;
	}
	.chat_box :global(.__show_if_only_child:only-child) {
		display: flex;
		color: rgb(100, 100, 100);
	}


	/* __center
	*/
	.chat_box :global(.__center) {
		margin-left: auto;
		margin-right: auto;
	}


	/* __border_top
	*/
	.chat_box :global(.__border_top) {
		border-top: 1px solid black;
	}


	/* __check_change_next
	*/
	.chat_box :global(.__check_change_next:checked ~ .__to_show) {
		display: flex;
	}
	.chat_box :global(.__check_change_next:checked ~ .__to_block),
	.chat_box :global(.__check_change_next:checked ~ .__to_block *) {
		pointer-events: none;
		color: rgb(100, 100, 100);
	}
	.chat_box :global(.__to_show) {
		display: none;
	}


</style>

