'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _griddleConnect = require('../utils/griddleConnect');

var _compose = require('recompose/compose');

var _compose2 = _interopRequireDefault(_compose);

var _withHandlers = require('recompose/withHandlers');

var _withHandlers2 = _interopRequireDefault(_withHandlers);

var _ui = require('@cdb/ui');

var _dataSelectors = require('../selectors/dataSelectors');

var _actions = require('../actions');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var styles = {
  label: { clear: 'both' }
};

var onRequestClose = function onRequestClose() {
  toggleSettings();
};

var ComposedColumnSettings = (0, _compose2.default)((0, _griddleConnect.connect)(function (state) {
  return {
    isVisible: (0, _dataSelectors.isSettingsVisibleSelector)(state),
    visibleColumns: (0, _dataSelectors.visibleColumnPropertiesSelector)(state),
    hiddenColumns: (0, _dataSelectors.hiddenColumnPropertiesSelector)(state)
  };
}, {
  toggleColumn: _actions.toggleColumn,
  toggleSettings: _actions.toggleSettings
}), (0, _withHandlers2.default)({
  onToggle: function onToggle(_ref) {
    var toggleColumn = _ref.toggleColumn;
    return function (columnId) {
      toggleColumn(columnId);
    };
  }
}))(function (_ref2) {
  var visibleColumns = _ref2.visibleColumns,
      hiddenColumns = _ref2.hiddenColumns,
      isVisible = _ref2.isVisible,
      toggleSettings = _ref2.toggleSettings,
      onToggle = _ref2.onToggle;

  return _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(
      _ui.Popover,
      {
        open: isVisible,
        anchorEl: document.getElementById('SettingsToggle'),
        onRequestClose: function onRequestClose() {
          return toggleSettings();
        },
        anchorOrigin: { horizontal: 'left', vertical: 'bottom' },
        targetOrigin: { horizontal: 'left', vertical: 'top' }
      },
      _react2.default.createElement(
        _ui.Menu,
        null,
        Object.keys(visibleColumns).map(function (v) {
          return visibleColumns[v].id != 'griddleKey' ? _react2.default.createElement(_ui.MenuItem, {
            key: visibleColumns[v].id,
            onTouchTap: function onTouchTap() {
              onToggle(visibleColumns[v].id);
            },
            value: visibleColumns[v].id,
            primaryText: visibleColumns[v].title || visibleColumns[v].id,
            checked: true
          }) : null;
        }),
        Object.keys(hiddenColumns).length > 1 && Object.keys(visibleColumns).length > 0 ? _react2.default.createElement(_ui.Divider, null) : null,
        Object.keys(hiddenColumns).map(function (v) {
          return hiddenColumns[v].id != 'griddleKey' ? _react2.default.createElement(_ui.MenuItem, {
            key: hiddenColumns[v].id,
            onTouchTap: function onTouchTap() {
              onToggle(hiddenColumns[v].id);
            },
            value: hiddenColumns[v].id,
            primaryText: hiddenColumns[v].title || hiddenColumns[v].id
          }) : null;
        })
      )
    )
  );
});

exports.default = ComposedColumnSettings;