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

import * as React from "react";
import {StyleSheet, css} from "aphrodite";

import SideNav from "../SideNav";
import colors from "../../colors";

/**
 * @title Locked SideNav
 * @description SideNav can be locked so that it becomes uncollapsable
 */
export default function SideNavDemo(): React.Element<"div"> {
  return (
    <div className={css(styles.container)}>
      <SideNav
        title="Quick Access Links"
        expandedMode={{disableIcons: true}}
        pathname={window.location.pathname}
      >
        <SideNav.Item href="/design" notificationCount={21}>
          New
        </SideNav.Item>
        <SideNav.Item href="/design" notificationCount={12}>
          Plan
        </SideNav.Item>
        <SideNav.Item href="/design" notificationCount={0}>
          Track
        </SideNav.Item>
        <SideNav.Item href="/design" notificationCount={2}>
          Docs
        </SideNav.Item>
        <SideNav.Item href="/design" notificationCount={7}>
          Pre-alert
        </SideNav.Item>
        <SideNav.Item href="/invoices" notificationCount={5}>
          Invoices
        </SideNav.Item>
      </SideNav>
      <span>Example content</span>
    </div>
  );
}

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