'use strict';

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

var _PanelFilters$context;

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _panel = require('./panel');

var _panel2 = _interopRequireDefault(_panel);

var _constants = require('../../constants');

var _sharedStyle = require('../../shared-style');

var SharedStyle = _interopRequireWildcard(_sharedStyle);

var _md = require('react-icons/md');

var _immutable = require('immutable');

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var VISIBILITY_MODE = {
  MODE_IDLE: _constants.MODE_IDLE, MODE_2D_ZOOM_IN: _constants.MODE_2D_ZOOM_IN, MODE_2D_ZOOM_OUT: _constants.MODE_2D_ZOOM_OUT, MODE_2D_PAN: _constants.MODE_2D_PAN, MODE_3D_VIEW: _constants.MODE_3D_VIEW, MODE_3D_FIRST_PERSON: _constants.MODE_3D_FIRST_PERSON,
  MODE_WAITING_DRAWING_LINE: _constants.MODE_WAITING_DRAWING_LINE, MODE_DRAWING_LINE: _constants.MODE_DRAWING_LINE, MODE_DRAWING_HOLE: _constants.MODE_DRAWING_HOLE, MODE_DRAWING_ITEM: _constants.MODE_DRAWING_ITEM, MODE_DRAGGING_LINE: _constants.MODE_DRAGGING_LINE,
  MODE_DRAGGING_VERTEX: _constants.MODE_DRAGGING_VERTEX, MODE_DRAGGING_ITEM: _constants.MODE_DRAGGING_ITEM, MODE_DRAGGING_HOLE: _constants.MODE_DRAGGING_HOLE, MODE_FITTING_IMAGE: _constants.MODE_FITTING_IMAGE, MODE_UPLOADING_IMAGE: _constants.MODE_UPLOADING_IMAGE,
  MODE_ROTATING_ITEM: _constants.MODE_ROTATING_ITEM
};

var contentArea = {
  padding: '0.25em 1.15em',
  cursor: 'pointer',
  marginBottom: '1em',
  userSelect: 'none'
};

var filterArea = {

  height: 'auto',
  overflowY: 'auto',
  maxHeight: "21em",
  marginTop: '1em'

};

var elementStyle = {
  width: 'auto',
  height: '2.5em',
  margin: '0.25em 0.25em 0 0',
  padding: '0.5em',
  textAlign: 'center',
  display: 'inline-block',
  border: '1px solid #CCC',
  borderRadius: '0.2em'
};

var chooseCamera = {
  width: '80%',
  padding: 3,
  borderRadius: 3
};

var activeAssociate = { float: 'right', marginTop: 12, padding: '6px 12px', background: '#6F8E71', border: 'none', color: 'white' };
var deactiveAssociate = { float: 'right', marginTop: 12, padding: '6px 12px', background: 'gray', border: 'none', color: 'white' };
var tableSearchStyle = { width: '100%', marginTop: '0.8em' };
var searchIconStyle = { fontSize: '1.5em' };
var searchInputStyle = { fontSize: '1em', width: '100%', height: '1em', padding: '1em 0.5em' };
var imgStyle = { width: 36, height: 36, borderRadius: 3 };

