import React, { Component } from 'react';
import { getUrl2, isDev } from 'educoder'
const $ = window.$

let _url_origin = getUrl2()



/** 
    props 说明：
    imageId 源图片标签的id
    previewId crop后预览dom的id
    imageSrc 源图片src
    width  数字格式
    height 数字格式 
*/
class Cropper extends Component {

  componentDidMount() {
    this.options = {
      aspectRatio: 1,
      preview: this.props.previewId ? `#${this.props.previewId}` : '.img-preview',
    }

    if (!window.Cropper) {
      $.ajaxSetup({
        cache: true
      });
      const _isDev = isDev()
      let _path = _isDev ? 'public' : 'build'

      $('head').append($('<link rel="stylesheet" type="text/css" />')
        .attr('href', `${_url_origin}/react/${_path}/js/cropper/cropper.min.css`));

      $.getScript(
        `${_url_origin}/react/${_path}/js/cropper/cropper.js`,
        (data, textStatus, jqxhr) => {

        });
      $.getScript(
        `${_url_origin}/react/${_path}/js/cropper/html2canvas.min.js`,
        (data, textStatus, jqxhr) => {

        });
    }

    setTimeout(() => {
      const image = document.getElementById(this.props.imageId || '__image');
      this.cropper = new window.Cropper(image, this.options);
    }, 1200)
  }

  renew = (image) => {
    this.cropper && this.cropper.destroy();
    this.cropper = new window.Cropper(image, this.options);

  }
  render() {

    const { width, height, previewId, imageSrc } = this.props;

    return (
      <div>
        {/* This rule is very important, please do not ignore this! */}
        <style>{`
            .wrapper {
                width: ${ width ? (width + 'px') : '500px'};
                height: ${ height ? (height + 'px') : '500px'};
                border: 1px solid #eee;
            }
            img {
                max-width: 100%; 
            }
            .preview-lg {
                overflow: hidden;
                background-color: #fff;
                border-radius: 50%;
                text-align: center;
            }
        `}</style>
        <div className="wrapper">
          <img id={this.props.imageId || "__image"} src={`${imageSrc}`}></img>
        </div>
        {!previewId && <div id="img-preview" className="img-preview preview-lg" style={{ width: '128px', height: '128px', }}>
        </div>}
      </div>
    );
  }
}

export default Cropper;
