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; }; }();

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; }

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Panel from './panel';
import { MODE_IDLE, MODE_2D_ZOOM_IN, MODE_2D_ZOOM_OUT, MODE_2D_PAN, MODE_3D_VIEW, MODE_3D_FIRST_PERSON, MODE_WAITING_DRAWING_LINE, MODE_DRAWING_LINE, MODE_DRAWING_HOLE, MODE_DRAWING_ITEM, MODE_DRAGGING_LINE, MODE_DRAGGING_VERTEX, MODE_DRAGGING_ITEM, MODE_DRAGGING_HOLE, MODE_FITTING_IMAGE, MODE_UPLOADING_IMAGE, MODE_ROTATING_ITEM } from '../../constants';
import * as SharedStyle from '../../shared-style';
import { MdSearch, MdCheck, MdSelectAll, MdCamera, MdPlace, MdFileUpload, MdAdd, MdEdit } from 'react-icons/md';
import Button from '../style/button';

var VISIBILITY_MODE = {
  MODE_IDLE: MODE_IDLE, MODE_2D_ZOOM_IN: MODE_2D_ZOOM_IN, MODE_2D_ZOOM_OUT: MODE_2D_ZOOM_OUT, MODE_2D_PAN: MODE_2D_PAN, MODE_3D_VIEW: MODE_3D_VIEW, MODE_3D_FIRST_PERSON: MODE_3D_FIRST_PERSON,
  MODE_WAITING_DRAWING_LINE: MODE_WAITING_DRAWING_LINE, MODE_DRAWING_LINE: MODE_DRAWING_LINE, MODE_DRAWING_HOLE: MODE_DRAWING_HOLE, MODE_DRAWING_ITEM: MODE_DRAWING_ITEM, MODE_DRAGGING_LINE: MODE_DRAGGING_LINE,
  MODE_DRAGGING_VERTEX: MODE_DRAGGING_VERTEX, MODE_DRAGGING_ITEM: MODE_DRAGGING_ITEM, MODE_DRAGGING_HOLE: MODE_DRAGGING_HOLE, MODE_FITTING_IMAGE: MODE_FITTING_IMAGE, MODE_UPLOADING_IMAGE: MODE_UPLOADING_IMAGE,
  MODE_ROTATING_ITEM: 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 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: []
    };
    return _this;
  }

  _createClass(PanelFilters, [{
    key: 'shouldComponentUpdate',
    value: function shouldComponentUpdate(nextProps, nextState) {
      if (this.state.matchString !== nextState.matchString) return true;

      return false;
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (this.state.matchString !== '') {
        this.setState({
          matchedElements: {}
        });
      } else {
        this.setState({ elements: [], matchedElements: [] });
      }
    }
  }, {
    key: 'matcharray',
    value: function matcharray(text) {
      if (text === '') {
        this.setState({
          matchString: '',
          matchedElements: this.state.elements
        });
        return;
      }

      this.setState({
        matchString: text,
        matchedElements: {}
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      return React.createElement(
        Panel,
        { name: this.context.translator.t('Artishok Controls') },
        React.createElement(
          'div',
          { style: contentArea, onWheel: function onWheel(e) {
              return e.stopPropagation();
            } },
          React.createElement(
            'table',
            { style: tableSearchStyle },
            React.createElement(
              'thead',
              null,
              React.createElement(
                'tr',
                null,
                React.createElement('td', null),
                React.createElement(
                  'td',
                  { style: { fontSize: 14, color: 'lightgreen', paddingBottom: 12 } },
                  'Filtered Catalog'
                ),
                React.createElement('td', null)
              )
            ),
            React.createElement(
              'tbody',
              null,
              React.createElement(
                'tr',
                null,
                React.createElement(
                  'td',
                  null,
                  React.createElement(MdSearch, { style: searchIconStyle })
                ),
                React.createElement(
                  'td',
                  null,
                  React.createElement('input', { type: 'text', style: searchInputStyle, onChange: function onChange(e) {
                      _this2.matcharray(e.target.value);
                    }, placeholder: 'Catalog : ' })
                )
              )
            )
          ),
          React.createElement(
            'div',
            { style: filterArea },
            React.createElement(
              'table',
              { style: tableSearchStyle },
              React.createElement(
                'tbody',
                null,
                React.createElement(
                  'tr',
                  null,
                  React.createElement(
                    'td',
                    null,
                    React.createElement('img', { src: require('../../assets/air_conditioner.png'), style: imgStyle })
                  ),
                  React.createElement(
                    'td',
                    null,
                    'Air Conditioner'
                  ),
                  React.createElement(
                    'td',
                    null,
                    React.createElement(MdCheck, { style: searchIconStyle })
                  )
                ),
                React.createElement(
                  'tr',
                  null,
                  React.createElement(
                    'td',
                    null,
                    React.createElement('img', { src: require('../../assets/armchairs.png'), style: imgStyle })
                  ),
                  React.createElement(
                    'td',
                    null,
                    'Air Conditioner'
                  ),
                  React.createElement(
                    'td',
                    null,
                    React.createElement(MdCheck, { style: searchIconStyle })
                  )
                ),
                React.createElement(
                  'tr',
                  null,
                  React.createElement(
                    'td',
                    null,
                    React.createElement('img', { src: require('../../assets/air_conditioner.png'), style: imgStyle })
                  ),
                  React.createElement(
                    'td',
                    null,
                    'Air Conditioner'
                  ),
                  React.createElement(
                    'td',
                    null,
                    React.createElement(MdCheck, { style: searchIconStyle })
                  )
                ),
                React.createElement(
                  'tr',
                  null,
                  React.createElement(
                    'td',
                    null,
                    React.createElement('img', { src: require('../../assets/armchairs.png'), style: imgStyle })
                  ),
                  React.createElement(
                    'td',
                    null,
                    'Air Conditioner'
                  ),
                  React.createElement(
                    'td',
                    null,
                    React.createElement(MdCheck, { style: searchIconStyle })
                  )
                ),
                React.createElement(
                  'tr',
                  null,
                  React.createElement(
                    'td',
                    null,
                    React.createElement('img', { src: require('../../assets/air_conditioner.png'), style: imgStyle })
                  ),
                  React.createElement(
                    'td',
                    null,
                    'Air Conditioner'
                  ),
                  React.createElement(
                    'td',
                    null,
                    React.createElement(MdCheck, { style: searchIconStyle })
                  )
                ),
                React.createElement(
                  'tr',
                  null,
                  React.createElement(
                    'td',
                    null,
                    React.createElement('img', { src: require('../../assets/armchairs.png'), style: imgStyle })
                  ),
                  React.createElement(
                    'td',
                    null,
                    'Air Conditioner'
                  ),
                  React.createElement(
                    'td',
                    null,
                    React.createElement(MdCheck, { style: searchIconStyle })
                  )
                ),
                React.createElement(
                  'tr',
                  null,
                  React.createElement(
                    'td',
                    null,
                    React.createElement('img', { src: require('../../assets/air_conditioner.png'), style: imgStyle })
                  ),
                  React.createElement(
                    'td',
                    null,
                    'Air Conditioner'
                  ),
                  React.createElement(
                    'td',
                    null,
                    React.createElement(MdCheck, { style: searchIconStyle })
                  )
                ),
                React.createElement(
                  'tr',
                  null,
                  React.createElement(
                    'td',
                    null,
                    React.createElement('img', { src: require('../../assets/armchairs.png'), style: imgStyle })
                  ),
                  React.createElement(
                    'td',
                    null,
                    'Air Conditioner'
                  ),
                  React.createElement(
                    'td',
                    null,
                    React.createElement(MdCheck, { style: searchIconStyle })
                  )
                )
              )
            )
          ),
          React.createElement(
            'table',
            { style: tableSearchStyle },
            React.createElement(
              'thead',
              null,
              React.createElement(
                'tr',
                null,
                React.createElement('td', null),
                React.createElement(
                  'td',
                  { style: { fontSize: 14, color: 'lightgreen', paddingBottom: 12 } },
                  'Things'
                ),
                React.createElement('td', null)
              )
            ),
            React.createElement(
              'tbody',
              null,
              React.createElement(
                'tr',
                null,
                React.createElement(
                  'td',
                  { style: { width: '10%' } },
                  React.createElement(MdEdit, { style: searchIconStyle })
                ),
                React.createElement(
                  'td',
                  null,
                  React.createElement('input', { type: 'text', style: chooseCamera, placeholder: 'Things...' })
                )
              )
            )
          ),
          React.createElement(
            'table',
            { style: tableSearchStyle },
            React.createElement(
              'thead',
              null,
              React.createElement(
                'tr',
                null,
                React.createElement('td', null),
                React.createElement(
                  'td',
                  { style: { fontSize: 14, color: 'lightgreen', paddingBottom: 12 } },
                  'Choose Camera'
                ),
                React.createElement('td', null)
              )
            ),
            React.createElement(
              'tbody',
              null,
              React.createElement(
                'tr',
                null,
                React.createElement(
                  'td',
                  { style: { width: '10%' } },
                  React.createElement(MdCamera, { style: searchIconStyle })
                ),
                React.createElement(
                  'td',
                  null,
                  React.createElement(
                    'select',
                    { style: chooseCamera },
                    React.createElement(
                      'option',
                      null,
                      'Camera 1'
                    ),
                    React.createElement(
                      'option',
                      null,
                      'Camera 2'
                    ),
                    React.createElement(
                      'option',
                      null,
                      'Camera 3'
                    ),
                    React.createElement(
                      'option',
                      null,
                      'Camera 4'
                    )
                  )
                )
              )
            )
          ),
          React.createElement(
            'table',
            { style: tableSearchStyle },
            React.createElement(
              'thead',
              null,
              React.createElement(
                'tr',
                null,
                React.createElement('td', null),
                React.createElement(
                  'td',
                  { style: { fontSize: 14, color: 'lightgreen', paddingBottom: 12 } },
                  'Elements'
                ),
                React.createElement('td', null)
              )
            ),
            React.createElement(
              'tbody',
              null,
              React.createElement(
                'tr',
                null,
                React.createElement(
                  'td',
                  { style: { width: '10%' } },
                  React.createElement(MdAdd, { style: searchIconStyle })
                ),
                React.createElement(
                  'td',
                  null,
                  React.createElement(
                    'button',
                    { style: chooseCamera },
                    'Manage'
                  )
                )
              )
            )
          ),
          React.createElement(
            'table',
            { style: tableSearchStyle },
            React.createElement(
              'thead',
              null,
              React.createElement(
                'tr',
                null,
                React.createElement('td', null),
                React.createElement(
                  'td',
                  { style: { fontSize: 14, color: 'lightgreen', paddingBottom: 12 } },
                  'Upload FloorPlan'
                ),
                React.createElement('td', null)
              )
            ),
            React.createElement(
              'tbody',
              null,
              React.createElement(
                'tr',
                null,
                React.createElement(
                  'td',
                  { style: { width: '10%' } },
                  React.createElement(MdFileUpload, { style: searchIconStyle })
                ),
                React.createElement(
                  'td',
                  null,
                  React.createElement(
                    'button',
                    { style: chooseCamera },
                    'Upload'
                  )
                )
              )
            )
          ),
          React.createElement(
            'table',
            { style: tableSearchStyle },
            React.createElement(
              'thead',
              null,
              React.createElement(
                'tr',
                null,
                React.createElement('td', null),
                React.createElement(
                  'td',
                  { style: { fontSize: 14, color: 'lightgreen', paddingBottom: 12 } },
                  'Choose FloorPlan'
                ),
                React.createElement('td', null)
              )
            ),
            React.createElement(
              'tbody',
              null,
              React.createElement(
                'tr',
                null,
                React.createElement(
                  'td',
                  { style: { width: '10%' } },
                  React.createElement(MdSelectAll, { style: searchIconStyle })
                ),
                React.createElement(
                  'td',
                  null,
                  React.createElement(
                    'select',
                    { style: chooseCamera },
                    React.createElement(
                      'option',
                      null,
                      'Floor Plan 1'
                    ),
                    React.createElement(
                      'option',
                      null,
                      'Floor Plan 2'
                    ),
                    React.createElement(
                      'option',
                      null,
                      'Floor Plan 3'
                    ),
                    React.createElement(
                      'option',
                      null,
                      'Floor Plan 4'
                    )
                  )
                )
              )
            )
          )
        )
      );
    }
  }]);

  return PanelFilters;
}(Component);

export default PanelFilters;


PanelFilters.propTypes = {};

PanelFilters.contextTypes = {
  catalog: PropTypes.object.isRequired,
  translator: PropTypes.object.isRequired,
  itemsActions: PropTypes.object.isRequired,
  linesActions: PropTypes.object.isRequired,
  holesActions: PropTypes.object.isRequired,
  projectActions: PropTypes.object.isRequired
};