web2019/static/js/shop.jsx

'use strict';

const {
  DragDropContext,
  Draggable,
  Droppable
} = window.ReactBeautifulDnd;

const data = window.shop_data;


const productStyle = (style, snapshot, removeAnim, hovered, selected) => {
  const custom = {
    opacity: snapshot.isDragging ? .7 : 1,
    backgroundColor: (hovered || selected) ? '#eae7f7' : 'initial',
  };

  if (!snapshot.isDropAnimating) {
    return { ...style, ...custom};
  }

  if (removeAnim) {
    // cannot be 0, but make it super tiny
    custom.transitionDuration = '0.001s';
  }

  return {
    ...style,
    ...custom,
  };
}

const cartStyle = (style, snapshot) => {
  const isDraggingOver = snapshot.isDraggingOver;
  return {
    ...style,
    ...{
      backgroundColor: isDraggingOver ? '#f2f2f2' : '#f9f9f9',
      border: isDraggingOver ? '1px dashed #ccc' : '0',
    },
  };
}

const nbrConnectorsStyle = (data) => {
  if (!data || !data.nbrCurrentSlot) {
    return {};
  }

  let p = data.nbrCurrentSlot * 100 / data.nbrSlotMax;
  if (p > 100) {
    p = 100;
  }
  return {
    width: `${p}%`,
  }
};

const nbrClocksStyle = (data) => {
  if (!data || !data.nbrCurrentClock) {
    return {};
  }

  let p = data.nbrCurrentClock * 100 / data.nbrClockMax;
  if (p > 100) {
    p = 100;
  }
  return {
    width: `${p}%`,
  }
};

const copy = (
  model,
  source,
  destination,
  droppableSource,
  droppableDestination
) => {
  const sourceClone = Array.from(source.itemIds);
  const destClone = Array.from(destination.items);
  const item = sourceClone[droppableSource.index];

  destClone.splice(droppableDestination.index, 0, {
    ...model[item],
    id: uuidv4(),
  });

  return destClone;
};

const reorder = (list, startIndex, endIndex) => {
  const result = Array.from(list);
  const [removed] = result.splice(startIndex, 1);
  result.splice(endIndex, 0, removed);

  return result;
};

const remove = (list, startIndex) => {
  const result = Array.from(list);
  result.splice(startIndex, 1);
  return result;
};

const nbrOccupiedSlotsInCrate = (items) => {
  return items.reduce((prev, next) => {
    return prev + (next.hp === 8 ? 2 : 1);
  }, 0);
};


/**
 * Component that provides a base layout (aside/main) for the page.
 */
class Layout extends React.PureComponent {

  static get propTypes() {
    return {
      aside: PropTypes.any,
      main: PropTypes.any,
    };
  }

  render() {
    const {
      aside,
      main,
    } = this.props;

    return (
      <div className="layout">

        <aside className="aside">{aside}</aside>

        <section className="main">{main}</section>

      </div>
    );
  }
}


/**
 * Component that renders a product.
 * Used in the aside (e.g backlog of product)
 */
class ProductItem extends React.PureComponent {

  static get propTypes() {
    return {
      id: PropTypes.string.isRequired,
      index: PropTypes.number.isRequired,
      name: PropTypes.string.isRequired,
      price: PropTypes.number.isRequired,
      currency: PropTypes.string.isRequired,
      image: PropTypes.string.isRequired,
      specs: PropTypes.array,
      onClickAddItem: PropTypes.func,
    };
  }

  constructor(props) {
    super(props);
    this.handleOnClickAddItem = this.handleOnClickAddItem.bind(this);
  }

  handleOnClickAddItem(index, e) {
    if (this.props.onClickAddItem) {
      this.props.onClickAddItem(index);
    }
    e.preventDefault();
  }

  render() {
    const {
      id,
      index,
      name,
      price,
      currency,
      image,
      specs,
    } = this.props;

    const render_specs = (specs && specs.length > 0 && (
      <ul>
        {specs.map((spec, index) =>
          <li key={index}>{spec}</li>
        )}
      </ul>
    ));

    return (
      <section className="productItem">

        <div className="content">
          <h3>{name}</h3>

          <div className="price">{`${currency} ${price}`}</div>

          {render_specs}
        </div>

        <div className="content">

          <button onClick={this.handleOnClickAddItem.bind(this, index)}>
            <img src="/images/shop/icon-add.svg" alt="add" />
          </button>

          <Draggable draggableId={id} index={index}>
            {(provided, snapshot) => (
              <React.Fragment>
                <img
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    style={productStyle(
                      provided.draggableProps.style,
                      snapshot,
                      true,  // hack: remove weird animation after a drop
                    )}
                    src={image} />

                {/* Allows to simulate a clone */}
                {snapshot.isDragging && (
                  <img className="" src={image} />
                )}
              </React.Fragment>
            )}
          </Draggable>

        </div>

      </section>
    );
  }
}


/**
 * Component that renders a product.
 * Used in the crate
 */
class ProductCartItem extends React.PureComponent {

  static get propTypes() {
    return {
      hovered: PropTypes.bool,
      index: PropTypes.number.isRequired,
      model: PropTypes.object.isRequired,
      data: PropTypes.object,
      onToggleProgress: PropTypes.func,
      onToggleWarning: PropTypes.func,
      onToggleOverlayRemove: PropTypes.func,
      onClickRemoveItem: PropTypes.func,
    };
  }

