import React from "react";
import { storiesOf } from "@storybook/react";
import { withKnobs, text, select } from "@storybook/addon-knobs";
import { Navigation } from "./navigation";
import brandLogoUrl from '@optimizely/design-tokens/dist/brand-assets/brand-logo.svg';
import lightBrandLogoUrl from '@optimizely/design-tokens/dist/brand-assets/brand-logo-white.svg';
var themeOptions = {
  light: "light",
  dark: "dark"
};
var stories = storiesOf("Navigation|Navigation", module);
stories.addDecorator(withKnobs).addDecorator(function (story) {
  return React.createElement("div", {
    id: "root-preview"
  }, story());
});
stories.add("Navigation states", function () {
  var theme = select("theme", themeOptions, "dark");
  var logoUrl = theme === "dark" ? lightBrandLogoUrl : brandLogoUrl;
  return React.createElement(Navigation, {
    logoUrl: logoUrl,
    helpUrl: "/",
    theme: theme,
    title: text("title", "Optimizely")
  });
});