'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.MultiCrops = 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 _ramda = require('ramda');

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _shortid = require('shortid');

var _shortid2 = _interopRequireDefault(_shortid);

var _Crop = require('./Crop');

var _Crop2 = _interopRequireDefault(_Crop);

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

var isValidPoint = function isValidPoint() {
    var point = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    var strictNumber = function strictNumber(number) {
        return (0, _ramda.both)((0, _ramda.is)(Number), (0, _ramda.complement)((0, _ramda.equals)(NaN)))(number);
    };
    return strictNumber(point.x) && strictNumber(point.y);
};

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

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

        var _this = (0, _possibleConstructorReturn3['default'])(this, (MultiCrops.__proto__ || Object.getPrototypeOf(MultiCrops)).apply(this, arguments));

        _this.drawingIndex = -1;
        _this.pointA = {};
        _this.id = _shortid2['default'].generate();
        _this.renderCrops = function (props) {
            var indexedMap = (0, _ramda.addIndex)(_ramda.map);
            return indexedMap(function (coor, index) {
                return _react2['default'].createElement(_Crop2['default']
                // improve performance when delet crop in middle array
                , (0, _extends3['default'])({ key: coor.id || index, index: index, coordinate: coor }, props));
            })(props.coordinates);
        };
        _this.getCursorPosition = function (e) {
            var _this$container$getBo = _this.container.getBoundingClientRect(),
                left = _this$container$getBo.left,
                top = _this$container$getBo.top;

            return {
                x: e.clientX - left,
                y: e.clientY - top
            };
        };
        _this.handleMouseDown = function (e) {
            var coordinates = _this.props.coordinates;

            if (e.target === _this.img || e.target === _this.container) {
                var _this$getCursorPositi = _this.getCursorPosition(e),
                    x = _this$getCursorPositi.x,
                    y = _this$getCursorPositi.y;

                _this.drawingIndex = coordinates.length;
                _this.pointA = { x: x, y: y };
                _this.id = _shortid2['default'].generate();
            }
        };
        _this.handleMouseMove = function (e) {
            var _this$props = _this.props,
                onDraw = _this$props.onDraw,
                onChange = _this$props.onChange,
                coordinates = _this$props.coordinates;
            var pointA = _this.pointA;

            if (isValidPoint(pointA)) {
                var pointB = _this.getCursorPosition(e);
                // get the drawing coordinate
                var coordinate = {
                    x: Math.min(pointA.x, pointB.x),
                    y: Math.min(pointA.y, pointB.y),
                    width: Math.abs(pointA.x - pointB.x),
                    height: Math.abs(pointA.y - pointB.y),
                    id: _this.id
                };
                var nextCoordinates = (0, _ramda.clone)(coordinates);
                nextCoordinates[_this.drawingIndex] = coordinate;
                if ((0, _ramda.is)(Function, onDraw)) {
                    onDraw(coordinate, _this.drawingIndex, nextCoordinates);
                }
                if ((0, _ramda.is)(Function, onChange)) {
                    onChange(coordinate, _this.drawingIndex, nextCoordinates);
                }
            }
        };
        _this.handlMouseUp = function () {
            _this.pointA = {};
        };
        return _this;
    }

    (0, _createClass3['default'])(MultiCrops, [{
        key: 'render',
        value: function render() {
            var _this2 = this;

            var _props = this.props,
                src = _props.src,
                width = _props.width,
                height = _props.height,
                onLoad = _props.onLoad;
            // const { clicked } = this.state

            return _react2['default'].createElement(
                'div',
                { style: {
                        display: 'inline-block',
                        position: 'relative'
                    }, onMouseDown: this.handleMouseDown, onMouseMove: this.handleMouseMove, onMouseUp: this.handlMouseUp, ref: function ref(container) {
                        return _this2.container = container;
                    } },
                _react2['default'].createElement('img', { ref: function ref(img) {
                        return _this2.img = img;
                    }, src: src, width: width, height: height, onLoad: onLoad, alt: '', draggable: false }),
                this.renderCrops(this.props)
            );
        }
    }]);
    return MultiCrops;
}(_react.Component);

var string = _propTypes2['default'].string,
    arrayOf = _propTypes2['default'].arrayOf,
    number = _propTypes2['default'].number,
    func = _propTypes2['default'].func;

MultiCrops.propTypes = {
    coordinates: arrayOf(_Crop.coordinateType),
    src: string,
    width: number,
    height: number,
    onDraw: func,
    onChange: func,
    onLoad: func
};
MultiCrops.defaultProps = {
    coordinates: [],
    src: ''
};
exports.MultiCrops = MultiCrops;