import * as React from "react";
import ReactToolbox from "../index";

export interface AppBarTheme {
  /**
   * Used for the component root element. 
   */
  appBar?:  string;
  /**
   * Added to the root element when the app bar is fixed. 
   */
  fixed?:  string;
  /**
   * Added to the root element when the app bar is flat. 
   */
  flat?:  string;
  /**
   * Used as the app bar title. 
   */
  title?:  string;
  /**
   * Added to the left icon app bar element. 
   */
  leftIcon?:  string;
  /**
   * Added to the right icon app bar element. 
   */
  rightIcon?:  string;
  /**
   * Added to the root element when the app bar is hidden during scroll. 
   */
  scrollHide?:  string;
}

export interface AppBarProps extends ReactToolbox. Props {
  /**
   * Children to pass through the component. 
   */
  children?:  React. ReactNode;
  /**
   * Determine if the bar should have position fixed or relative. 
   * @default false
   */
  fixed?:  boolean;
  /**
   * If true, the AppBar doesn't show a shadow. 
   * @default false
   */
  flat?:  boolean;
  /**
   * If it exists it is used as the AppBar title
   */
  title?:  string;
  /**
   * If it exists it is used as the AppBar left icon
   */
  leftIcon?:  React. ReactNode;
  /**
   * Called when the left icon is clicked
   */
  onLeftIconClick?:  Function;
  /**
   * If it exists it is used as the AppBar right icon
   */
  rightIcon?:  React. ReactNode;
  /**
   * Called when the righticon is clicked
   */
  onRightIconClick?:  Function;
  /**
   * Whether AppBar should be hidden during scroll. 
   * @default false
   */
  scrollHide?:  boolean;
  /**
   * Classnames object defining the component style. 
   */
  theme?:  AppBarTheme;
}

export class AppBar extends React. Component<AppBarProps, {}> { }

export default AppBar;
