import _extends from 'babel-runtime/helpers/extends';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import React, { Component } from 'react';
import { both, clone, is, complement, equals, map, addIndex } from 'ramda';
import PropTypes from 'prop-types';
import shortid from 'shortid';
import Crop, { coordinateType } from './Crop';
var isValidPoint = function isValidPoint() {
    var point = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

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

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

    function MultiCrops() {
        _classCallCheck(this, MultiCrops);

        var _this = _possibleConstructorReturn(this, (MultiCrops.__proto__ || Object.getPrototypeOf(MultiCrops)).apply(this, arguments));

        _this.drawingIndex = -1;
        _this.pointA = {};
        _this.id = shortid.generate();
        _this.renderCrops = function (props) {
            var indexedMap = addIndex(map);
            return indexedMap(function (coor, index) {
                return React.createElement(Crop
                // improve performance when delet crop in middle array
                , _extends({ 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 = shortid.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 = clone(coordinates);
                nextCoordinates[_this.drawingIndex] = coordinate;
                if (is(Function, onDraw)) {
                    onDraw(coordinate, _this.drawingIndex, nextCoordinates);
                }
                if (is(Function, onChange)) {
                    onChange(coordinate, _this.drawingIndex, nextCoordinates);
                }
            }
        };
        _this.handlMouseUp = function () {
            _this.pointA = {};
        };
        return _this;
    }

    _createClass(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 React.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;
                    } },
                React.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;
}(Component);

var string = PropTypes.string,
    arrayOf = PropTypes.arrayOf,
    number = PropTypes.number,
    func = PropTypes.func;

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