  static get defaultProps() {
    return {
      hovered: false,
    };
  }

  constructor(props) {
    super(props);
    this.handleOnMouseEnterItem = this.handleOnMouseEnterItem.bind(this);
    this.handleOnMouseLeaveItem = this.handleOnMouseLeaveItem.bind(this);
    this.handleOnMouseEnterWarningItem = this.handleOnMouseEnterWarningItem.bind(this);
    this.handleOnMouseLeaveWarningItem = this.handleOnMouseLeaveWarningItem.bind(this);
    this.handleOnMouseEnterRemoveItem = this.handleOnMouseEnterRemoveItem.bind(this);
    this.handleOnMouseLeaveRemoveItem = this.handleOnMouseLeaveRemoveItem.bind(this);
    this.handleOnClickRemoveItem = this.handleOnClickRemoveItem.bind(this);
  }

  handleOnMouseEnterItem(index, e) {
    if (this.props.onToggleProgress) {
      this.props.onToggleProgress(index, true);
    }
    e.preventDefault();
  }

  handleOnMouseLeaveItem(index, e) {
    if (this.props.onToggleProgress) {
      this.props.onToggleProgress(index, false);
    }
    e.preventDefault();
  }

  handleOnMouseEnterWarningItem(index, isWarning, e) {
    if (!isWarning) {
      return;
    }
    if (this.props.onToggleWarning) {
      this.props.onToggleWarning(index, true);
    }
    e.preventDefault();
  }

  handleOnMouseLeaveWarningItem(index, isWarning, e) {
    if (!isWarning) {
      return;
    }
    if (this.props.onToggleWarning) {
      this.props.onToggleWarning(index, false);
    }
    e.preventDefault();
  }

  handleOnMouseEnterRemoveItem(index, e) {
    if (this.props.onToggleOverlayRemove) {
      this.props.onToggleOverlayRemove(index, true);
    }
    e.preventDefault();
  }

  handleOnMouseLeaveRemoveItem(index, e) {
    if (this.props.onToggleOverlayRemove) {
      this.props.onToggleOverlayRemove(index, false);
    }
    e.preventDefault();
  }

  handleOnClickRemoveItem(index, e) {
    if (this.props.onClickRemoveItem) {
      this.props.onClickRemoveItem(index);
    }
  }

  render() {
    const {
      hovered,
      model,
      data,
      index,
    } = this.props;

    let warning;
    if (data && data.warnings) {
      const warningsKeys = Object.keys(data.warnings);
      if (warningsKeys && warningsKeys.length > 0) {
        // we display only the first warning
        warning = data.warnings[warningsKeys[0]];
      }
    }

    let render_progress;
    if (model.showProgress && data) {
      switch(model.type) {
        case 'kasli':
        case 'kasli-backplane':
          render_progress = (
            <div className="k-popup-connectors">
              <p>{`${data.nbrCurrentSlot}/${model.nbrSlotMax} EEM connectors available`}</p>
              <p>{`${data.nbrCurrentClock}/${model.nbrClockMax} Clock connectors available`}</p>
            </div>
          );
          break;

        case 'zotino':
        case 'hd68':
          render_progress = (
            <div className="k-popup-connectors">
              <p>{`${data.nbrCurrentSlot}/${model.nbrSlotMax} connectors available`}</p>
            </div>
          );
          break;

        case 'clocker':
          render_progress = (
            <div className="k-popup-connectors">
              <p>{`${data.nbrCurrentClock}/${model.nbrClockMax} Clock connectors available`}</p>
            </div>
          );
          break;

        default:
          break;
      }
    }

    return (
      <Draggable draggableId={model.id} index={index}>

        {(provided, snapshot) => (
          <div
              ref={provided.innerRef}
              {...provided.draggableProps}
              {...provided.dragHandleProps}
              style={{ ...productStyle(
                provided.draggableProps.style,
                snapshot,
                true,
                hovered ? true : false,
                model.selected ? true : false,
              )}}
              onMouseEnter={this.handleOnMouseEnterRemoveItem.bind(this, index)}
              onMouseLeave={this.handleOnMouseLeaveRemoveItem.bind(this, index)}
              >

            {/* warning container */}
            <div
                style={{'height': '24px'}}
                className="progress-container warning"
                onMouseEnter={this.handleOnMouseEnterWarningItem.bind(this, index, warning)}
                onMouseLeave={this.handleOnMouseLeaveWarningItem.bind(this, index, warning)}>

              {warning && (
                <img className="alert-warning" src={warning ? `/images${warning.icon}` : null} />
              )}

              {warning && model.showWarning &&  (
                <div className="k-popup-warning">
                  <p className="rule warning">
                    <i>{warning.message}</i>
                  </p>
                </div>
              )}
            </div>

            <h6>{model.name}</h6>

            <div
              style={{'height': '250px'}}
              onMouseEnter={this.handleOnMouseEnterRemoveItem.bind(this, index)}
              >

              <img
                  className='item-cart'
                  src={`/images${model.image}`} />
            </div>

            {/* remove container */}
            <div
                style={{'display': model.showOverlayRemove ? 'flex':'none'}}
                className="overlayRemove"
                onClick={this.handleOnClickRemoveItem.bind(this, index)}>

              <img src="/images/shop/icon-remove.svg" alt="rm"/>

              <p>remove</p>
            </div>

            {/* progression container */}
            <div
                style={{'height': '22px'}}
                className="progress-container"
                onMouseEnter={this.handleOnMouseEnterItem.bind(this, index)}
                onMouseLeave={this.handleOnMouseLeaveItem.bind(this, index)}>

              {model.nbrSlotMax > 0 && (
                <div className="nbr-connectors">
                  <div style={{ ...nbrConnectorsStyle(data)}}></div>
                </div>
              )}

              {model.nbrClockMax > 0 && (
                <div className="nbr-clocks">
                  <div style={{ ...nbrClocksStyle(data)}}></div>
                </div>
              )}

              {/* progress info when mouse over */}
              {render_progress}
            </div>

          </div>
        )}

      </Draggable>
    );
  }
}


