import { mix } from 'mixwith';

import React from 'react';
import PropTypes from 'prop-types';

import {expandCombinedTracks} from './utils';
import { getSeriesItems } from './SeriesListItems';

import ContextMenuItem from './ContextMenuItem';
import ContextMenuContainer from './ContextMenuContainer';
import SeriesListSubmenuMixin from './SeriesListSubmenuMixin';

// Styles
import '../styles/ContextMenu.module.scss';

class ViewContextMenu extends mix(ContextMenuContainer).with(SeriesListSubmenuMixin) {
  render() {
    const seriesItems = getSeriesItems(
      this.props.tracks,
      this.handleItemMouseEnter.bind(this),
      this.handleMouseLeave.bind(this),
    );

    const customItemsWrapped = this.props.customItems
      ? React.Children.map(this.props.customItems,
        child => React.cloneElement(
          child, { onMouseEnter: (e) => { this.handleOtherMouseEnter(e); } }
        )
      )
      : null;

    return (
      <div
        ref={(c) => { this.div = c; }}
        style={{
          left: this.state.left,
          top: this.state.top,
        }}
        styleName="context-menu"
      >
        {customItemsWrapped}

        {customItemsWrapped && <hr styleName="context-menu-hr" />}

        {seriesItems}

        {seriesItems && <hr styleName="context-menu-hr" />}

        <ContextMenuItem
          onClick={() => this.props.onAddTrack({
            type: 'horizontal-rule',
            y: this.props.coords[1],
            position: 'whole',
          })}
          onMouseEnter={e => this.handleOtherMouseEnter(e)}
        >
          {'Add Horizontal Rule'}
        </ContextMenuItem>

        <ContextMenuItem
          onClick={() => this.props.onAddTrack({
            type: 'vertical-rule',
            x: this.props.coords[0],
            position: 'whole',
          })}
          onMouseEnter={e => this.handleOtherMouseEnter(e)}
        >
          {'Add Vertical Rule'}
        </ContextMenuItem>

        <ContextMenuItem
          onClick={() => this.props.onAddTrack({
            type: 'cross-rule',
            x: this.props.coords[0],
            y: this.props.coords[1],
            position: 'whole',
          })}
          onMouseEnter={e => this.handleOtherMouseEnter(e)}
        >
          {'Add Cross Rule'}
        </ContextMenuItem>

        <hr styleName="context-menu-hr" />

        { 
          this.hasMatrixTrack(this.props.tracks) &&
          <ContextMenuItem
            onMouseEnter={e => this.handleOtherMouseEnter(e)}
            onClick={ this.handleAddHorizontalSection.bind(this) }
          >
            {'Add Horizontal Cross Section'}
          </ContextMenuItem>
        }

        { /* from the SeriesListSubmenuMixin */ }
        { this.getSubmenu() }

      </div>
    );
  }


  hasMatrixTrack(tracks) {
    const trackList = expandCombinedTracks(this.props.tracks);
    console.log('trackList:', trackList);
    return trackList.filter(track => track.type == 'heatmap').length > 0;   
  }

  handleAddHorizontalSection() {
    const trackList = expandCombinedTracks(this.props.tracks);
    const matrixTrack = trackList.filter(track => track.type == 'heatmap')[0];
    console.log('matrixTrack:', matrixTrack);

    this.props.onAddTrack({
      type: 'horizontal-rule',
      y: this.props.coords[1], 
      position: 'whole',
    });
    this.props.onAddTrack({
      "data": {
        "type": "horizontal-section",
        "server": matrixTrack.server,
        "tilesetUid": matrixTrack.tilesetUid,
        "ySlicePos":this.props.coords[1], 
      },
      "options": {
        valueScaling: 'log',
      },
      "type": "horizontal-bar",
      "height": 30,
      "position": "top",
    });
  }
}

ViewContextMenu.propTypes = {
  // the data coordinates where this context menu was initiated
  coords: PropTypes.array,
  customItems: PropTypes.array,
};

export default ViewContextMenu;

@@ -2353,18 +2353,17 @@
        %7B
- 
 %0A
+
         
@@ -2860,50 +2860,8 @@
 s);%0A
-    console.log('trackList:', trackList);%0A
     
@@ -2929,19 +2929,16 @@
 gth %3E 0;
-   
 %0A  %7D%0A%0A  
@@ -3113,54 +3113,8 @@
 %5B0%5D;
-%0A    console.log('matrixTrack:', matrixTrack);
 %0A%0A  
@@ -3196,25 +3196,24 @@
 s.coords%5B1%5D,
- 
 %0A      posit
@@ -3400,16 +3400,16 @@
 setUid,%0A
+
         
@@ -3441,17 +3441,16 @@
 ords%5B1%5D,
- 
 %0A      %7D

Remove logs