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';

const themeOptions = {
    light: "light",
    dark: "dark",
}

const stories = storiesOf("Navigation|Navigation", module);
stories.addDecorator(withKnobs).addDecorator(story => <div id="root-preview">{story()}</div>);

stories.add("Navigation states", () => {
    const theme = select("theme", themeOptions, "dark") as ("light" | "dark" | undefined);
    const logoUrl = theme === "dark" ? lightBrandLogoUrl : brandLogoUrl;

    return (
        <Navigation
            logoUrl={logoUrl}
            helpUrl="/"
            theme={theme}
            title={text("title", "Optimizely")}
        />
    );
});