/**
 * Component that displays a placeholder inside crate.
 * Allows to display how it remains space for the current crate.
 */
class FakePlaceholder extends React.PureComponent {

  static get propTypes() {
    return {
      isDraggingOver: PropTypes.bool,
      nbrSlots: PropTypes.number.isRequired,
      items: PropTypes.array.isRequired,
    };
  }

  render() {
    const {
      isDraggingOver,
      nbrSlots,
      items,
    } = this.props;

    const fakePlaceholder = [];
    const nbrOccupied = nbrOccupiedSlotsInCrate(items);

    for (var i = (nbrSlots - nbrOccupied); i > 0; i--) {
      fakePlaceholder.push(
        <div key={i} style={{
          display: isDraggingOver ? 'none' : 'block',
          border: '1px dashed #ccc',
          width: '45px',
          marginBottom: '5px',
        }}></div>
      );
    }

    return (
      <React.Fragment>
        {fakePlaceholder}
      </React.Fragment>
    );

  }
}


/**
 * Component that displays a list of <ProductCartItem>
 */
class Cart extends React.PureComponent {

  static get propTypes() {
    return {
      nbrSlots: PropTypes.number,
      itemHovered: PropTypes.string,
      data: PropTypes.object.isRequired,
      onToggleProgress: PropTypes.func,
      onToggleWarning: PropTypes.func,
      onToggleOverlayRemove: PropTypes.func,
      onClickRemoveItem: PropTypes.func,
    };
  }

  render() {
    const {
      nbrSlots,
      itemHovered,
      data,
      onToggleProgress,
      onToggleWarning,
      onToggleOverlayRemove,
      onClickRemoveItem,
    } = this.props;

    const products = data.items.map((item, index) => {
      let itemData;
      if (data.itemsData && index in data.itemsData) {
        itemData = data.itemsData[index];
      }
      return (
        <ProductCartItem
            hovered={item.id === itemHovered}
            key={item.id}
            index={index}
            data={itemData}
            onToggleProgress={onToggleProgress}
            onToggleWarning={onToggleWarning}
            onToggleOverlayRemove={onToggleOverlayRemove}
            onClickRemoveItem={onClickRemoveItem}
            model={item}>
        </ProductCartItem>
      );
    });

    return (
      <Droppable droppableId={data.id} direction="horizontal">

        {(provided, snapshot) => (
          <div
              ref={provided.innerRef}
              {...provided.droppableProps}
              style={cartStyle(
                provided.droppableProps.style,
                snapshot,
              )}
              className="items-cart-list">

            {products}

            {provided.placeholder && (
              <div style={{ display: 'none' }}>
                {provided.placeholder}
              </div>
            )}

            <FakePlaceholder
                nbrSlots={nbrSlots}
                items={data.items}
                isDraggingOver={snapshot.isDraggingOver} />
          </div>
        )}

      </Droppable>
    );
  }
}


/**
 * Component that displays crate modes
 */
class CrateMode extends React.PureComponent {

  static get propTypes() {
    return {
      items: PropTypes.array.isRequired,
      mode: PropTypes.string.isRequired,
      onClickMode: PropTypes.func,
    };
  }

  constructor(props) {
    super(props);
    this.handleOnClickMode = this.handleOnClickMode.bind(this);
  }

  handleOnClickMode(mode, e) {
    if (this.props.onClickMode) {
      this.props.onClickMode(mode);
    }
    e.preventDefault();
  }

  render() {
    const {
      mode,
      items,
    } = this.props;

    return (
      <div className="crate-mode">
        {items.map(item => (
          <a
            key={item.id}
            className={mode == item.id ? 'active' : ''}
            onClick={this.handleOnClickMode.bind(this, item.id)}
            href="#"
            role="button">{item.name}</a>
        ))}
      </div>
    );
  }
}


/**
 * Component that displays the main crate with reminder rules.
 * It includes <Cart> and rules
 */
class Crate extends React.PureComponent {

  static get propTypes() {
    return {
      rules: PropTypes.array,
      cart: PropTypes.element,
    };
  }

  render() {
    const {
      rules,
      cart,
    } = this.props;

    return (
      <div className="crate">

        <div className="crate-products">

          {cart}

          {rules && rules.length > 0 && (
            <div className="crate-info">
              {rules.map((rule, index) => (
                <p key={index} className="rule">
                  <img src={`/images${rule.icon}`} /> <i><strong>{rule.name}:</strong> {rule.message}</i>
                </p>
              ))}
            </div>
          )}
        </div>

      </div>
    );
  }
}


/**
 * Component that renders all things for order.
 * It acts like-a layout, this component do nothing more.
 */
