import * as React from "react";

interface PropertiesProps {
  /**
   * Establishes the type of UX to present to the user
   *
   * This is the main window that opens up
   *
   * It is the window that will contain all of the property setters
   */
  type?: { SIDEBAR: string; POPUP: string; INLINE: string; TOOLBAR: string };

  /**
   * The location of where the window should show up
   */
  location?: { LEFT: string; RIGHT: string; TOP: string; BOTTOM: string };

  /**
   * The default title of the property window
   */
  title: string;

  /**
   * An array of tabs to use in the property window
   *
   * Each tab has a title, and an associated component to show when that tab is active
   *
   * (id, title, active, component)
   */
  tabs: any[];

  /**
   * Whether or not the tabs should be visible
   */
  tabsAreVisible?: Boolean;

  /**
   * todo
   */
  children: React.ReactNode;

  /**
   * Triggers when a change occurs in the settings for that object
   */
  onChange?: () => any;

  /**
   * Triggers when the property window is exiting
   */
  onClose?: () => any;
}

/**
 * Property windows are used when you want to provide the user with configuration options.
 *
 * It is also used to present a consistent user experience throughout the app.
 *
 * This module provides a collection of re-usable tools to make that building properties simple.
 *
 * It does so by providing a number of common property setters right out of the box that you can assemble into sidebars, popups, etc..
 *
 * ...and lets you build your own as well
 */
const Properties: React.FC<PropertiesProps> = ({ children }) => {
  /**
   * Switches the active tab to another one
   * @params
   */
  const switchTab = (): void => {};

  /**
   * Closes the property window
   * @params
   */
  const closeWindow = (): void => {};

  return <div>{children}</div>;
};

export default Properties;