
import './components/@pqina/pintura/pintura.css';
import { useRef, useState } from 'react';

// react-pintura
import { PinturaEditor } from './components/@pqina/react-pintura';

// pintura
import './components/@pqina/pintura/pintura.css';
import {
    // editor
    locale_en_gb,
    createDefaultImageReader,
    createDefaultImageWriter,
    createDefaultShapePreprocessor,

    // plugins
    setPlugins,
    plugin_crop,
    plugin_crop_locale_en_gb,
    plugin_finetune,
    plugin_finetune_locale_en_gb,
    plugin_finetune_defaults,
    plugin_filter,
    plugin_filter_locale_en_gb,
    plugin_filter_defaults,
    plugin_annotate,
    plugin_annotate_locale_en_gb,
    markup_editor_defaults,
    markup_editor_locale_en_gb,
} from './components/@pqina/pintura';

setPlugins(plugin_crop, plugin_finetune, plugin_filter, plugin_annotate);

const editorDefaults = {
    imageReader: createDefaultImageReader(),
    imageWriter: createDefaultImageWriter(),
    shapePreprocessor: createDefaultShapePreprocessor(),
    ...plugin_finetune_defaults,
    ...plugin_filter_defaults,
    ...markup_editor_defaults,
    locale: {
        ...locale_en_gb,
        ...plugin_crop_locale_en_gb,
        ...plugin_finetune_locale_en_gb,
        ...plugin_filter_locale_en_gb,
        ...plugin_annotate_locale_en_gb,
        ...markup_editor_locale_en_gb,
    },
};

export default function AppImage() {
  const [inlineResult, setInlineResult] = useState("");
  const editorRef = useRef<PinturaEditor>(null);

  return  (
    <div style={{
      height: "80dvh",
      width: "100dvw"
    }}>
        <PinturaEditor
            {...editorDefaults}
            
            src="./image.jpeg"
            ref={editorRef}
            onLoad={() => {

              // not yet set
              if (!editorRef.current) return;

              // Example using editor ref
              const { editor } = editorRef.current;

              // Now we can access properties and methods
              editor.imageCropAspectRatio = 1;
            }}
            onProcess={(res: {dest: File}) => {
                    setInlineResult(URL.createObjectURL(res.dest))
                }
            }
        />

        {inlineResult && <img src={inlineResult} alt="" />}
    </div>
);
}
