import * as React from 'react';
import {getFields} from './utils/getFields.js';

/**
 * Component used to render Build Information.
 *
 * @param {*} props input properties containing build information
 */
export const BuildSnapshot = (props) => {
  // State variable indicating whether the BuildSnapshot is open or closed.
  // isOpen === true indicates the tray should be visible 
  // and the indicator arrow on the Header should be facing downwards.
  const [isOpen, setIsOpen] = React.useState(false);

  const headerFields = ['description', 'commitHash', 'repository', 'status'];
  const trayFields = ['builders', 'timestamp'];

  const headerData = getFields(props.buildData, headerFields, '');
  const trayData = getFields(props.buildData, trayFields, '');

  return (
    <div className='build-snapshot'>
      <Header isOpen={isOpen} onClick={setIsOpen} data={headerData}/>
      <Tray isOpen={isOpen} data={trayData}/>
    </div>
  );
}

/**
 * Subcomponent that holds the content displayed
 * when the BuildSnapshot is collapsed.
 *
 * @param {*} props an object containing a 'data' field
 * which encapsulates the fields from headerFields.
 */
const Header = (props) => {
  return (
    <div className='header' onClick={() => props.onClick(!props.isOpen)}>
      <span className='header-hash'>{props.data.commitHash}</span>
      <span className='header-description'>{props.data.description}</span>
      <FailureGroup group={'Group'}/>
      <span className='header-status'>{props.data.status}</span>
    </div>
  );
}

/**
 * Subcomponent that holds the content revealed
 * when the BuildSnapshot is open (isOpen === true).
 *
 * @param {*} props an object containing a 'data' field
 * which encapsualtes the fields from trayFields.
 */
const Tray = (props) => {
  // State variable indicating the builder whose data
  // should be rendered to the BuilderDataTable.
  // Represents the index of the builder in props.data.builders
  const [selectedBuilder, selectBuilder] = React.useState(0);
  const builder = props.data.builders[selectedBuilder];

  if (props.isOpen !== true) { return null };
  return (
    <div className='tray'>
      <span className='tray-timespan'>{props.data.timestamp}</span>
      <div className='tray-currentbot'>
        <span className='bot-display'>{builder.name}</span>
      </div>
      <BuilderGrid onClick={selectBuilder} data={props.data.builders}/>
      <BuilderDataTable builder={builder}/>
    </div>
  );
}

@@ -143,62 +143,510 @@
 am %7B
-*%7D props input properties containing build information
+Object%5B%5D%7D props.buildData - Aggregated data on latest commit build.%0A * @param %7Bstring%7D props.buildData%5B%5D.description - Commit message.%0A * @param %7BObject%5B%5D%7D props.buildData%5B%5D.builders - Bots that built this commit.%0A * @param %7Bstring%7D props.buildData%5B%5D.commitHash - Commit hash.%0A * @param %7Bstring%7D props.buildData%5B%5D.repository - URL to the GitHub repository.%0A * @param %7Bstring%7D props.buildData%5B%5D.status - The status of the build.%0A * @param %7Bstring%7D props.buildData%5B%5D.timestamp - Timestamp of commit push.
 %0A */
@@ -1500,103 +1500,546 @@
 am %7B
-*%7D props an object containing a 'data' field%0A * which encapsulates the fields from headerFie
+boolean%7D props.isOpen - Indicates if the Tray should be open.%0A * @param %7BObject%7D onClick - A callback function responsible%0A * for toggling the visibility of the Tray via the onClick event.%0A * @param %7BObject%7D props.data - Build information to be displayed on Header.%0A * @param %7Bstring%7D props.data%5B%5D.description - The commit message.%0A * @param %7Bstring%7D props.data%5B%5D.commitHash - The commit hash.%0A * @param %7Bstring%7D props.data%5B%5D.repository - URL to the GitHub repository.%0A * @param %7Bstring%7D props.buildData%5B%5D.status - The status of the bui
 ld
-s
 .%0A *
@@ -2504,16 +2504,22 @@
 s open (
+props.
 isOpen =
@@ -2546,101 +2546,301 @@
 am %7B
-*%7D props an object containing a 'data' field%0A * which encapsualtes the fields from trayFields
+boolean%7D props.isOpen - Indicates if the Tray should be open.%0A * @param %7BObject%5B%5D%7D props.data.builders - Bots that built this commit.%0A * @param %7Bstring%7D props.data.builders%5B%5D.name - The name of the given Build Bot.%0A * @param %7Bstring%7D props.data.timestamp - The timestamp of the given build bot
 .%0A *

Add types to JSDoc comments