text: import {
      event as d3_event,
      select as d3_select
  } from 'd3-selection';
  
  import { t, textDirection } from '../util/locale';
  import { svgIcon } from '../svg';
  import { uiDisclosure } from './disclosure';
  import { utilDetect } from '../util/detect';
  
  
  export function uiBackgroundDisplayOptions(context) {
      var detected = utilDetect();
      var storedOpacity = context.storage('background-opacity');
      var minVal = 0.25;
      var maxVal = detected.cssfilters ? 2 : 1;
  
      var sliders = detected.cssfilters
          ? ['brightness', 'contrast', 'saturation', 'sharpness']
          : ['brightness'];
  
      var _options = {
          brightness: (storedOpacity !== null ? (+storedOpacity) : 1),
          contrast: 1,
          saturation: 1,
          sharpness: 1
      };
  
      var _selection = d3_select(null);
  
  
      function clamp(x, min, max) {
          return Math.max(min, Math.min(x, max));
      }
  
  
      function updateValue(d, val) {
          if (!val && d3_event && d3_event.target) {
              val = d3_event.target.value;
          }
  
          val = clamp(val, minVal, maxVal);
  
          _options[d] = val;
          context.background()[d](val);
  
          if (d === 'brightness') {
              context.storage('background-opacity', val);
          }
  
          _selection
              .call(render);
      }
  
  
      function render(selection) {
          var container = selection.selectAll('.display-options-container')
              .data([0]);
  
          var containerEnter = container.enter()
              .append('div')
              .attr('class', 'display-options-container controls-list');
  
          // add slider controls
          var slidersEnter = containerEnter.selectAll('.display-control')
              .data(sliders)
              .enter()
              .append('div')
              .attr('class', function(d) { return 'display-control display-control-' + d; });
  
          slidersEnter
              .append('h5')
              .text(function(d) { return t('background.' + d); })
              .append('span')
              .attr('class', function(d) { return 'display-option-value display-option-value-' + d; });
  
          slidersEnter
              .append('input')
              .attr('class', function(d) { return 'display-option-input display-option-input-' + d; })
              .attr('type', 'range')
              .attr('min', minVal)
              .attr('max', maxVal)
              .attr('step', '0.05')
              .on('input', function(d) {
                  var val = d3_select(this).property('value');
                  updateValue(d, val);
              });
  
          slidersEnter
              .append('button')
              .attr('title', t('background.reset'))
              .attr('class', function(d) { return 'display-option-reset display-option-reset-' + d; })
              .on('click', function(d) {
                  if (d3_event.button !== 0) return;
                  updateValue(d, 1);
              })
              .call(svgIcon('#iD-icon-' + (textDirection === 'rtl' ? 'redo' : 'undo')));
  
  
          // update
          container = containerEnter
              .merge(container);
  
          container.selectAll('.display-option-input')
              .property('value', function(d) { return _options[d]; });
  
          container.selectAll('.display-option-value')
              .text(function(d) { return Math.floor(_options[d] * 100) + '%'; });
  
          container.selectAll('.display-option-reset')
              .classed('disabled', function(d) { return _options[d] === 1; });
  
          // first time only, set brightness if needed
          if (containerEnter.size() && _options.brightness !== 1) {
              context.background().brightness(_options.brightness);
          }
      }
  
  
      function backgroundDisplayOptions(selection) {
          _selection = selection;
  
          selection
              .call(uiDisclosure(context, 'background_display_options', true)
                  .title(t('background.display_options'))
                  .content(render)
              );
      }
  
  
      return backgroundDisplayOptions;
  }
  