import { interpolate as d3_interpolate } from 'd3-interpolate';
import { selectAll as d3_selectAll } from 'd3-selection';

import { uiEntityEditor } from './entity_editor';
import { uiPresetList } from './preset_list';
import { uiViewOnOSM } from './view_on_osm';


export function uiInspector(context) {
    var presetList = uiPresetList(context);
    var entityEditor = uiEntityEditor(context);
    var _state = 'select';
    var _entityID;
    var _newFeature = false;


    function inspector(selection, newFeature) {
        presetList
            .entityID(_entityID)
            .autofocus(_newFeature)
            .on('choose', inspector.setPreset);

        entityEditor
            .state(_state)
            .entityID(_entityID)
            .on('choose', inspector.showList);

        var wrap = selection.selectAll('.panewrap')
            .data([0]);

        var enter = wrap.enter()
            .append('div')
            .attr('class', 'panewrap');

        enter
            .append('div')
            .attr('class', 'preset-list-pane pane');

        enter
            .append('div')
            .attr('class', 'entity-editor-pane pane');

        wrap = wrap.merge(enter);
        var presetPane = wrap.selectAll('.preset-list-pane');
        var editorPane = wrap.selectAll('.entity-editor-pane');

        var entity = context.entity(_entityID);

        var isTaglessOrIntersectionVertex = entity.geometry(context.graph()) === 'vertex' &&
            (!entity.hasNonGeometryTags() && !entity.isHighwayIntersection(context.graph()));
        // start with the preset list if the feature is new or is an uninteresting vertex
        var showPresetList = newFeature || isTaglessOrIntersectionVertex;

        if (showPresetList) {
            wrap.style('right', '-100%');
            presetPane.call(presetList);
        } else {
            wrap.style('right', '0%');
            editorPane.call(entityEditor);
        }

        var footer = selection.selectAll('.footer')
            .data([0]);

        footer = footer.enter()
            .append('div')
            .attr('class', 'footer')
            .merge(footer);

        footer
            .call(uiViewOnOSM(context)
                .what(context.hasEntity(_entityID))
            );

        inspector.showList = function(preset) {
            wrap.transition()
                .styleTween('right', function() { return d3_interpolate('0%', '-100%'); });

            presetPane
                .call(presetList.preset(preset).autofocus(true));
        };

        inspector.setPreset = function(preset) {
            wrap.transition()
                .styleTween('right', function() { return d3_interpolate('-100%', '0%'); });

            editorPane
                .call(entityEditor.preset(preset));
        };
    }

    inspector.showList = function() {};
    inspector.setPreset = function() {};

    inspector.state = function(val) {
        if (!arguments.length) return _state;
        _state = val;
        entityEditor.state(_state);

        // remove any old field help overlay that might have gotten attached to the inspector
        d3_selectAll('.field-help-body').remove();

        return inspector;
    };


    inspector.entityID = function(val) {
        if (!arguments.length) return _entityID;
        _entityID = val;
        return inspector;
    };


    inspector.newFeature = function(val) {
        if (!arguments.length) return _newFeature;
        _newFeature = val;
        return inspector;
    };


    return inspector;
}

@@ -65,16 +65,37 @@
 import %7B
+ select as d3_select,
  selectA
@@ -403,32 +403,140 @@
 ditor(context);%0A
+    var wrap = d3_select(null),%0A        presetPane = d3_select(null),%0A        editorPane = d3_select(null);%0A
     var _state =
@@ -914,28 +914,24 @@
 );%0A%0A        
-var 
 wrap = selec
@@ -1314,28 +1314,24 @@
 r);%0A        
-var 
 presetPane =
@@ -1376,20 +1376,16 @@
         
-var 
 editorPa
@@ -2376,21 +2376,23 @@
      );%0A
-%0A
     
+%7D%0A%0A
     insp
@@ -2427,36 +2427,32 @@
 eset) %7B%0A        
-    
 wrap.transition(
@@ -2457,36 +2457,32 @@
 n()%0A            
- 
-   
 .styleTween('rig
@@ -2542,36 +2542,32 @@
 ); %7D);%0A%0A        
-    
 presetPane%0A     
@@ -2569,28 +2569,24 @@
             
- 
-   
 .call(preset
@@ -2619,28 +2619,24 @@
 cus(true));%0A
-    
     %7D;%0A%0A    
@@ -2635,20 +2635,16 @@
 %7D;%0A%0A    
-  
-  
 inspecto
@@ -2680,28 +2680,24 @@
 ) %7B%0A        
-    
 wrap.transit
@@ -2706,36 +2706,32 @@
 n()%0A            
-  
-  
 .styleTween('rig
@@ -2791,36 +2791,32 @@
 ); %7D);%0A%0A        
-    
 editorPane%0A     
@@ -2806,28 +2806,24 @@
  editorPane%0A
-    
             
@@ -2866,100 +2866,8 @@
     
-    %7D;%0A    %7D%0A%0A    inspector.showList = function() %7B%7D;%0A    inspector.setPreset = function() %7B
 %7D;%0A%0A

Fix issue where preset reset buttons would not initially work