import React from "react";
import { action } from "@storybook/addon-actions";
import { Appbar } from "../Appbar";
import { AVATAR_TYPE } from "../../Avatar";

const user = {
  email: "tom@conveyorhq.com",
  name: "Tom",
};

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

const organizations = [
  {
    name: "Conveyor",
    provider: "conveyorhq.com",
    status: "claimed",
  },
  {
    name: "Aptible",
    provider: "aptible.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 }: any) => (
  <Appbar.Organization
    name={organizations[0].name}
    status={status}
    logoSrc={`https://logo.clearbit.com/${organizations[0].provider}`}
  />
);

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