//import "tui-image-editor/dist/tui-image-editor.css";
import { Spin } from "antd";
import * as markerjs2 from "markerjs2";
import React, { useEffect, useRef } from "react";
import { useState } from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
  selectBodyshop,
  selectCurrentUser,
} from "../../redux/user/user.selectors";
import { handleUpload } from "../documents-upload/documents-upload.utility";
import { GenerateSrcUrl } from "../jobs-documents-gallery/job-documents.utility";

const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
  bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});

export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
  const imgRef = useRef(null);
  const [loading, setLoading] = useState(false);
  const markerArea = useRef(null);
  const triggerUpload = async (dataUrl) => {
    setLoading(true);
    handleUpload(
      {
        filename: `${document.key.split("/").pop()}-${Date.now()}.jpg`,
        file: await b64toBlob(dataUrl),
        onSuccess: () => setLoading(false),
        onError: () => setLoading(false),
      },
      {
        bodyshop: bodyshop,
        uploaded_by: currentUser.email,
        jobId: document.jobid,
        //billId: billId,
        tagsArray: ["edited"],
        //callback: callbackAfterUpload,
      }
    );
  };

  useEffect(() => {
    if (imgRef.current !== null) {
      // create a marker.js MarkerArea
      markerArea.current = new markerjs2.MarkerArea(imgRef.current);
      // attach an event handler to assign annotated image back to our image element
      markerArea.current.addCloseEventListener((closeEvent) => {
        console.log("Close Event", closeEvent);
      });

      markerArea.current.addRenderEventListener((dataUrl) => {
        triggerUpload(dataUrl);
      });
      // launch marker.js

      markerArea.current.renderAtNaturalSize = true;
      markerArea.current.renderImageType = "image/jpeg";
      markerArea.current.renderImageQuality = 1;
      //markerArea.current.settings.displayMode = "inline";
      markerArea.current.show();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [imgRef.current, triggerUpload]);

  async function b64toBlob(url) {
    const res = await fetch(url);
    return await res.blob();
  }

  return (
    <div>
      <Spin spinning={loading}>
        <img
          ref={imgRef}
          src={GenerateSrcUrl(document)}
          alt="sample"
          crossOrigin="anonymous"
          style={{ maxWidth: "90vw", maxHeight: "90vh" }}
        />
      </Spin>
    </div>
  );
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(DocumentEditorComponent);