'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.rightTextStyle = exports.leftTextStyle = undefined;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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 _sharedStyle = require('../../shared-style');

var SharedStyle = _interopRequireWildcard(_sharedStyle);

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

var _reactModal = require('react-modal');

var _reactModal2 = _interopRequireDefault(_reactModal);

var _export = require('../../actions/export');

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

var _export2 = require('../../class/export');

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 _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 TopBarStyle = {
  position: 'absolute',
  top: 0,
  lineHeight: '14px',
  fontSize: '12px',
  color: SharedStyle.COLORS.white,
  backgroundColor: "#6F8E71",
  padding: '3px 1em',
  margin: 0,
  boxSizing: 'border-box',
  cursor: 'default',
  userSelect: 'none',
  zIndex: '9001',
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center'
};

var leftTextStyle = exports.leftTextStyle = {
  position: 'relative',
  float: 'left',
  padding: '0 1em',
  display: 'flex',
  justifyContent: 'flex-start',
  alignItems: 'center',
  height: '100%'

};

var rightTextStyle = exports.rightTextStyle = {
  position: 'relative',
  borderLeft: '1px solid #FFF',
  float: 'right',
  padding: '0 1em',
  display: 'inline-block'
};

var coordStyle = {
  display: 'inline-block',
  margin: 0,
  padding: 0,
  marginLeft: 12
};

var customStyles = {
  content: {
    top: '24%',
    minWidth: 360,
    width: '45%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    marginRight: '-50%',
    transform: 'translate(-50%, -50%)',
    padding: 0
  },
  overlay: {
    backgroundColor: 'rgba(221, 221, 221, 0.75)'
  }
};

var modalHeader = {
  padding: 12,
  display: 'flex',
  justifyContent: 'space-between',
  borderBottom: '2px solid lightgray'
};
var inputItem = {
  margin: 5,
  display: 'flex',
  alignItems: 'center'

};

var modalContent = {
  borderBottom: '2px solid lightgray',
  padding: 18, paddingBottom: 54

};
var modalFooter = {
  padding: 12,
  display: 'flex',
  justifyContent: 'flex-end',
  alignItems: 'center'
};

var chooseCamera = {
  width: 124,
  padding: 3,
  borderRadius: 3
};

var buttonItem = {
  padding: '6px 15px',
  border: 'none',
  color: 'white',
  marginRight: 10,
  borderRadius: 3
};
var tableSearchStyle = { width: '100%' };
var searchIconStyle = { fontSize: '1.5em' };