class OrderPanel extends React.PureComponent {

  static get propTypes() {
    return {
      title: PropTypes.string,
      description: PropTypes.string,
      crateMode: PropTypes.element,
      crate: PropTypes.element,
      summaryPrice: PropTypes.element,
      form: PropTypes.element,
    };
  }

  render() {
    const {
      title,
      description,
      crateMode,
      crate,
      summaryPrice,
      form,
    } = this.props;

    return (
      <section className="panel">

        <h2>{title}</h2>

        <div className="control">
          <p className="description">{description}</p>

          {crateMode}
        </div>

        {crate}

        <section className="summary">
          {summaryPrice}

          {form}
        </section>

      </section>
    );
  }
}


/**
 * Components that renders the form to request quote.
 */
class OrderForm extends React.PureComponent {

  static get propTypes() {
    return {
      onClickSubmit: PropTypes.func,
    };
  }

  constructor(props) {
    super(props);
    this.state = {note: ''};

    this.handleNoteChange = this.handleNoteChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleNoteChange(event) {
    this.setState({
      note: event.target.value,
    });
  }

  handleSubmit(event) {
    if (this.props.onClickSubmit) {
      this.props.onClickSubmit(this.state.note);
    }
    event.preventDefault();
  }

  render() {
    return (
      <div className="summary-form">

        <form onSubmit={this.handleSubmit}>
          <textarea
              value={this.state.note}
              onChange={this.handleNoteChange}
              rows="5"
              placeholder="Additional notes" />
          <input type="submit" value="Request quote" />
        </form>

      </div>
    );
  }
}


/**
 * Components that displays the list of card that are used in the crate.
 * It is a summary of purchase
 */
class OrderSumary extends React.PureComponent {

  static get propTypes() {
    return {
      modes: PropTypes.array,
      currentMode: PropTypes.string,
      summary: PropTypes.array,
      itemsData: PropTypes.array,
      onDeleteItem: PropTypes.func,
      onDeleteAllItems: PropTypes.func,
      onMouseEnterItem: PropTypes.func,
      onMouseLeaveItem: PropTypes.func,
      onClickSelectItem: PropTypes.func,
    };
  }

  constructor(props) {
    super(props);
    this.handleOnDeleteItem = this.handleOnDeleteItem.bind(this);
    this.handleOnDeleteAllItems = this.handleOnDeleteAllItems.bind(this);
    this.handleOnMouseEnterItem = this.handleOnMouseEnterItem.bind(this);
    this.handleOnMouseLeaveItem = this.handleOnMouseLeaveItem.bind(this);
    this.handleOnClickSelectItem = this.handleOnClickSelectItem.bind(this);
  }

  handleOnDeleteItem(index, e) {
    if (this.props.onDeleteItem) {
      this.props.onDeleteItem(index);
    }
    e.preventDefault();
  }

  handleOnDeleteAllItems(e) {
    if (this.props.onDeleteAllItems) {
      this.props.onDeleteAllItems();
    }
    e.preventDefault();
  }

  handleOnMouseEnterItem(id, e) {
    if (this.props.onMouseEnterItem) {
      this.props.onMouseEnterItem(id);
    }
    e.preventDefault();
  }

  handleOnMouseLeaveItem(e) {
    if (this.props.onMouseLeaveItem) {
      this.props.onMouseLeaveItem();
    }
    e.preventDefault();
  }

  handleOnClickSelectItem(index, e) {
    if (e.target.tagName !== 'IMG') {
      if (this.props.onClickSelectItem) {
        this.props.onClickSelectItem(index);
      }
    }
    return e.preventDefault();
  }

  render() {
    const {
      modes,
      currentMode,
      summary,
      itemsData,
    } = this.props;

    const mode = modes.find(elem => elem.id === currentMode);

    return (
      <div className="summary-price">

        <table>

          <thead>
            <tr>
              <td colSpan="2" className="summary-remove-all">
                <span className="item-card-name">Remove all cards</span>

                <button onClick={this.handleOnDeleteAllItems}>
                  <img src="/images/shop/icon-remove.svg" />
                </button>
              </td>
            </tr>

            {mode && (
              <tr>
                <td className="item-card-name">{mode.name}</td>
                <td className="price">
                  {`${mode.currency} ${mode.price}`}

                  <button style={{'opacity': '0', 'cursor': 'initial'}}>
                    <img src="/images/shop/icon-remove.svg" />
                  </button>
                </td>
              </tr>
            )}
          </thead>

          <tbody>
            {summary.map((item, index) => {
              let alert;
              let warning;

              if (itemsData[index]) {
                alert = itemsData[index];
                const warningsKeys = Object.keys(alert.warnings);
                if (warningsKeys && warningsKeys.length > 0) {
                  warning = alert.warnings[warningsKeys[0]];
                }
              }

              return (
                <tr key={item.id}
                    className={`hoverable ${item.selected ? 'selected' : ''}`}
                    onClick={this.handleOnClickSelectItem.bind(this, index)}
                    onMouseEnter={this.handleOnMouseEnterItem.bind(this, item.id)}
                    onMouseLeave={this.handleOnMouseLeaveItem}>

                  <td className="item-card-name">
                    <div>{item.name}</div>
                  </td>

                  <td className="price">
                    <div>
                      {`${item.currency} ${item.price}`}

                      <button onClick={this.handleOnDeleteItem.bind(this, index)}>
                        <img src="/images/shop/icon-remove.svg" />
                      </button>
                    </div>

                    {warning && (
                      <img
                          style={{'marginLeft': '10px'}}
                          className="alert-warning"
                          src={`/images/${warning.icon}`}
                      />
                    )}
                  </td>
                </tr>
              );
            })}
          </tbody>

          <tfoot>
            <tr>
              <td className="item-card-name">Price estimate</td>
              <td className="price">
                {summary.length ? (
                  `${summary[0].currency} ${summary.reduce(
                    (prev, next) => {
                      return prev + next.price;
                    }, 0
                  ) + mode.price}`
                ) : (
                  `${mode.currency} ${mode.price}`
                )}

                <button style={{'opacity': '0', 'cursor': 'initial'}}>
                  <img src="/images/shop/icon-remove.svg" alt="icon remove"/>
                </button>
              </td>
            </tr>
          </tfoot>

        </table>

      </div>
    );
  }
}


/**
 * Component that renders the backlog in the aside
 */
class Backlog extends React.PureComponent {

