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 PropTypes from 'prop-types';
import { is, update, remove } from 'ramda';
import interact from 'interactjs';
import { DeleteIcon, NumberIcon } from './Icons';

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

    function Crop() {
        _classCallCheck(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 = _possibleConstructorReturn(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 = _extends(_extends({}, coordinate), { x: x + left, y: y + top, width: width, height: height });
            var nextCoordinates = update(index, nextCoordinate)(coordinates);
            if (is(Function, onResize)) {
                onResize(nextCoordinate, index, nextCoordinates);
            }
            if (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 = _extends(_extends({}, coordinate), { x: x + dx, y: y + dy });
            var nextCoordinates = update(index, nextCoordinate)(coordinates);
            if (is(Function, onDrag)) {
                onDrag(nextCoordinate, index, nextCoordinates);
            }
            if (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 = remove(index, 1)(coordinates);
            if (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 = _extends(_extends({}, coordinate), { x: x, y: y, inputVal: _this.state.inputVal });
            var nextCoordinates = update(index, nextCoordinate)(coordinates);
            onSave && onSave(coordinate, index, nextCoordinates);
            interact(_this.crop).unset();
        };
        return _this;
    }

    _createClass(Crop, [{
        key: 'componentDidMount',
        value: function componentDidMount() {
            interact(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() {
            interact(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 React.createElement(
                'div',
                { style: Crop.cropStyle(coordinate), ref: function ref(crop) {
                        return _this2.crop = crop;
                    } },
                React.createElement(NumberIcon, { number: index + 1 }),
                React.createElement(DeleteIcon, { onClick: this.handleDelete }),
                React.createElement('input', { value: this.state.inputVal, onChange: function onChange(e) {
                        _this2.setState({ inputVal: e.target.value });
                    }, style: { width: '100%' } }),
                React.createElement(
                    'button',
                    { onClick: this.handleSave.bind(this) },
                    'save'
                )
            );
        }
    }]);

    return Crop;
}(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
    };
};
export var coordinateType = PropTypes.shape({
    x: PropTypes.number.isRequired,
    y: PropTypes.number.isRequired,
    width: PropTypes.number.isRequired,
    height: PropTypes.number.isRequired
});
Crop.propTypes = {
    coordinate: coordinateType.isRequired,
    index: PropTypes.number.isRequired,
    onResize: PropTypes.func,
    onDrag: PropTypes.func,
    onDelete: PropTypes.func,
    onChange: PropTypes.func,
    coordinates: PropTypes.array,
    onSave: PropTypes.func
};
export default Crop;