import { Workspace, ViewType, Split, Stage, Panel, View, useView } from "@danfessler/trellis-react";
import "@danfessler/trellis/style.css";

function Document() {
  const view = useView<{ file: string }>();
  return <Canvas file={view.params.file} />;
}

export function App() {
  return (
    <Workspace theme="dark" storageKey="my-app" version={1}>
      <ViewType id="document" title={(v) => String(v.params.file)} placement="stage" allow={{ side: false }}>
        <Document />
      </ViewType>
      <ViewType id="layers" title="Layers" singleton allow={{ stage: false }}>
        <Layers />
      </ViewType>

      <Split weights={[4, 1]}>
        <Stage empty={<OpenFilePrompt />}>
          <Panel>
            <View type="document" params={{ file: "cover.psd" }} />
          </Panel>
        </Stage>
        <View type="layers" />
      </Split>
    </Workspace>
  );
}