_reactModal2.default.setAppElement('#app');

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

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

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

    _this.state = { modalIsOpen: false, location: '', floorplan: '', ifNew: false, isFirst: true, btnEnable: false };
    _this.checkSavedOrNot.bind(_this);
    return _this;
  }

  _createClass(TopBar, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var state = this.props.state;
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      var state = this.props.state;
      var _state = this.state,
          location = _state.location,
          floorplan = _state.floorplan;


      if ((location != state.get("location") || floorplan != state.get("floor")) && this.state.isFirst) {
        this.setState({ location: state.get("location"), floorplan: state.get("floor"), isFirst: false });
        this.checkSavedOrNot(state.get("floor"), this);
      }
    }
  }, {
    key: 'openEditLocation',
    value: function openEditLocation() {
      console.log("Eidt location");
      this.setState({ modalIsOpen: true });
    }
  }, {
    key: 'closeModal',
    value: function closeModal() {
      this.setState({ modalIsOpen: false });
    }
  }, {
    key: 'updateValues',
    value: function updateValues(key, e) {

      var state = this.state;
      state[key] = e.target.value;
      this.setState(state);

      if (key == "floorplan" && state[key].length == 36) {
        this.checkSavedOrNot(state[key], this);
      } else {
        this.setState({ btnEnable: false });
      }
    }
  }, {
    key: 'checkSavedOrNot',
    value: function checkSavedOrNot(floor_id, that, loadData) {
      var projectActions = this.context.projectActions;


      this.setState({ ifNew: false, btnEnable: true });

      fetch('https://dev.api.artishok.io/reactor/admin/floor/' + floor_id).then(function (response) {
        return response.json();
      }).then(function (data) {
        if (data.id) {
          that.setState({ ifNew: true });
          if (loadData) {
            that.saveLocationFloor();

            console.log("respone : data : ", data);
            projectActions.loadProject(data["metadata"]);
          }
        }
      }).catch(function (err) {
        console.log("api get error : ", err);
      });
    }
  }, {
    key: 'selCamera',
    value: function selCamera(e) {
      var projectActions = this.context.projectActions;

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

      projectActions.setLocation(this.state.location);
      projectActions.setFloor(this.state.floorplan);
      this.setState({ modalIsOpen: false });

      if (e) e.preventDefault();
    }
  }, {
    key: 'createFloor',
    value: function createFloor() {
      console.log("create floor : ");

      var state = this.props.state;
      var _state2 = this.state,
          floorplan = _state2.floorplan,
          location = _state2.location;


      state = _export2.Project.unselectAll(state).updatedState;
      var saveData = state.get('scene').toJS();
      saveData.floor = floorplan;
      saveData.location = location;
      var that = this;

      var data = {
        "name": "Create Floor Plan",
        "id": "2b342079-4ad6-40c5-a967-c5d04affcc51",
        "description": "First floor, reception, accountant and HR",
        "metadata": {},
        "location_id": "3815d31f-954e-42df-8f9e-42a56541f9a0"
      };

      data.id = floorplan;
      data.metadata = saveData;

      fetch('https://dev.api.artishok.io/reactor/admin/floor', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
      }).then(function (response) {
        return response.json();
      }).then(function (data) {
        console.log("respone : data : ", data);
        that.saveLocationFloor();
        that.setState({ ifNew: true });
      }).catch(function (err) {
        console.log("api call error : ", err);
      });
    }
  }, {
    key: 'updateFloor',
    value: function updateFloor() {
      var state = this.props.state;
      var _state3 = this.state,
          floorplan = _state3.floorplan,
          location = _state3.location;
      var projectActions = this.context.projectActions;


      state = _export2.Project.unselectAll(state).updatedState;
      var saveData = state.get('scene').toJS();
      saveData.floor = floorplan;
      saveData.location = location;
      var that = this;

      var data = {
        "name": "Update Floor Plan",
        "id": "2b342079-4ad6-40c5-a967-c5d04affcc51",
        "description": "First floor, reception, accountant and HR",
        "metadata": {},
        "location_id": "3815d31f-954e-42df-8f9e-42a56541f9a0"
      };

      data.id = floorplan;
      data.metadata = saveData;

      fetch('https://dev.api.artishok.io/reactor/admin/floor/2b342079-4ad6-40c5-a967-c5d04affcc51', {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
      }).then(function (response) {
        return response.json();
      }).then(function (data) {
        console.log("respone : data : ", data);
        that.saveLocationFloor();
      }).catch(function (err) {
        console.log("api call error : ", err);
      });
    }
  }, {
    key: 'loadFloor',
    value: function loadFloor() {
      console.log("load floor");
      this.checkSavedOrNot(this.state.floorplan, this, true);
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          globalState = _props.state,
          width = _props.width,
          height = _props.height;


      return _react2.default.createElement(
        'div',
        { style: _extends({}, TopBarStyle, { width: width, height: height }) },
        _react2.default.createElement(
          'div',
          { style: leftTextStyle },
          _react2.default.createElement(
            'div',
            { title: 'Location ID', style: coordStyle },
            'Location : ',
            this.state.location
          ),
          _react2.default.createElement(
            'div',
            { title: 'Floor ID', style: coordStyle },
            'Floor : ',
            this.state.floorplan
          ),
          _react2.default.createElement(_md.MdEdit, { style: (coordStyle, { fontSize: 15, marginLeft: 16, cursor: 'pointer' }), onClick: this.openEditLocation.bind(this) })
        ),
        _react2.default.createElement(
          'div',
          null,
          _react2.default.createElement(
            'table',
            { style: tableSearchStyle },
            _react2.default.createElement(
              'tbody',
              null,
              _react2.default.createElement(
                'tr',
                null,
                _react2.default.createElement(
                  'td',
                  { style: { width: 24 } },
                  _react2.default.createElement(_md.MdCamera, { style: searchIconStyle })
                ),
                _react2.default.createElement(
                  'td',
                  null,
                  _react2.default.createElement(
                    'select',
                    { style: chooseCamera, onChange: this.selCamera.bind(this), value: globalState.get("camera") },
                    _constants.CAMERA_TYPE.map(function (item, index) {
                      return _react2.default.createElement(
                        'option',
                        { value: item, key: index },
                        item
                      );
                    })
                  )
                )
              )
            )
          )
        ),
        _react2.default.createElement(
          _reactModal2.default,
          {
            isOpen: this.state.modalIsOpen,
            onRequestClose: this.closeModal.bind(this),
            style: customStyles,
            contentLabel: 'Example Modal'
          },
          _react2.default.createElement(
            'div',
            null,
            _react2.default.createElement(
              'div',
              { style: modalHeader },
              _react2.default.createElement(
                'label',
                null,
                'Location and Floor Plan'
              ),
              _react2.default.createElement(
                'label',
                { onClick: this.closeModal.bind(this) },
                _react2.default.createElement(_md.MdClose, null)
              )
            ),
            _react2.default.createElement(
              'div',
              { style: modalContent },
              _react2.default.createElement(
                'div',
                { style: inputItem },
                _react2.default.createElement(
                  'label',
                  { style: { width: "30%" } },
                  'Location ID :'
                ),
                _react2.default.createElement('input', { type: 'text', style: { margin: 1, width: '42%', border: '2px solid grey', height: 30, borderRadius: 5 }, value: this.state.location, onChange: this.updateValues.bind(this, 'location') })
              ),
              _react2.default.createElement('br', null),
              _react2.default.createElement(
                'div',
                { style: inputItem },
                _react2.default.createElement(
                  'label',
                  { style: { width: "30%" } },
                  'FloorPlan ID :'
                ),
                _react2.default.createElement('input', { type: 'text', style: { margin: 1, width: '42%', border: '2px solid grey', height: 30, borderRadius: 5 }, value: this.state.floorplan, onChange: this.updateValues.bind(this, 'floorplan') })
              )
            ),
            _react2.default.createElement(
              'div',
              { style: modalFooter },
              this.state.ifNew && _react2.default.createElement(
                'button',
                { style: _extends({}, buttonItem, { background: 'orangered' }), disabled: !this.state.btnEnable, onClick: this.loadFloor.bind(this) },
                'Load & Clear'
              ),
              this.state.ifNew ? _react2.default.createElement(
                'button',
                { style: _extends({}, buttonItem, { background: '#6F8E71' }), disabled: !this.state.btnEnable, onClick: this.updateFloor.bind(this) },
                'Update'
              ) : _react2.default.createElement(
                'button',
                { style: _extends({}, buttonItem, { background: 'steelblue' }), disabled: !this.state.btnEnable, onClick: this.createFloor.bind(this) },
                'Create'
              ),
              _react2.default.createElement(
                'button',
                { style: _extends({}, buttonItem, { background: 'grey' }), onClick: this.closeModal.bind(this) },
                'Cancel'
              )
            )
          )
        )
      );
    }
  }]);

  return TopBar;
}(_react.Component);

exports.default = TopBar;


TopBar.propTypes = {
  state: _propTypes2.default.object.isRequired,
  footerbarComponents: _propTypes2.default.array.isRequired,
  width: _propTypes2.default.number.isRequired,
  height: _propTypes2.default.number.isRequired,
  softwareSignature: _propTypes2.default.string
};

TopBar.contextTypes = {
  projectActions: _propTypes2.default.object.isRequired,
  viewer2DActions: _propTypes2.default.object.isRequired,
  viewer3DActions: _propTypes2.default.object.isRequired,
  linesActions: _propTypes2.default.object.isRequired,
  holesActions: _propTypes2.default.object.isRequired,
  itemsActions: _propTypes2.default.object.isRequired,
  translator: _propTypes2.default.object.isRequired
};