<script>

	import { layout, msgs, user } from './Store_chat';
	import { change_room, get_room_messages, get_my_rooms } from './Request_rooms';
	import { onMount } from 'svelte';
	import Button from './Element_button.svelte';

	let rooms = get_my_rooms();

	// go to clicked room
	async function go_to_room(room)
	{
		console.log("inside go_to_room");

		console.log("room:", room);
		await change_room(room);
		await get_room_messages();
	}

</script>

<div class="grid_box">

	<!-- settings -->
	<Button new_layout="settings" my_class="settings dots icon">
		settings
	</Button>

	<!-- new -->
	<Button new_layout="new" my_class="new transparent">
		new
	</Button>

	<!-- close -->
	<Button new_layout="close" my_class="close icon">
		close
	</Button>

	<!-- panel home -->
	<div class="panel panel_home __border_top">
		<p class="title">list of your rooms :</p>
		<div class="room_list">
			<div class="__show_if_only_child">
				<p class="__center">/ you have no chat room yet /</p>
			</div>
			{#await rooms}
				<p>rooms are loading...</p>
			{:then rooms}
				{#each rooms as room}
					<Button my_class="list" on_click={function() {go_to_room(room)}}>
						{room.name}
					</Button>
				{/each}
			{/await}
		</div>
	</div>

</div>

<style>

	/* grid layout "home"
	*/
	.grid_box :global(.settings  ) {grid-area: settings;}
	.grid_box :global(.close     ) {grid-area: close;}
	.grid_box :global(.new       ) {grid-area: new;}
	.grid_box :global(.panel_home) {grid-area: panel_home;}
	.grid_box {
		grid:
			' settings    new         close      ' auto
			' panel_home  panel_home  panel_home ' 1fr
			/ auto        1fr         auto       ;
	}


	/* panel home
	*/
	.panel_home p.title {
		margin: 10px auto 0px auto;
	}

</style>

