import React from 'react';

const pickProps = ["as", "style", "className", "grid", "snap", "bounds", "size", "defaultSize", "minWidth", "minHeight", "maxWidth", "maxHeight", "lockAspectRatio", "lockAspectRatioExtraWidth", "lockAspectRatioExtraHeight", "enable", "handleStyles", "handleClasses", "handleWrapperStyle", "handleWrapperClass", "children", "onResizeStart", "onResize", "onResizeStop", "handleComponent", "scale", "resizeRatio", "snapGap"]

class Resize extends React.Component {
    constructor(props) {
        super(props);
        this.ratio = 1;
        this.resizable = null;
        this.parentLeft = 0;
        this.parentTop = 0;
        this.resizableLeft = 0;
        this.resizableTop = 0;
        this.targetLeft = 0;
        this.targetTop = 0;
        this.state = {
            isResizing: !1,
            width: void 0 === (this.propsSize && this.propsSize.width) ? "auto" : this.propsSize && this.propsSize.width,
            height: void 0 === (this.propsSize && this.propsSize.height) ? "auto" : this.propsSize && this.propsSize.height,
            direction: "right",
            original: {
                x: 0,
                y: 0,
                width: 0,
                height: 0
            },
            backgroundStyle: {
                height: "100%",
                width: "100%",
                backgroundColor: "rgba(0,0,0,0)",
                cursor: "auto",
                opacity: 0,
                position: "fixed",
                zIndex: 9999,
                top: "0",
                left: "0",
                bottom: "0",
                right: "0"
            },
            flexBasis: void 0
        }

        this.appendBase = () => {
            if(!this.resizable || !window) {
                return null
            }
            const parentNode = this.parentNode;
            if(!parentNode) {
                return null;
            }
            const newDiv = window.document.createElement("div");
            newDiv.style.width = "100%"
            newDiv.style.height = "100%"
            newDiv.style.position = "absolute"
            newDiv.style.transform = "scale(0, 0)"
            newDiv.style.left = "0"
            newDiv.style.flex = "0"
            newDiv.classList ? newDiv.classList.add('__resizable_base__'): newDiv.className += "__resizable_base__";
            parentNode.appendChild(newDiv);
        }
    }

    removeBase(child) {
        const parentNode = this.parentNode;
        parentNode && parentNode.removeChild(child)
    }

    ref = (e) => {
        e && (this.resizable = e)
    }

    get parentNode() {
        return this.resizable ? this.resizable.parentNode: null
    }

    get window() {
        return this.resizable && this.resizable.ownerDocument ? this.resizable.ownerDocument.defaultView : null
    }

    get propsSize() {
       return this.props.size || this.props.defaultSize || {
            width: "auto",
            height: "auto"
        };
    }

    get size() {
      let width = 0, height = 0;
      if (this.resizable && this.window) {
          const offsetWidth = this.resizable.offsetWidth
          const offsetHeight = this.resizable.offsetHeight
          const position = this.resizable.style.position;
          "relative" !== position && (this.resizable.style.position = "relative"),
          width = "auto" !== this.resizable.style.width ? this.resizable.offsetWidth : offsetWidth,
          height = "auto" !== this.resizable.style.height ? this.resizable.offsetHeight : offsetHeight,
          this.resizable.style.position = position
      }
      return {
          width: width,
          height: height
      }
    }

    sizeStyle() {
       const size = this.props.size;
       const covertSize = (key) => {
            if (void 0 === this.state[key] || "auto" === this.state[key]) {
                return "auto";
            }
            return this.state[key]
       }
       return {
           width: size && void 0 !== size.width && !this.state.isResizing ? size.width: covertSize("width"),
           height: size && void 0 !== size.height && !this.state.isResizing ? size.height: covertSize("height")
       }
    }

    getParentSize() {

    }

    bindEvents() {

    }

    unbindEvents() {

    }

    componentDidMount() {
        if(this.resizable && this.window) {
            const computedStyle = this.window.getComputedStyle(this.resizable);
            this.setState({
                width: this.state.width || this.size.width,
                height: this.state.height || this.size.height,
                flexBasis: "auto" !== computedStyle.flexBasis ? computedStyle.flexBasis : void 0
            })
        }
    }

    componentWillUnmount() {

    }

    createSizeForCssProperty() {

    }

    calculateNewMaxFromBoundary() {

    }

    calculateNewSizeFromDirection() {

    }

    calculateNewSizeFromAspectRatio() {

    }

    setBoundingClientRect() {

    }

    onResizeStart() {

    }

    onMouseMove() {

    }

    onMouseUp() {

    }

    updateSize() {

    }

    renderResizer() {

    }

    render() {
        const pick = Object.keys(this.props).reduce((item, key) => {
            return -1 !== pickProps.indexOf(key) || (item[key] = this.props[key]), item
        }, {});
        const style = Object.assign(Object.assign(Object.assign({
            position: 'relative',
            userSelect: this.state.isResizing ? "none" : "auto"
        }, this.props.style), this.sizeStyle), {
            maxWidth: this.props.maxWidth,
            maxHeight: this.props.maxWidth,
            minWidth: this.props.minWidth,
            minHeight: this.props.minHeight,
            boxSizing: "border-box",
            flexShrink: 0
        });
        this.state.flexBasis && (style.flexBasis = this.state.flexBasis);
        const Element = this.props.as || "div";
        return (
            <Element {...Object.assign({
                ref: this.ref,
                style: style,
                className: this.props.className
            }, pick)}>
                {
                    this.props.children
                }
            </Element>
        )
    }
}

Resize.defaultProps = {
    as: "div",
    onResizeStart: function() {},
    onResize: function() {},
    onResizeStop: function() {},
    enable: {
        top: !0,
        right: !0,
        bottom: !0,
        left: !0,
        topRight: !0,
        bottomRight: !0,
        bottomLeft: !0,
        topLeft: !0
    },
    style: {},
    grid: [1, 1],
    lockAspectRatio: !1,
    lockAspectRatioExtraWidth: 0,
    lockAspectRatioExtraHeight: 0,
    scale: 1,
    resizeRatio: 1,
    snapGap: 0
}

export default Resize;