var PanelFilters = function (_Component) {
  _inherits(PanelFilters, _Component);

  function PanelFilters(props, context) {
    _classCallCheck(this, PanelFilters);

    var _this = _possibleConstructorReturn(this, (PanelFilters.__proto__ || Object.getPrototypeOf(PanelFilters)).call(this, props, context));

    _this.state = {
      elements: [],
      matchString: '',
      matchedElements: [],
      associate: false,
      categories: [],
      things: [],
      selCat: -1,
      selThing: -1
    };

    return _this;
  }

  _createClass(PanelFilters, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _this2 = this;

      console.log("context loaded : ", this.props);
      fetch('https://dev.api.artishok.io/reactor/admin/thing/categories').then(function (response) {
        return response.json();
      }).then(function (data) {
        console.log("api data : ", data);
        _this2.setState({ categories: data });
      }).catch(function (err) {
        console.log("api get error : ", err);
      });
    }
  }, {
    key: 'tryAssociate',
    value: function tryAssociate(layer, element, e) {
      var _state = this.state,
          associate = _state.associate,
          selCat = _state.selCat,
          selThing = _state.selThing,
          categories = _state.categories,
          things = _state.things;
      var state = this.props.state;
      var sceneActions = this.context.sceneActions;


      console.log("associate toggle : ", associate, selCat, selThing, layer.get("items"), element.get("associated"));
      if (selThing < 0 || selCat < 0) {
        alert("please select category and things for associate.");return;
      }

      var newElement = new Map(element);
      var items = layer.get("items");
      items = new Map(items);
      newElement.set("associated", selThing);
      console.log("updated element : ", newElement, selThing, items);
      items.set(element.get("id"), newElement);

      // items.get(element.get("id")).set(element)
      // sceneActions.setLayerProperties(layer.get("id"), {items})
      // this.setState({associate:  !associate})
      // let url = `https://dev.api.artishok.io/reactor/admin/thing/${things[selThing].id}/floor/${things[selThing].floor_id}`
      // console.log("url : ", url)
      // let method = "get"

      // if(this.state.associate)
      //   method = "get"
      // else
      //   method= "delete"
      // fetch('https://dev.api.artishok.io/reactor/admin/thing/search', {
      //   method: method
      // })
      // .then(response => response.json())
      // .then(data =>{
      //   console.log("api asseociate response: ", data);

      // })
      // .catch(err=>{
      //   console.log("api asseociate error : ", err)
      // })
    }

    // loadFloorPlanFromFile(event){
    //   let {projectActions} = this.context
    //   event.preventDefault();
    //   browserUpload().then((data) => {
    //     console.log("floor plan file : ", data)
    //     // projectActions.loadProject(JSON.parse(data));
    //   });
    // }

  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (this.state.matchString !== '') {
        this.setState({
          matchedElements: {}
        });
      } else {
        this.setState({ elements: [], matchedElements: [] });
      }
    }
  }, {
    key: 'selCamera',
    value: function selCamera(e) {
      var projectActions = this.context.projectActions;

      projectActions.setCamera(e.target.value);
    }
  }, {
    key: 'selCat',
    value: function selCat(e) {
      var _this3 = this;

      this.setState({ selCat: e.target.value });

      fetch('https://dev.api.artishok.io/reactor/admin/thing/search', {
        method: 'post',
        body: JSON.stringify({ "options": {
            "size": 50,
            "page": "0"
          }, type: "Camera" })
      }).then(function (response) {
        return response.json();
      }).then(function (data) {
        console.log("api things data : ", data);
        _this3.setState({ things: data });
      }).catch(function (err) {
        console.log("api call error : ", err);
      });
    }
  }, {
    key: 'selThing',
    value: function selThing(e) {
      this.setState({ selThing: e.target.value });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this4 = this;

      var state = this.props.state;
      var translator = this.context.translator;
      var associate = this.state.associate;


      var componentRenderer = function componentRenderer(element, layer) {
        return _react2.default.createElement(
          _panel2.default,
          { key: element.id, name: 'Artishok Controls', opened: true },
          _react2.default.createElement(
            'div',
            { style: contentArea },
            _react2.default.createElement(
              'table',
              { style: tableSearchStyle },
              _react2.default.createElement(
                'thead',
                null,
                _react2.default.createElement(
                  'tr',
                  null,
                  _react2.default.createElement('td', null),
                  _react2.default.createElement(
                    'td',
                    { style: { fontSize: 14, color: 'lightgreen', paddingBottom: 12 } },
                    'Things'
                  ),
                  _react2.default.createElement('td', null)
                )
              ),
              _react2.default.createElement(
                'tbody',
                null,
                _react2.default.createElement(
                  'tr',
                  null,
                  _react2.default.createElement(
                    'td',
                    { style: { width: '10%' } },
                    _react2.default.createElement(_md.MdFolder, { style: searchIconStyle })
                  ),
                  _react2.default.createElement(
                    'td',
                    null,
                    _react2.default.createElement(
                      'select',
                      { style: chooseCamera, onChange: _this4.selCat.bind(_this4) },
                      _react2.default.createElement(
                        'option',
                        { value: -1, key: -1 },
                        'Category'
                      ),
                      _this4.state.categories.map(function (item, index) {
                        return _react2.default.createElement(
                          'option',
                          { value: index, key: index },
                          item
                        );
                      })
                    )
                  )
                ),
                _react2.default.createElement(
                  'tr',
                  null,
                  _react2.default.createElement(
                    'td',
                    { style: { width: '10%' } },
                    _react2.default.createElement(_md.MdChildFriendly, { style: searchIconStyle })
                  ),
                  _react2.default.createElement(
                    'td',
                    null,
                    _react2.default.createElement(
                      'select',
                      { style: chooseCamera, onChange: _this4.selThing.bind(_this4), value: element.associate },
                      _react2.default.createElement(
                        'option',
                        { value: -1, key: -1 },
                        'Thing'
                      ),
                      _this4.state.things.map(function (item, index) {
                        return _react2.default.createElement(
                          'option',
                          { value: item.id, key: index },
                          item.name
                        );
                      })
                    )
                  )
                ),
                _react2.default.createElement(
                  'tr',
                  null,
                  _react2.default.createElement('td', null),
                  _react2.default.createElement(
                    'td',
                    null,
                    _react2.default.createElement(
                      'div',
                      { style: { width: '80%' } },
                      _react2.default.createElement(
                        'button',
                        { style: associate ? deactiveAssociate : activeAssociate, onClick: _this4.tryAssociate.bind(_this4, layer, element) },
                        associate ? "Deassociate" : "Associate"
                      )
                    )
                  )
                )
              )
            )
          )
        );
      };

      var layerRenderer = function layerRenderer(layer) {
        return (0, _immutable.Seq)().concat(layer.lines, layer.holes, layer.areas, layer.items).filter(function (element) {
          return element.selected;
        }).map(function (element) {
          return componentRenderer(element, layer);
        }).valueSeq();
      };
      return _react2.default.createElement(
        'div',
        null,
        state.scene.layers.valueSeq().map(layerRenderer)
      );
    }
  }]);

  return PanelFilters;
}(_react.Component);

exports.default = PanelFilters;


PanelFilters.propTypes = {
  state: _propTypes2.default.object.isRequired

};

PanelFilters.contextTypes = (_PanelFilters$context = {
  catalog: _propTypes2.default.object.isRequired,
  translator: _propTypes2.default.object.isRequired,
  itemsActions: _propTypes2.default.object.isRequired,
  linesActions: _propTypes2.default.object.isRequired,
  holesActions: _propTypes2.default.object.isRequired,
  projectActions: _propTypes2.default.object.isRequired
}, _defineProperty(_PanelFilters$context, 'translator', _propTypes2.default.object.isRequired), _defineProperty(_PanelFilters$context, 'sceneActions', _propTypes2.default.object.isRequired), _PanelFilters$context);