import React from "react";

import { storiesOf } from "@storybook/react";
import { boolean, text } from "@storybook/addon-knobs";
import { action } from "@storybook/addon-actions";

import { LayoutGrid, LayoutGridCell, LayoutGridContainer } from "./layout-grid";
import { Grid, GridCell, GridContainer } from "../Grid/grid";
import NavBar from "../NavBar";
import Code from "../Code";
import Button from "../Button";

const openLogoUrl = "https://app.optimizely.com/dist/static/img/rebrand/logo-f64d2aed989db744b609666199d7d2a2.svg";

const storiesForRow = storiesOf("Layout|LayoutGrid", module);
storiesForRow.addDecorator(story => <div id="root-preview">{story()}</div>);

const borderStyleProp = {
    style: { border: "1px solid black" }
};

storiesForRow
    .add("Legacy Epi layout", () => {
        return (
            <LayoutGridContainer>
                <LayoutGrid {...{ style: { height: "100vh", columnGap: "8px", rowGap: "8px" }}}>
                    <LayoutGridCell large={12} {...{ style: { border: "1px solid black", height: "40px" }}}>
                        Navigation
                    </LayoutGridCell>
                    <LayoutGridCell large={2} {...borderStyleProp}>
                        Work Item Navigation
                    </LayoutGridCell>
                    <LayoutGridCell large={8}>
                        <div style={{ border: "1px solid black", height: "40px" }}>Toolbar</div>
                        <GridContainer
                            {...{ style: { border: "1px solid black", height: "calc(100% - 48px)", marginTop: "8px" }}}
                        >
                            <Grid>
                                <GridCell large={12}>Workspace</GridCell>
                            </Grid>
                        </GridContainer>
                    </LayoutGridCell>
                    <LayoutGridCell large={2} {...borderStyleProp}>
                        Contextual Toolbar
                    </LayoutGridCell>
                </LayoutGrid>
            </LayoutGridContainer>
        );
    })
    .add("Legacy Opti layout", () => {
        return (
            <LayoutGridContainer {...{ style: { height: "100vh" }}}>
                <LayoutGrid>
                    <LayoutGridCell large={3} {...borderStyleProp}>
                        <NavBar
                            isOpen={true}
                            logoUrl={openLogoUrl}
                            title="Test Project"
                            badgeText="WEB"
                            homeUrl="http://optimizely.com"
                            trialContent={
                                <div className="push-double--bottom push-double--left truncate">
                                    {boolean("isOpen", true) && "5 days left in your trial"}
                                </div>
                            }
                        >
                            <NavBar.PrimaryLink
                                iconName="projects"
                                type="pushstate"
                                linkLabel="Projects"
                                testSection="projects"
                            />
                            <NavBar.PrimaryLink
                                iconName="experiment"
                                type="link"
                                linkLabel="Experiment"
                                testSection="experiment"
                                isActive={true}
                            />
                            <NavBar.PrimaryLink
                                iconName="rollouts"
                                type="link"
                                linkLabel="Features"
                                testSection="features"
                            />
                            <NavBar.PrimaryLink
                                iconName="audiences"
                                type="link"
                                linkLabel="Audiences"
                                testSection="audiences"
                            />
                            <NavBar.PrimaryLink
                                iconName="events"
                                type="button"
                                linkLabel="Events"
                                testSection="events"
                            />
                            <NavBar.PrimaryLink
                                iconName="settings"
                                type="link"
                                linkLabel="Settings"
                                testSection="settings"
                            />
                            <NavBar.PrimaryLink
                                iconName="getting-started"
                                type="pushstate"
                                linkLabel="Getting Started"
                                testSection="getting-started"
                                hasSeparator={true}
                            />
                            <NavBar.SecondaryLink
                                iconName="program-management"
                                type="button"
                                linkLabel="Program Management"
                                testSection="program-management"
                            />
                            <NavBar.SecondaryLink iconName="help" type="link" linkLabel="Help" testSection="help" />
                            <NavBar.SecondaryLink
                                iconName="feedback"
                                type="link"
                                linkLabel="Feedback"
                                testSection="feedback"
                            />
                            <NavBar.CurrentUserMenu
                                showEmulate={boolean("showEmulate", true)}
                                onEmulateClick={action("onEmulateClick")}
                                accountSwitcherItems={[
                                    {
                                        text: "Account 1",
                                        url: "#",
                                        description: "Account 1 Description",
                                        isCurrent: false,
                                    },
                                    {
                                        text: "Account 3",
                                        url: "#",
                                        description: "Account 3 Description",
                                        isCurrent: false,
                                    },
                                    {
                                        text: "Account 2",
                                        url: "#",
                                        description: "Account 2 Description",
                                        isCurrent: true,
                                    },
                                ]}
                                accountSwitcherHandler={action("accountSwitcherHandler")}
                                userName="Hassan Khalid"
                                accountSettingsUrl="#"
                                profileUrl="#"
                                logoutUrl="#"
                                profileAvatarUrl={text(
                                    "profileAvatarUrl",
                                    "https://optimizely-profile-images-devel.s3.amazonaws.com/img/user/hassan.khalid%40optimizely.com/c57517e7ee4941d0a5e71f3d89df0c0d.jpg"
                                )}
                            />
                        </NavBar>
                    </LayoutGridCell>
                    <LayoutGridCell large={3} {...borderStyleProp}>
                        Tabs/Header
                    </LayoutGridCell>
                    <LayoutGridCell large={6} {...borderStyleProp}>
                        Stage
                    </LayoutGridCell>
                </LayoutGrid>
            </LayoutGridContainer>
        );
    })
    .add("Responsive Showcase", () => {
        return (
            <LayoutGridContainer {...{ style: { height: "100vh" }}}>
                <LayoutGrid>
                    <LayoutGridCell large={12} {...borderStyleProp}>
                        <div>
                            <h2>Features</h2>
                            <p className="lead">Manage your app’s feature flags</p>
                        </div>
                    </LayoutGridCell>
                    <LayoutGridCell large={6} {...borderStyleProp}>
                        <img src="https://s3-us-west-1.amazonaws.com/zach-designs/flagly/thing.svg" />
                    </LayoutGridCell>
                    <LayoutGridCell large={6} {...borderStyleProp}>
                        <LayoutGrid>
                            <LayoutGridCell large={12}>
                                <h6>What’s a Feature Flag?</h6>
                                {/* eslint-disable max-len */}
                                <p>
                                    Feature flags, also known as feature toggles, are a software development technique
                                    that lets you turn certain functionality on and off without deploying new code. This
                                    allows for better control and more experimentation over the full lifecycle of
                                    features. You can toggle a feature off to release code quickly without exposing it
                                    to users.
                                </p>
                                {/* eslint-enable max-len */}
                                <h6>Try it for yourself</h6>
                                <Code type="block">
                                    {"var enabled = optimizely.isFeatureEnabled(”chat_window”, userId);" +
                                        "\nif(enabled)\n{\n  // Feature is enabled\n}" +
                                        "\nelse {\n  // Feature is disabled\n}"}
                                </Code>
                            </LayoutGridCell>
                            <LayoutGridCell large={6}>
                                <Button width={"full"}>View Docs</Button>
                            </LayoutGridCell>
                            <LayoutGridCell large={6}>
                                <Button width={"full"}>Create Feature</Button>
                            </LayoutGridCell>
                        </LayoutGrid>
                    </LayoutGridCell>
                </LayoutGrid>
            </LayoutGridContainer>
        );
    });