import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './style.css';

class Cursorbutton extends Component {
  constructor(props) {
    super(props);

    this.el = document.createElement('div');
  }

  componentDidMount() {
    document.body.appendChild(this.el);
  }

  componentWillUnmount() {
    document.body.removeChild(this.el);
  }

  render() {
    return ReactDOM.createPortal(this.props.children, this.el);
  }
}

export default class Cursor extends Component {
  constructor(props) {
    super(props);

    this.state = {
      x: 0,
      y: 0,
      w: 0,
      h: 0,
      hasCursor: false,
    };
  }

  // componentDidMount() {
  //   this.element.classList.add('custom-cursor-container');

  //   this.element.addEventListener('mouseenter', this.mouseenterHandler);
  //   this.element.addEventListener('mouseleave', this.mouseleaveHandler);
  //   this.element.addEventListener('mousemove', this.mousemoveHandler);
  //   this.element.addEventListener('mousedown', this.mousedownHandler);
  //   this.element.addEventListener('mouseup', this.mouseupHandler);
  // }

  // componentWillUnmount() {
  //   this.element.classList.remove('custom-cursor-container');

  //   this.element.removeEventListener('mouseenter', this.mouseenterHandler);
  //   this.element.removeEventListener('mouseleave', this.mouseleaveHandler);
  //   this.element.removeEventListener('mousemove', this.mousemoveHandler);
  //   this.element.removeEventListener('mousedown', this.mousedownHandler);
  //   this.element.removeEventListener('mouseup', this.mouseupHandler);
  // }

  mouseenterHandler = (e) => {
    this.setState({
      hasCursor: true,
    });
    // this.handle.classList.add('custom-cursor--visible');
  };

  mouseleaveHandler = () => {
    this.handle.classList.remove('custom-cursor--visible');
    this.setState({
      hasCursor: false,
    });
  };

  mousemoveHandler = (e) => {
    // this.handle.style.transform(
    //   'translate(' +
    //     (event.clientX - cursors[widget.config.selector].width) +
    //     'px, ' +
    //     (event.clientY - cursors[widget.config.selector].height) +
    //     'px, 0)',
    // );

    this.setState({
      x: e.clientX,
      y: e.clientY,
    });
    console.log(this.state.x);
  };

  mousedownHandler = (e) => {
    if (e.which === 1) {
      this.handle.classList.add('custom-cursor--active');
    }
  };

  mouseupHandler = (e) => {
    if (e.which === 1) {
      this.handle.classList.remove('custom-cursor--active');
    }
  };

  render() {
    const { children } = this.props;

    return (
      <div
        onMouseOver={this.mouseenterHandler}
        // onMouseOut={this.mouseleaveHandler}
        ref={(el) => (this.element = el)}
        className="cursor"
      >
        {children}
        {this.state.hasCursor && (
          <Cursorbutton>
            <div className="cursor__handle" />
          </Cursorbutton>
        )}
      </div>
    );
  }
}

// ;(function($) {
//   'use strict';

//   var defaults = {
//     selector: 'custom-cursor-plus'
//   };

//   var cursors = {};

//   function CustomCursor(element, options) {
//     var widget = this;
//     widget.config = $.extend(true, {}, defaults, options);
//     widget.element = $(element);

//     if (!$('#' + widget.config.selector).length) {
//       $('<div class="custom-cursor '+ widget.config.selector +'" id="'+ widget.config.selector +'" />').appendTo($('body'));
//       cursors[widget.config.selector] = {};
//       cursors[widget.config.selector].element = $('#' + widget.config.selector);
//       cursors[widget.config.selector].width = $('#' + widget.config.selector).width() / 2;
//       cursors[widget.config.selector].height = $('#' + widget.config.selector).height() / 2;
//     }

//     $.each(widget.config, function(key, value) {
//       if (typeof value === 'function') {
//         widget.element.on(key + '.customCursor', function(event, params) {
//           return value(event, widget.element, cursors[widget.config.selector], params);
//         });
//       }
//     });

//     widget.init(widget);
//   };

//   CustomCursor.prototype.init = function(widget) {
//     widget.element.addClass('custom-cursor-container');

//     function windowKeydownHandler(event) {
//       if (event.keyCode == 13) {
//         cursors[widget.config.selector].element.addClass('custom-cursor--active');
//       }
//     }

//     function windowKeyupHandler(event) {
//       if (event.keyCode == 13) {
//         cursors[widget.config.selector].element.removeClass('custom-cursor--active');
//       }
//     }

//     function mouseenterHandler(event) {
//       cursors[widget.config.selector].element.addClass('custom-cursor--visible');

//       $(window).on('keydown', windowKeydownHandler);
//       $(window).on('keyup', windowKeyupHandler);
//     }

//     function mouseleaveHandler(event) {
//       cursors[widget.config.selector].element.removeClass('custom-cursor--visible');

//       $(window).off('keydown', windowKeydownHandler);
//       $(window).off('keyup', windowKeyupHandler);
//     }

//     function mousemoveHandler(event) {
//       cursors[widget.config.selector].element.css('transform', 'translate3d('+ (event.clientX - cursors[widget.config.selector].width) + 'px, '+ (event.clientY - cursors[widget.config.selector].height) +'px, 0)');
//     }

//     function mousedownHandler(event) {
//       if (event.which == 1) {
//         cursors[widget.config.selector].element.addClass('custom-cursor--active');
//       }
//     }

//     function mouseupHandler(event) {
//       if (event.which == 1) {
//         cursors[widget.config.selector].element.removeClass('custom-cursor--active');
//       }
//     }

//     this.element
//     .on('mouseenter', mouseenterHandler)
//     .on('mouseleave', mouseleaveHandler)
//     .on('mousemove', mousemoveHandler)
//     .on('mousedown', mousedownHandler)
//     .on('mouseup', mouseupHandler);

//     this.element.trigger('created.customCursor');
//   };

//   $.fn.customCursor = function(options) {
//     return this.each(function(index, element) {
//       new CustomCursor(this, options);
//     });
//   };

// })(jQuery);