<script lang="ts">

	import { msgs, layout, allowed_chars } from './Store_chat';
	import { change_room, create_room } from './Request_rooms';
	import { onMount } from 'svelte';
	import Button from './Element_button.svelte';
	import Warning from './Element_warning.svelte';

	export let back = "";

	let allowed_chars = 'loading...';
	//let regex;
	onMount(async() => {
		let response = await fetch('/api/v2/chat/allowedchars');
		let data = await response.json();
		console.log("data:", data);
		allowed_chars = data.chars;
		//regex = new RegExp(`^[a-zA-Z0-9\\s${allowed_chars}]+$`);
	});

	let room_name: string;
	let room_type: string;
	let room_password: string;
	let response = {
		status: 0,
		message: "",
	}

	async function handleSubmit(evt)
	{
		let formIsValid = evt.target.checkValidity();

		if (!formIsValid)
			return;

		let room = {
			name: room_name,
			type: room_type,
		};
		// send the new room
		response = await create_room(room);

		// go to room
		if (response.status === 200)
			await change_room(response.room);
	}

</script>

<div class="grid_box">

	<!-- back -->
	<Button new_layout={back} my_class="back icon" my_title="go back {back}">
		back
	</Button>

	<!-- create -->
	<Button my_class="create deactivate">
		create
	</Button>

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

	<!-- panel_create -->
	<div class="panel panel_create __border_top">
		<form on:submit|preventDefault={handleSubmit}>
			{#if response.status >= 300}
				<Warning content={response.message}/>
			{/if}
			<!-- name: -->
			<label for="chat_name"><p>new room name :</p></label>
			<!--
			<input  id="chat_name" bind:value={room_name} name="room_name" placeholder="allowed special characters: {allowed_chars}" pattern={regex} required>
			-->
			<input  id="chat_name" bind:value={room_name} name="room_name" placeholder="allowed special characters: {allowed_chars}" required>
			<!-- [ ] pubic -->
			<label for="chat_public" class="_radio">
				<p>public</p>
				<input  id="chat_public" bind:group={room_type} type="radio" name="room_type" value="public" required>
			</label>
			<!-- [ ] private -->
			<label for="chat_private" class="_radio hide">
				<p>private</p>
				<input  id="chat_private" bind:group={room_type} type="radio" name="room_type" value="private" required>
			</label>
			<!-- [ ] protected -->
			<label for="chat_protected" class="_radio hide">
				<p>protected</p>
				<input  id="chat_protected" bind:group={room_type} type="radio" name="room_type" value="protected" required>
			</label>
			<!-- [x] protected -->
			{#if room_type === 'protected'}
				<div>
					<label for="chat_pswd"><p>choose a password :</p></label>
					<input  id="chat_pswd" bind:value={room_password} type="password" placeholder="minimum 8 characters" minlength="8" name="password" required>
				</div>
			{/if}
			<input type="submit" value="&#x2BA1">
		</form>
	</div>

</div>

<style>

	/* grid layout "create"
	*/
	.grid_box :global(.back        ) {grid-area: back;}
	.grid_box :global(.create      ) {grid-area: create;}
	.grid_box :global(.close       ) {grid-area: close;}
	.grid_box :global(.panel_create) {grid-area: panel_create;}
	.grid_box {
		grid:
			' back          create        close         ' auto
			' panel_create  panel_create  panel_create  ' 1fr
			/ auto          1fr           auto          ;
	}

	/* temp
	*/
	.hide {
		display: none !important;
	}

	/* radio elements style check
	*/
	.panel label._radio {
		display: inline;
		margin: 10px 0px 0px auto;
		padding-right: 10px;
		cursor: pointer;
	}
	.panel label._radio * {
		display: inline;
	}
	.panel label._radio p {
		margin-top: 0px;
		margin-bottom: 0px;
	}


	/* submit
	*/
	.panel input[type=submit] {
		margin-top: 20px;
	}


</style>


