/**
 * TEAM: frontend_infra
 * @flow
 */

import * as React from "react";
import {StyleSheet, css} from "aphrodite";
import {storiesOf} from "@storybook/react";
import sections from "./sections";
import SideNav from "../side_nav/SideNav";
import colors from "../colors";

// $FlowFixMe[invalid-export]
const stories = storiesOf(sections.sideNav, module);

function SideNavWrapper({
  disableIcons,
  ...props
}: $Shape<
  React.ElementConfig<typeof SideNav> & {disableIcons?: boolean, ...}
>) {
  return (
    <SideNav title="Side Nav" {...props}>
      <SideNav.Item
        href="/new"
        iconName={disableIcons ? "shipment" : undefined}
        notificationCount={21}
      >
        New. This is a long label so prepare yourself
      </SideNav.Item>
      <SideNav.Item
        href="/plan"
        iconName={disableIcons ? "calendar" : undefined}
        notificationCount={12}
      >
        Plan
      </SideNav.Item>
      <SideNav.Item
        href="/track"
        iconName={disableIcons ? "location" : undefined}
        notificationCount={0}
      >
        Track
      </SideNav.Item>
      <SideNav.Item
        href="/docs"
        iconName={disableIcons ? "doc" : undefined}
        notificationCount={2}
      >
        Docs
      </SideNav.Item>
      <SideNav.Item
        href="/alerts"
        iconName={disableIcons ? "mail" : undefined}
        notificationCount={7}
      >
        Pre-alert
      </SideNav.Item>
      <SideNav.Item
        href="/invoices"
        iconName="creditCard"
        notificationCount={7}
      >
        Invoices
      </SideNav.Item>
    </SideNav>
  );
}

stories.add("Collapsible", () => (
  <div className={css(styles.container)}>
    <SideNavWrapper />
    <div>Test</div>
  </div>
));

stories.add("Not Collapsible", () => (
  <div className={css(styles.container)}>
    <SideNavWrapper title="Side Nav" expandedMode={true} />
    <div>Test</div>
  </div>
));

stories.add("No Icons", () => (
  <div className={css(styles.container)}>
    <SideNavWrapper title="Side Nav" expandedMode={{disableIcons: true}} />
    <div>Test</div>
  </div>
));

const styles = StyleSheet.create({
  container: {
    display: "flex",
    flexDirection: "row",
    overflow: "hidden",
    width: "601px",
    height: "601px",
    backgroundSize: "40px 40px",
    backgroundImage: `linear-gradient(to right, ${colors.grey20} 1px, transparent 1px),
      linear-gradient(to bottom, ${colors.grey20} 1px, transparent 1px)`,
  },
});