import {
  Meta,
  Preview,
  Props,
  Story,
  SourceState,
} from "@storybook/addon-docs/blocks";
import { action } from "@storybook/addon-actions";
import { ComponentHeading } from "../../storybook-components";
import { AVATAR_TYPE } from "../Avatar";
import { Appbar } from "./Appbar";

<Meta title="Components/Layout/Appbar" component={Appbar} />

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

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

export const user = {
  email: "skylar@aptible.com",
  name: "Skylar",
};

export const userMenu = [
  {
    name: "Your Profile",
    url: "/",
  },
  {
    name: "Your Training Assignments",
    url: "/",
  },
  {
    name: "Your Analytics Preferences",
    url: "/",
  },
  {
    name: "Team",
    url: "/",
  },
];

export const organizations = [
  {
    name: "Aptible",
    provider: "aptible.com",
    status: "claimed",
  },
  {
    name: "Mode Analytics",
    provider: "mode.com",
    status: "claimed",
  },
];

export const AppbarNav = () => (
  <Appbar.Tabs>
    {["Dashboard", "Assets", "ISMS", "Tickets"].map((item) => (
      <Appbar.Tab key={item} href={`/${item.toLowerCase()}`} active={false}>
        {item}
      </Appbar.Tab>
    ))}
  </Appbar.Tabs>
);

export const AppbarUserWithDropdown = () => {
  return (
    <Appbar.UserDropdown
      name={user.name}
      avatar={<Appbar.UserAvatar email={user.email} type={AVATAR_TYPE.USER} />}
    >
      <Appbar.UserDropdownMenu>
        {userMenu.map((item) => (
          <Appbar.UserDropdownMenuItem key={item.name} href={item.url}>
            {item.name}
          </Appbar.UserDropdownMenuItem>
        ))}
        <Appbar.UserDropdownMenuItem as="button" onClick={action("Log out")}>
          Log out
        </Appbar.UserDropdownMenuItem>
      </Appbar.UserDropdownMenu>
    </Appbar.UserDropdown>
  );
};

export const AppbarUser = () => (
  <Appbar.User
    name={user.name}
    avatar={<Appbar.UserAvatar email={user.email} type={AVATAR_TYPE.USER} />}
  />
);

export const AppbarOrganization = ({ status }) => (
  <Appbar.Organization
    name={organizations[0].name}
    status={status}
    logoSrc={`https://logo.clearbit.com/${organizations[0].provider}`}
  />
);

export const AppbarOrganizationSwitcher = ({ status }) => (
  <Appbar.Organization
    name={organizations[0].name}
    status={status}
    logoSrc={`https://logo.clearbit.com/${organizations[0].provider}`}
    onClick={() => {
      console.log("Organization switcher clicked");
    }}
  />
);

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

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

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

### With User

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

### With User Dropdown

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

### With Organization Switcher

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

### In a Demo Environment

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