<script>
  import { push, link } from 'svelte-spa-router';
  import Validator from 'Validator';
  import { onMount } from 'svelte';
  import Layout from '$/client/Layout.svelte';
  import Blockstart from '$/client/components/Blockstart.svelte';
  import Calendar from '$/client/components/Calendar.svelte';
  import Markdown from '$/client/components/Markdown.svelte';
  import Icon from '$/client/components/Icon.svelte';
  import Tabs from '$/client/components/Tabs.svelte';
  import api from "$/client/api.js";

  api.mock({
    "/api/user/profile": {
      "get": [200, {"message": "OK"}],
    }
  });

  onMount(async () => {
    const [status, data] = await api.get("/api/user/profile");

    if(status === 200) {
      console.log("STATUS", status, "DATA", data);
    } else {
      console.error("Invalid response", status, data);
    }
  });

  const panels = [
    {title: "Description", active: true, icon: undefined, component: Markdown},
    {title: "Editorial", active: false, icon: undefined, component: Markdown},
    {title: "Solutions", active: false, icon: undefined, component: Markdown},
    {title: "Submissions", active: false, icon: undefined, component: Markdown},
  ];

  let selected = panels[0];

  const tab_select = (event) => {
  }

</script>

<style>

</style>

<Layout centered={ true }>
  <Blockstart>
  <block class="horizontal">

  <left>
    <Tabs panels={ panels } on:select={ tab_select } bind:selected />
  </left>

  <right>
    <shape style="--w: 400px; --h: 400px;">
      Solution Image
    </shape>
  </right>

  </block>
  </Blockstart>
</Layout>
