<script lang="ts">
   import Button from "@smui/button";
   import Textfield from "@smui/textfield";
   import Paper, { Title as PTitle, Content as PContent } from "@smui/paper";
   import { nanoid } from "nanoid";
   import { url } from "@roxi/routify";
   import Snackbar, { Actions, Label } from "@smui/snackbar";
   import type { SnackbarComponentDev } from "@smui/snackbar";
   import IconButton from "@smui/icon-button";

   let sessionID = "";
   let errorSnack: SnackbarComponentDev;

   function create() {
      sessionID = nanoid(22);
      connect();
   }

   function connect() {
      if (sessionID.length < 22) {
         errorSnack.open();
         return;
      }

      window.history.pushState(
         undefined,
         undefined,
         $url(`/session/${sessionID}`)
      );
      sessionID = "";
   }
</script>

<div class="outer">
   <div class="inner">
      <Paper elevation={6}>
         <PContent>
            <PTitle>Create Session</PTitle>
            <div style="margin-top: 1rem" />
            <Button variant="raised" on:click={create}>Create</Button>
         </PContent>
      </Paper>
      <Paper elevation={6}>
         <PContent>
            <PTitle>Join Session</PTitle>
            <Textfield
               label="Session ID"
               bind:value={sessionID}
               style="width: 100%;"
            />
            <div style="margin-top: 1rem" />
            <Button variant="raised" on:click={connect}>Connect</Button>
         </PContent>
      </Paper>
   </div>
</div>

<Snackbar bind:this={errorSnack}>
   <Label>Invalid Session!</Label>
   <Actions>
      <IconButton class="material-icons" title="Dismiss">close</IconButton>
   </Actions>
</Snackbar>

<style>
   .outer {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
   }

   .inner {
      display: grid;
      grid-template-columns: repeat(2, minmax(150px, 300px));
      grid-template-rows: auto;
      gap: 1rem;
   }
</style>
