import {
  Meta,
  Canvas,
  Props,
  Story,
  SourceState,
} from "@storybook/blocks";
import { action } from "@storybook/addon-actions";
import {
  ComponentHeading,
  ComponentStatus,
  COMPONENT_STATUS,
} from "../../storybook-components";
import { Appbar } from "./Appbar";
import {
  AppbarNav,
  AppbarUser,
  AppbarUserWithDropdown,
  AppbarOrganizationSwitcher,
} from "./_story";

<Meta title="Deprecated/Components/To delete/Appbar" component={Appbar} />

<ComponentHeading
  componentName="Appbar"
  description="Top-most level of navigation for Conveyor apps"
  sourcePath="src/components/Appbar/Appbar.tsx"
/>

<ComponentStatus status={COMPONENT_STATUS.DEPRECATED} />

```jsx
import { Appbar } from "@conveyorhq/arrow-ds";
```

<Canvas>
  <Story name="Appbar">
    <Appbar
      logoProps={{
        href: "/",
      }}
      nav={<AppbarNav />}
      user={<Appbar.LogInButton as="button" onClick={action("Log in")} />}
    />
  </Story>
</Canvas>

The appbar component provides the top-most level of navigation for an Aptible
application. It provides slots for primary navigation, organization, and user
navigation.

In a Comply application, the appbar should be placed as a child within the frame
area where `name="appbar"`.

## Props

<Props of={Appbar} />

## Demos

### Without Nav or User Menu

<Canvas withSource={SourceState.OPEN}>
  <Story name="Appbar Without Nav or User Menu">
    <Appbar />
  </Story>
</Canvas>

### With User

<Canvas withSource={SourceState.OPEN}>
  <Story name="Appbar With User">
    <Appbar nav={<AppbarNav />} user={<AppbarUser />} />
  </Story>
</Canvas>

### With User Dropdown

<Canvas withSource={SourceState.OPEN}>
  <Story name="Appbar With User Dropdown">
    <Appbar nav={<AppbarNav />} user={<AppbarUserWithDropdown />} />
  </Story>
</Canvas>

### With Organization Switcher

<Canvas withSource={SourceState.OPEN}>
  <Story name="Appbar With Organization Switcher">
    <Appbar
      nav={<AppbarNav />}
      user={<AppbarUserWithDropdown />}
      organization={<AppbarOrganizationSwitcher status="unclaimed" />}
    />
  </Story>
</Canvas>

### In a Demo Environment

<Canvas withSource={SourceState.OPEN}>
  <Story name="Appbar in Demo Environment">
    <Appbar nav={<AppbarNav />} isDemoEnvironment />
  </Story>
</Canvas>