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

import * as React from "react";
import {StyleSheet, css} from "aphrodite";
import SideNav from "../SideNav";
import colors from "../../colors";

/**
 * @title Basic SideNav
 * @description SideNav can be used as a layout nav for quick access links
 */
export default function SideNavDemo(): React.Element<"div"> {
  return (
    <div className={css(styles.container)}>
      <SideNav title="Quick Access Links" pathname={window.location.pathname}>
        <SideNav.Item iconName="home" href="/example">
          Home
        </SideNav.Item>
        <SideNav.Item
          href="/example/getting_started"
          iconName="planeTakeoff"
          notificationCount={1}
        >
          Getting Started
        </SideNav.Item>
        <SideNav.Item
          href="/example/using_url_params/blue"
          iconName="dataEntry"
          matchPath="/example/using_url_params/:color?" // Also highlight this navlink on matching this path
        >
          Using URL Params
        </SideNav.Item>

        <SideNav.Item href="/example/fetching_data" iconName="globe">
          Fetching Data
        </SideNav.Item>
        <SideNav.Item href="/example/permissioning" iconName="users">
          Permissioning
        </SideNav.Item>
        <SideNav.Section title="Sublinks and Subroutes">
          <SideNav.Item href="/example/subroutes_and_sublinks/subroute-a">
            Subroute A
          </SideNav.Item>
          <SideNav.Item href="/example/subroutes_and_sublinks/subroute-b">
            Subroute B
          </SideNav.Item>
        </SideNav.Section>
      </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)`,
  },
});