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

import * as React from "react";
import {StyleSheet, css} from "aphrodite";
import Text from "../Text";
import whitespace from "../styles/whitespace";
import SideNavItem, {ITEM_SIZE} from "./SideNavItem";
import colors from "../colors";
import SideNavContext from "./SideNavContext";

type Props = {|
  /** title to show for the section */
  +title: string,
  +children?: React.ChildrenArray<
    React.Element<typeof SideNavItem> | void | null | boolean
  >,
|};

/**
 * @short SideNavSection is used with SideNav to create a titled section
 * @category Navigation
 * @status Stable
 * @brandStatus V3
 */
export default function SideNavSection({
  title,
  children,
}: Props): React.Element<"div"> {
  const {isExpanded} = React.useContext(SideNavContext);

  return (
    <div className={css(styles.section)}>
      <div className={css(styles.title)}>
        <div
          className={css(
            styles.titleText,
            isExpanded && styles.titleTextActive
          )}
        >
          <Text color="grey30" scale="subtext">
            {title}
          </Text>
        </div>
        <div
          className={css(
            styles.dividerLine,
            !isExpanded && styles.dividerLineActive
          )}
        />
      </div>
      <div className={css(styles.content)}>{children}</div>
    </div>
  );
}

const styles = StyleSheet.create({
  section: {
    display: "flex",
    flexDirection: "column",
    padding: `${whitespace.m - 2}px 0px`,
  },
  title: {
    flex: "0 0 auto",
    width: "100%",
    marginBottom: whitespace.m - 2,
    position: "relative",
  },
  titleText: {
    opacity: 0,
    transform: "scaleY(0.5) translateY(-30%)",
    transitionProperty: "opacity,transform",
    transitionTimingFunction: "ease-out",
    transitionDuration: `180ms`,
    transformOrigin: "0% 0%",
  },
  titleTextActive: {
    opacity: 1,
    transform: "scaleY(1)",
  },
  content: {
    display: "flex",
    flexDirection: "column",
    flex: "0 0 auto",
    width: "100%",
  },
  dividerLine: {
    position: "absolute",
    width: ITEM_SIZE,
    height: "1px",
    backgroundColor: colors.grey30,
    top: "2px", // Slightly shifted so lines appear consistently spaced from icons during collapsed view
    left: 0,
    opacity: 0,
    transition: `opacity 180ms ease-out`,
  },
  dividerLineActive: {
    opacity: 0.7,
  },
});