  static get propTypes() {
    return {
      data: PropTypes.object.isRequired,
      items: PropTypes.object,
      onClickAddItem: PropTypes.func,
    };
  }

  static get defaultProps() {
    return {
      items: {},
    };
  }

  render() {
    const {
      data,
      items,
      onClickAddItem,
    } = this.props;

    const ordered_items = data.itemIds.map(itemId => items[itemId]);
    const products = ordered_items.map((item, index) => {
      return (
        <ProductItem
            key={item.id}
            id={item.id}
            index={index}
            name={item.name}
            price={item.price}
            currency={item.currency}
            image={`/images/${item.image}`}
            specs={item.specs}
            onClickAddItem={onClickAddItem}
        ></ProductItem>
      );
    });

    return (
      <Droppable
          droppableId={data.id}
          isDropDisabled={true}>

        {(provided) => (
          <div
              className="backlog-container"
              ref={provided.innerRef}
              {...provided.droppableProps}>

            {products}

            {provided.placeholder && (
              <div style={{ display: 'none' }}>
                {provided.placeholder}
              </div>
            )}
          </div>
        )}

      </Droppable>
    );
  }
}


/**
 * Component that render the entire shop
 */
class Shop extends React.PureComponent {

  static get propTypes() {
    return {
      data: PropTypes.object.isRequired,
    };
  }

  constructor(props) {
    super(props);
    this.state = this.props.data;
    this.handleCrateModeChange = this.handleCrateModeChange.bind(this);
    this.handleOnDragEnd = this.handleOnDragEnd.bind(this);
    this.handleDeleteItem = this.handleDeleteItem.bind(this);
    this.handleDeleteAllItems = this.handleDeleteAllItems.bind(this);
    this.handleMouseEnterItem = this.handleMouseEnterItem.bind(this);
    this.handleMouseLeaveItem = this.handleMouseLeaveItem.bind(this);
    this.handleClickAddItem = this.handleClickAddItem.bind(this);
    this.checkAlerts = this.checkAlerts.bind(this);
    this.handleToggleItemProgress = this.handleToggleItemProgress.bind(this);
    this.handleToggleItemWarning = this.handleToggleItemWarning.bind(this);
    this.handleClickSelectItem = this.handleClickSelectItem.bind(this);
    this.handleClickSubmit = this.handleClickSubmit.bind(this);
    this.handleToggleOverlayRemove = this.handleToggleOverlayRemove.bind(this);
  }

  componentDidMount() {
    // index 0 is a Kasli, we place it as a default conf on the crate.
    const source = {
      droppableId: 'backlog',
      index: 0,
    };
    const destination = {
      droppableId: 'cart',
      index: 0,
    };

    this.handleOnDragEnd({
      source,
      destination,
      draggableId: null,
    });
  }

  componentDidUpdate(prevProps, prevState) {
    /**
     * We check alerts (reminder + warning) only when items inside crate or
     * crate mode change.
     *
     * In the function checkAlerts, we DO NOT want to change items as we will
     * trigger again this function (componentDidUpdate) and thus,
     * making an infinite loop.
     */
    if (
      (prevState.columns.cart.items !== this.state.columns.cart.items) ||
      (prevState.currentMode !== this.state.currentMode)
    ) {
      this.checkAlerts(
        prevState.columns.cart.items,
        this.state.columns.cart.items);
    }
  }

  handleCrateModeChange(mode) {
    this.setState({
      currentMode: mode,
    });
  }

  handleDeleteItem(index) {
    const cloned = Array.from(this.state.columns.cart.items);
    cloned.splice(index, 1);
    this.setState({
      ...this.state,
      columns: {
        ...this.state.columns,
        cart: {
          ...this.state.columns.cart,
          items: cloned,
        },
      },
    });
  }

  handleDeleteAllItems() {
    this.setState({
      ...this.state,
      columns: {
        ...this.state.columns,
        cart: {
          ...this.state.columns.cart,
          items: [],
        },
      },
    });
  }

  handleMouseEnterItem(id) {
    this.setState({
      ...this.state,
      currentItemHovered: id,
    });
  }

  handleMouseLeaveItem() {
    this.setState({
      ...this.state,
      currentItemHovered: null,
    });
  }

