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

  export let currentUser: { account: string };

  let selectedProjectID = workbenchProjects[0].id;
  let selectedItem: InspectorItem | null = null;
  $: workspace = getProjectWorkspace(selectedProjectID);
  $: selectedChannelID = workspace.channels[0].id;
  $: selectedChannel = workspace.channels.find((channel) => channel.id === selectedChannelID) ?? workspace.channels[0];

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

  function selectChannel(channelID: string) {
    selectedChannelID = channelID;
  }

  function inspectItem(item: InspectorItem) {
    selectedItem = item;
  }
</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">
      <ChannelContent {workspace} channel={selectedChannel} onInspect={inspectItem} />
    </section>
    <ObjectInspector item={selectedItem} />
  </div>
</main>
