'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _ramda = require('ramda');

var _interactjs = require('interactjs');

var _interactjs2 = _interopRequireDefault(_interactjs);

var _Icons = require('./Icons');

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

var Crop = function (_Component) {
    (0, _inherits3['default'])(Crop, _Component);

    function Crop() {
        (0, _classCallCheck3['default'])(this, Crop);

        // shouldComponentUpdate(nextProps) {
        //   // reduce uncessary update
        //   return !equals(nextProps.coordinate.inputVal, this.state.inputVal)||!equals(nextProps.coordinate, this.props.coordinate)
        //     || (nextProps.index !== this.props.index)
        // }
        var _this = (0, _possibleConstructorReturn3['default'])(this, (Crop.__proto__ || Object.getPrototypeOf(Crop)).apply(this, arguments));

        _this.handleResizeMove = function (e) {
            var _this$props = _this.props,
                index = _this$props.index,
                coordinate = _this$props.coordinate,
                _this$props$coordinat = _this$props.coordinate,
                x = _this$props$coordinat.x,
                y = _this$props$coordinat.y,
                coordinates = _this$props.coordinates,
                onResize = _this$props.onResize,
                onChange = _this$props.onChange,
                onSave = _this$props.onSave;
            var _e$rect = e.rect,
                width = _e$rect.width,
                height = _e$rect.height;
            var _e$deltaRect = e.deltaRect,
                left = _e$deltaRect.left,
                top = _e$deltaRect.top;

            var nextCoordinate = (0, _extends3['default'])((0, _extends3['default'])({}, coordinate), { x: x + left, y: y + top, width: width, height: height });
            var nextCoordinates = (0, _ramda.update)(index, nextCoordinate)(coordinates);
            if ((0, _ramda.is)(Function, onResize)) {
                onResize(nextCoordinate, index, nextCoordinates);
            }
            if ((0, _ramda.is)(Function, onChange)) {
                onChange(nextCoordinate, index, nextCoordinates);
            }
        };
        _this.handleDragMove = function (e) {
            var _this$props2 = _this.props,
                index = _this$props2.index,
                coordinate = _this$props2.coordinate,
                _this$props2$coordina = _this$props2.coordinate,
                x = _this$props2$coordina.x,
                y = _this$props2$coordina.y,
                coordinates = _this$props2.coordinates,
                onDrag = _this$props2.onDrag,
                onChange = _this$props2.onChange;
            var dx = e.dx,
                dy = e.dy;

            var nextCoordinate = (0, _extends3['default'])((0, _extends3['default'])({}, coordinate), { x: x + dx, y: y + dy });
            var nextCoordinates = (0, _ramda.update)(index, nextCoordinate)(coordinates);
            if ((0, _ramda.is)(Function, onDrag)) {
                onDrag(nextCoordinate, index, nextCoordinates);
            }
            if ((0, _ramda.is)(Function, onChange)) {
                onChange(nextCoordinate, index, nextCoordinates);
            }
        };
        _this.handleDelete = function () {
            var _this$props3 = _this.props,
                index = _this$props3.index,
                coordinate = _this$props3.coordinate,
                onDelete = _this$props3.onDelete,
                coordinates = _this$props3.coordinates;

            var nextCoordinates = (0, _ramda.remove)(index, 1)(coordinates);
            if ((0, _ramda.is)(Function, onDelete)) {
                onDelete(coordinate, index, nextCoordinates);
            }
        };
        _this.state = {
            inputVal: _this.props.coordinate && _this.props.coordinate.inputVal || ''
        };
        _this.handleSave = function () {
            var _this$props4 = _this.props,
                coordinate = _this$props4.coordinate,
                _this$props4$coordina = _this$props4.coordinate,
                x = _this$props4$coordina.x,
                y = _this$props4$coordina.y,
                coordinates = _this$props4.coordinates,
                index = _this$props4.index,
                onSave = _this$props4.onSave;

            var nextCoordinate = (0, _extends3['default'])((0, _extends3['default'])({}, coordinate), { x: x, y: y, inputVal: _this.state.inputVal });
            var nextCoordinates = (0, _ramda.update)(index, nextCoordinate)(coordinates);
            onSave && onSave(coordinate, index, nextCoordinates);
            (0, _interactjs2['default'])(_this.crop).unset();
        };
        return _this;
    }

    (0, _createClass3['default'])(Crop, [{
        key: 'componentDidMount',
        value: function componentDidMount() {
            (0, _interactjs2['default'])(this.crop).draggable({}).resizable({
                edges: {
                    left: true, right: true, bottom: true, top: true
                }
            }).on('dragmove', this.handleDragMove).on('resizemove', this.handleResizeMove);
        }
    }, {
        key: 'componentWillUnmount',
        value: function componentWillUnmount() {
            (0, _interactjs2['default'])(this.crop).unset();
        }
    }, {
        key: 'render',
        value: function render() {
            var _this2 = this;

            var _props = this.props,
                coordinate = _props.coordinate,
                index = _props.index,
                onSave = _props.onSave;

            return _react2['default'].createElement(
                'div',
                { style: Crop.cropStyle(coordinate), ref: function ref(crop) {
                        return _this2.crop = crop;
                    } },
                _react2['default'].createElement(_Icons.NumberIcon, { number: index + 1 }),
                _react2['default'].createElement(_Icons.DeleteIcon, { onClick: this.handleDelete }),
                _react2['default'].createElement('input', { value: this.state.inputVal, onChange: function onChange(e) {
                        _this2.setState({ inputVal: e.target.value });
                    }, style: { width: '100%' } }),
                _react2['default'].createElement(
                    'button',
                    { onClick: this.handleSave.bind(this) },
                    'save'
                )
            );
        }
    }]);
    return Crop;
}(_react.Component);

Crop.cropStyle = function (coordinate) {
    var x = coordinate.x,
        y = coordinate.y,
        width = coordinate.width,
        height = coordinate.height;

    return {
        // border: '1px dotted rgba(153,153,153,1)',
        // background: 'rgba(153,153,153,0.3)',
        display: 'inline-block',
        position: 'absolute',
        width: width,
        height: height,
        top: y,
        left: x,
        boxShadow: '0 0 6px #000',
        background: '#8c8c8c',
        opacity: 0.6
    };
};
var coordinateType = exports.coordinateType = _propTypes2['default'].shape({
    x: _propTypes2['default'].number.isRequired,
    y: _propTypes2['default'].number.isRequired,
    width: _propTypes2['default'].number.isRequired,
    height: _propTypes2['default'].number.isRequired
});
Crop.propTypes = {
    coordinate: coordinateType.isRequired,
    index: _propTypes2['default'].number.isRequired,
    onResize: _propTypes2['default'].func,
    onDrag: _propTypes2['default'].func,
    onDelete: _propTypes2['default'].func,
    onChange: _propTypes2['default'].func,
    coordinates: _propTypes2['default'].array,
    onSave: _propTypes2['default'].func
};
exports['default'] = Crop;