  handleClickAddItem(index) {
    const source = {
      droppableId: 'backlog',
      index: index,
    };
    const destination = {
      droppableId: 'cart',
      index: this.state.columns.cart.items.length,
    };

    this.handleOnDragEnd({
      source,
      destination,
      draggableId: null,
    });
  }

  handleToggleItemProgress(index, show) {
    const itemsCloned = Array.from(this.state.columns.cart.items);

    this.setState({
      ...this.state,
      columns: {
        ...this.state.columns,
        cart: {
          ...this.state.columns.cart,
          items: itemsCloned.map((item, i) => {
            return {
              ...item,
              showProgress: i === index ? show : false,
              showOverlayRemove: false,
              showWarning: false,
            };
          }),
        }
      },
    });
  }

  handleToggleItemWarning(index, show) {
    const itemsCloned = Array.from(this.state.columns.cart.items);

    this.setState({
      ...this.state,
      columns: {
        ...this.state.columns,
        cart: {
          ...this.state.columns.cart,
          items: itemsCloned.map((item, i) => {
            return {
              ...item,
              showWarning: i === index ? show : false,
              showProgress: false,
              showOverlayRemove: false,
            };
          }),
        }
      },
    });
  }

  handleClickSelectItem(index) {
    const itemsCloned = Array.from(this.state.columns.cart.items);

    this.setState({
      ...this.state,
      columns: {
        ...this.state.columns,
        cart: {
          ...this.state.columns.cart,
          items: itemsCloned.map((item, id) => {
            return {...item, selected: id === index ? true : false};
          }),
        }
      },
    });
  }

  handleToggleOverlayRemove(index, show) {
    const itemsCloned = Array.from(this.state.columns.cart.items);

    this.setState({
      ...this.state,
      columns: {
        ...this.state.columns,
        cart: {
          ...this.state.columns.cart,
          items: itemsCloned.map((item, id) => {
            return {
              ...item,
              showOverlayRemove: id === index ? show : false,
              showProgress: false,
              showWarning: false,
            };
          }),
        }
      },
    });
  }

  handleClickSubmit(note) {
    const crate = {
      items: [],
      type: this.state.currentMode,
    };
    const clonedCart = Array.from(this.state.columns.cart.items);
    for (const i in clonedCart) {
      const item = clonedCart[i];
      crate.items.push({
        'name': item.name,
      });
    }

    const a = document.createElement('a');
    const num = (new Date()).getTime();
    const subject = `[Order hardware] - Request Quote`;
    let body = `Hello!\n\nI would like to request a quotation for my below configuration:\n\n${JSON.stringify(crate)}\n\n`;

    if (note) {
      body = `${body}\n\nAdditional note:\n\n${note ? note.trim() : ''}`;
    }

    document.body.appendChild(a);

    a.style = 'display: none';
    a.href = `mailto:sales@m-labs.hk?subject=${subject}&body=${encodeURIComponent(body)}`;
    a.click();
  }

  handleOnDragEnd(result) {
    const {
      source,
      destination,
      draggableId,
    } = result;

    if (!destination) {
      if (source.droppableId === 'cart') {
        this.setState({
          ...this.state,
          columns: {
            ...this.state.columns,
            [source.droppableId]: {
              ...this.state.columns[source.droppableId],
              items: remove(
                this.state.columns[source.droppableId].items,
                source.index,
              ),
            },
          },
        });
      }

      return;
    }

    switch(source.droppableId) {

      case 'backlog':
        this.setState({
          ...this.state,
          columns: {
            ...this.state.columns,
            [destination.droppableId]: {
              ...this.state.columns[destination.droppableId],
              items: copy(
                this.state.items,
                this.state.columns[source.droppableId],
                this.state.columns[destination.droppableId],
                source,
                destination,
              ),
            },
          },
        });
        break;

      case destination.droppableId:
        this.setState({
          ...this.state,
          columns: {
            ...this.state.columns,
            [destination.droppableId]: {
              ...this.state.columns[destination.droppableId],
              items: reorder(
                this.state.columns[destination.droppableId].items,
                source.index,
                destination.index,
              ),
            },
          },
        });
        break;

      default:
        break;
    }
  }

