pinturnUnitix

/* eslint-disable no-undef */
import { useRef } from 'react';
import '@pqina/pintura/pintura.css';
import pintura from '@pqina/pintura/pintura.module.css';
// react-pintura
import { PinturaEditor } from '@pqina/react-pintura';
// pintura
import {
  locale_en_gb,
  createDefaultImageReader,
  createDefaultImageWriter,
  createDefaultShapePreprocessor,

  // plugins
  setPlugins,
  plugin_annotate,
  // plugin_decorate,
  plugin_annotate_locale_en_gb,
  plugin_decorate_locale_en_gb,
  markup_editor_defaults,
  markup_editor_locale_en_gb,
} from '@pqina/pintura';
import {
  uploadFileToServerAndChangeName,
  uploadShapeBackgroundImage,
} from './actions/file';
import { templateFileUrl } from './utils';

setPlugins(plugin_annotate);

const editorDefaults = {
  imageReader: createDefaultImageReader({
    // Fix image orientation
    orientImage: true,

    // Disable output prop filter
    outputProps: [],

    // Set request properties
    request: {
      credentials: 'omit',
    },
  }),
  imageWriter: createDefaultImageWriter(),
  shapePreprocessor: createDefaultShapePreprocessor(),
  ...markup_editor_defaults,
  locale: {
    ...locale_en_gb,
    ...markup_editor_locale_en_gb,
    // ...plugin_decorate_locale_en_gb,
    ...plugin_annotate_locale_en_gb,
  },
};

interface ClientFileAndObjectId {
  file: any;
  objectId: string;
}

interface Props {
  clientFiles: any[];
  draftTemplate: any;
  editDraftTemplate: (merchiFile: any) => void;
  isActive: boolean;
  setClientFiles: (clientFileAndObjectId: ClientFileAndObjectId[]) => void;
}

export default function ImageEditor({
  clientFiles,
  draftTemplate,
  editDraftTemplate,
  isActive,
  setClientFiles,
}: Props) {
  const editorRef = useRef(null);
  const { file, name } = draftTemplate;
  const handleButtonClick = async () => {
    (editorRef as any).current.editor.processImage().
      then(async (imageWriterResult: any) => {
        const { dest } = imageWriterResult;
        const r = await uploadFileToServerAndChangeName(dest, name);
        const fileJson = await r.json();
        editDraftTemplate(fileJson.file);
      });
  };
  return (
    <>
      {isActive &&
        <>
          <PinturaEditor
            ref={editorRef}
            {...editorDefaults}
            annotateActiveTool='preset'
            annotateEnableSelectImagePreset={true}
            annotateEnableButtonFlipVertical={true}
            stickerEnableSelectImagePreset={true}
            className={pintura.pintura}
            enableDropImage={true}
            enableButtonExport={false}
            enablePasteImage={true}
            enableBrowseImage={true}
            enableZoom={false}
            src={templateFileUrl(draftTemplate)}
            handleEvent={async (type, detail) => {
              if (type === 'addshape' && detail.backgroundImage) {
                // When files are added to the canvas we save them to
                // client files which will be saved to job.clientFiles
                const r = await uploadShapeBackgroundImage(detail);
                const fileJson = await r.json();
                clientFiles.push({file: fileJson, objectId: detail.id})
                setClientFiles([...clientFiles]);
              }
              if (type === 'removeshape') {
                const cF: ClientFileAndObjectId[]= clientFiles.filter(
                  (f: ClientFileAndObjectId) => f.objectId !== detail.id
                );
                setClientFiles(cF);
              }
            }}
            onProcess={async ({ dest }: any) => {
              const r = await uploadFileToServerAndChangeName(dest, name);
              const fileJson = await r.json();
              editDraftTemplate(fileJson);
            }}
            imageCropMaxSize={{height: file.height, width: file.width}}
          />
          <div style={{display: 'flex'}}>
            <button
              className='btn btn-primary btn-lg ml-auto'
              onClick={handleButtonClick}
              style={{margin: '0 auto'}}
            >
              Save Customisation
            </button>
          </div>
        </>
      }
    </>
  );
}