<script lang="ts">
  import { getProjectWorkspace, workbenchProjects } from './mockData';
  import ProjectRail from './ProjectRail.svelte';
  import ProjectChannelSidebar from './ProjectChannelSidebar.svelte';
  import WorkspaceTopbar from './WorkspaceTopbar.svelte';

  export let currentUser: { account: string };

  let selectedProjectID = workbenchProjects[0].id;
  $: workspace = getProjectWorkspace(selectedProjectID);
  $: selectedChannelID = workspace.channels[0].id;

  function selectProject(projectID: number) {
    selectedProjectID = projectID;
  }

  function selectChannel(channelID: string) {
    selectedChannelID = channelID;
  }
</script>

<main class="workbench-shell">
  <WorkspaceTopbar account={currentUser.account} />
  <div class="workbench-body">
    <ProjectRail projects={workbenchProjects} {selectedProjectID} onSelectProject={selectProject} />
    <ProjectChannelSidebar
      project={workspace.project}
      channels={workspace.channels}
      {selectedChannelID}
      tags={workspace.tags}
      recentSessions={workspace.recentSessions}
      onSelectChannel={selectChannel}
    />
    <section class="channel-stage" aria-label="Channel content">
      <h1>{workspace.channels.find((channel) => channel.id === selectedChannelID)?.title}</h1>
    </section>
    <aside class="object-inspector" aria-label="Object inspector">
      <p>Select an item to inspect discussion, properties, and actions.</p>
    </aside>
  </div>
</main>