  checkAlerts(prevItems, newItems) {
    console.log('--- START CHECKING CRATE WARNING ---');

    const {
      currentMode,
      crateModeSlots,
      crateRules,
    } = this.state;

    const itemsCloned = Array.from(newItems);
    const itemsData = {};
    const rules = {};


    // check number of slot in crate
    const nbrOccupied = nbrOccupiedSlotsInCrate(newItems);
    if (nbrOccupied > crateModeSlots[currentMode]) {
      rules[crateRules.maxSlot.type] = {...crateRules.maxSlot};
    }


    // check the number of EEM connectors available for all Kasli
    const idxK = itemsCloned.reduce((prev, next, i) => {
      if (next.type === 'kasli' || next.type === 'kasli-backplane') {
        prev.push(i);
      }
      return prev;
    }, []);
    for (let i = 0; i <= idxK.length - 1; i++) {
      let slots;
      let nbUsedSlot = 0;
      let nbrCurrentClock = 0;
      let idx = idxK[i];

      if (i !== idxK.length - 1) {
        slots = itemsCloned.slice(idx + 1, idxK[i + 1]);
      } else {
        slots = itemsCloned.slice(idx + 1);
      }

      if (i == 0) {
        const slots_need_resource = itemsCloned.slice(0, idx);
        const idx_need = slots_need_resource.findIndex(e => (e.rules && e.rules.resources));

        if (idx_need != -1) {
          if (idx_need in itemsData) {
            if ('warnings' in itemsData[idx_need]) {
              itemsData[idx_need].warnings.resources = {...itemsCloned[idx_need].rules.resources};
            } else {
              itemsData[idx_need].warnings = {};
              itemsData[idx_need].warnings.resources = {...itemsCloned[idx_need].rules.resources};
            }
          } else {
            itemsData[idx_need] = {...itemsCloned[idx_need]};
            itemsData[idx_need].warnings = {};
            itemsData[idx_need].warnings.resources = {...itemsCloned[idx_need].rules.resources};
          }
        }
      }

      nbUsedSlot = slots
        .filter(item => item.type !== 'idc-bnc')
        .reduce((prev, next) => {
          return prev + next.slotOccupied;
        }, 0);
      nbrCurrentClock = slots
        .reduce((prev, next) => {
          return next.type === 'clocker' ? prev + next.clockOccupied : prev;
        }, 0);

      if (idx in itemsData) {
        itemsData[idx].nbrCurrentSlot = nbUsedSlot;
        itemsData[idx].nbrCurrentClock = nbrCurrentClock;
        if (!('warnings' in itemsData[idx])) {
          itemsData[idx].warnings = {};
        }
      } else {
        itemsData[idx] = {...itemsCloned[idx]};
        itemsData[idx].nbrCurrentSlot = nbUsedSlot;
        itemsData[idx].nbrCurrentClock = nbrCurrentClock;
        itemsData[idx].warnings = {};
      }

      if (nbUsedSlot > itemsCloned[idx].nbrSlotMax) {
        rules[itemsCloned[idx].rules.maxSlot.type] = {...itemsCloned[idx].rules.maxSlot};
        itemsData[idx].warnings.maxSlotWarning = {...itemsCloned[idx].rules.maxSlotWarning};
      }

      if (nbrCurrentClock > itemsCloned[idx].nbrClockMax) {
        rules[itemsCloned[idx].rules.maxClock.type] = {...itemsCloned[idx].rules.maxClock};
        itemsData[idx].warnings.maxClockWarning = {...itemsCloned[idx].rules.maxClockWarning};
      }

      if (itemsCloned.length > (idx + 1)) {
        const ddkali = itemsCloned[idx + 1];
        if (ddkali.type === 'kasli' || ddkali.type === 'kasli-backplane') {
          rules[ddkali.rules.follow.type] = {...ddkali.rules.follow};
        }
      }
    }


    // check number of clock connector available
    const idxC = itemsCloned.reduce((prev, next, i) => {
      if (next.type === 'kasli' || next.type === 'kasli-backplane' || next.type === 'clocker') {
        prev.push(i);
      }
      return prev;
    }, []);
    for (let i = 0; i <= idxC.length - 1; i++) {
      let slots;
      let nbrCurrentClock = 0;
      let idx = idxC[i];

      if (i !== idxC.length - 1) {
        slots = itemsCloned.slice(idx + 1, idxC[i + 1]);
      } else {
        slots = itemsCloned.slice(idx + 1);
      }

      nbrCurrentClock = slots.reduce((prev, next) => {
        return prev + next.clockOccupied;
      }, 0);

      if (idx in itemsData) {
        if (itemsData[idx].nbrCurrentClock) {
          itemsData[idx].nbrCurrentClock += nbrCurrentClock;
        } else {
          itemsData[idx].nbrCurrentClock = nbrCurrentClock;
        }
      } else {
        itemsData[idx] = {...itemsCloned[idx]};
        itemsData[idx].nbrCurrentClock = nbrCurrentClock;
        itemsData[idx].warnings = {};
      }

      if (nbrCurrentClock > itemsCloned[idx].nbrClockMax) {
        rules[itemsCloned[idx].rules.maxClock.type] = {...itemsCloned[idx].rules.maxClock};
        itemsData[idx].warnings.maxClockWarning = {...itemsCloned[idx].rules.maxClockWarning};
      }
    }


    // check for number of recommanded EEM connectors
    ['novo', 'urukul', 'koster'].map(_type => {
      if (itemsCloned.find(elem => elem.type === _type)) {
        rules[this.state.items[_type].rules.connectors.type] = {...this.state.items[_type].rules.connectors};
      }
      return _type;
    });


    // check if IDC-BNC is correctly positionned (after Zotino or HD68)
    const idxIDCBNC = itemsCloned.reduce((prev, next, i) => {
      if (next.type === 'idc-bnc') {
        prev.push(i);
      }
      return prev;
    }, []);
    for (var i = idxIDCBNC.length - 1; i >= 0; i--) {
      const ce = idxIDCBNC[i];
      let shouldWarning = false;

      if (ce == 0) {
        shouldWarning = true;
      } else if (ce >= 1) {
        const pe = idxIDCBNC[i] - 1;
        if (itemsCloned[pe].type !== 'zotino' &&
            itemsCloned[pe].type !== 'hd68' &&
            itemsCloned[pe].type !== 'idc-bnc') {
          shouldWarning = true;
        }
      }

      if (shouldWarning) {
        itemsData[ce] = {...itemsCloned[ce]};
        itemsData[ce].warnings = {};
        itemsData[ce].warnings.wrong = {...itemsCloned[ce].rules.wrong};
      }
    }


    // check number of IDC-BNC adapters for a Zotino and HD68-IDC
    const idxZH = itemsCloned.reduce((prev, next, i) => {
      if (next.type === 'zotino' || next.type === 'hd68') {
        prev.push(i);
      }
      return prev;
    }, []);
    for (let i = 0; i <= idxZH.length - 1; i++) {
      let slots;
      let nbUsedSlot = 0;
      let idx = idxZH[i];

      if (i !== idxZH.length - 1) {
        slots = itemsCloned.slice(idx + 1, idxZH[i + 1]);
      } else {
        slots = itemsCloned.slice(idx + 1);
      }

      let stopCount = false;
      nbUsedSlot = slots.reduce((prev, next, ci, ca) => {
        if (ci === 0 && next.type === 'idc-bnc') {
          return prev + 1;
        } else if (ca[0].type === 'idc-bnc' && ci > 0 && ca[ci - 1].type === 'idc-bnc') {
          if (next.type !== 'idc-bnc') { stopCount = true; }
          return prev + (next.type === 'idc-bnc' && !stopCount ? 1 : 0);
        }
        return prev;
      }, 0);

      if (idx in itemsData) {
        itemsData[idx].nbrCurrentSlot = nbUsedSlot;
        if (!('warnings' in itemsData[idx])) {
          itemsData[idx].warnings = {};
        }
      } else {
        itemsData[idx] = {...itemsCloned[idx]};
        itemsData[idx].nbrCurrentSlot = nbUsedSlot;
        itemsData[idx].warnings = {};
      }

      if (nbUsedSlot > 0) {
        rules[itemsCloned[idx].rules.maxSlot.type] = {...itemsCloned[idx].rules.maxSlot};
      }
      if (nbUsedSlot > itemsCloned[idx].nbrSlotMax) {
        itemsData[idx].warnings.maxSlotWarning = {...itemsCloned[idx].rules.maxSlotWarning};
      }

      // check if HD68-IDC has at least 1 IDC-BNC adapter
      if (itemsCloned[idx].type === 'hd68') {
        let shouldWarning = false;

        if (idx < itemsCloned.length - 1) {
          if (itemsCloned[idx + 1].type !== 'idc-bnc') {
            shouldWarning = true;
          }
        } else if (idx === itemsCloned.length - 1) {
          shouldWarning = true;
        }

        if (shouldWarning) {
          if (idx in itemsData) {
            itemsData[idx].warnings.minAdapter = {...itemsCloned[idx].rules.minAdapter};
          } else {
            itemsData[idx] = {...itemsCloned[idx]};
            itemsData[idx].warnings = {};
            itemsData[idx].warnings.minAdapter = {...itemsCloned[idx].rules.minAdapter};
          }
        }
      }
    }


    // update state with rules
    this.setState({
      ...this.state,
      columns: {
        ...this.state.columns,
        cart: {
          ...this.state.columns.cart,
          itemsData: {
            ...itemsData,
          },
        }
      },
      rules: {
        ...rules,
      },
    });
  }

  render() {

    const {
      currentItemHovered,
      currentMode,
      crateModeSlots,
      crateModeItems,
      items,
      columns,
      rules,
    } = this.state;

    return (
      <DragDropContext onDragEnd={this.handleOnDragEnd}>

        <Layout
            className="shop"
            aside={
              <Backlog
                  items={items}
                  data={columns['backlog']}
                  onClickAddItem={this.handleClickAddItem}>
              </Backlog>
            }
            main={(
              <OrderPanel
                  title="Order hardware"
                  description="
                    Choose your crate and drag/add the cards you want
                    to the crate below to see
                    how the combination would look like."
                  crateMode={
                    <CrateMode
                        items={crateModeItems}
                        mode={currentMode}
                        onClickMode={this.handleCrateModeChange}>
                    </CrateMode>}
                  crate={
                    <Crate
                        cart={
                          <Cart
                              nbrSlots={crateModeSlots[currentMode]}
                              data={columns['cart']}
                              itemHovered={currentItemHovered}
                              onToggleProgress={this.handleToggleItemProgress}
                              onToggleWarning={this.handleToggleItemWarning}
                              onToggleOverlayRemove={this.handleToggleOverlayRemove}
                              onClickRemoveItem={this.handleDeleteItem}>
                          </Cart>
                        }
                        rules={Object.values(rules).filter(rule => rule)}>
                    </Crate>
                  }
                  summaryPrice={
                    <OrderSumary
                        currentMode={currentMode}
                        modes={crateModeItems}
                        summary={columns['cart'].items}
                        itemsData={columns.cart.itemsData}
                        onMouseEnterItem={this.handleMouseEnterItem}
                        onMouseLeaveItem={this.handleMouseLeaveItem}
                        onDeleteItem={this.handleDeleteItem}
                        onDeleteAllItems={this.handleDeleteAllItems}
                        onClickSelectItem={this.handleClickSelectItem}>
                    </OrderSumary>
                  }
                  form={
                    <OrderForm
                        onClickSubmit={this.handleClickSubmit}>
                    </OrderForm>
                  }>
              </OrderPanel>
            )}>
        </Layout>

      </DragDropContext>
    );
  }
}


ReactDOM.render(
  <Shop data={data} />,
  document.querySelector('#root-shop'),
);