<script>
    // svelte filepond
    import FilePond, { registerPlugin } from 'svelte-filepond';
    import FilePondPluginFilePoster from 'filepond-plugin-file-poster';
    import FilePondPluginImageEditor from '@pqina/filepond-plugin-image-editor';
    import 'filepond/dist/filepond.min.css';
    import 'filepond-plugin-file-poster/dist/filepond-plugin-file-poster.min.css';

    // svelte pintura
    import { PinturaEditor, PinturaEditorModal, PinturaEditorOverlay } from '@pqina/svelte-pintura';

    // pintura
    import '@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,

        // filepond
        openEditor,
        processImage,
        createDefaultImageOrienter,
        legacyDataToImageState,
    } from '@pqina/pintura';

    registerPlugin(FilePondPluginFilePoster, FilePondPluginImageEditor);

    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,
        },
    };

    // props
    let inlineResult;

    // modal
    let modalResult;
    let modalVisible = false;

    // overlay
    let overlayVisible = false;
    let overlayResult;
    let overlayImageState;
</script>

<main>
    <h1>Pintura Image Editor</h1>

    <h2>Inline</h2>

    <div style="height:70vh">
        <PinturaEditor
            {...editorDefaults}
            on:load={(e) => console.log('inline load', e.detail)}
            on:process={(e) => (inlineResult = URL.createObjectURL(e.detail.dest))}
            src="image.jpeg"
        />
    </div>

    {#if inlineResult}
        <p>
            <img src={inlineResult} alt="" />
        </p>
    {/if}

    <h2>Modal</h2>

    <p>
        <button on:click={() => (modalVisible = true)}>Open editor</button>
    </p>

    {#if modalVisible}
        <PinturaEditorModal
            {...editorDefaults}
            on:hide={(e) => (modalVisible = false)}
            on:load={(e) => console.log('modal load', e.detail)}
            on:process={(e) => (modalResult = URL.createObjectURL(e.detail.dest))}
            src="image.jpeg"
        />
    {/if}

    {#if modalResult}
        <p>
            <img src={modalResult} alt="" />
        </p>
    {/if}

    <h2>Overlay</h2>

    <p>
        {#if !overlayVisible}
            <button on:click={() => (overlayVisible = true)}>Edit image</button>
        {:else}
            <button on:click={() => (overlayVisible = false)}>Close editor</button>
        {/if}
    </p>

    {#if !overlayVisible}
        <p>
            <img width="512" height="256" src={overlayResult || 'image.jpeg'} alt="" />
        </p>
    {:else}
        <div style="width:512px; height:256px;">
            <PinturaEditorOverlay
                {...editorDefaults}
                on:load={(e) => console.log('overlay load', e.detail)}
                on:process={(e) => {
                    overlayImageState = e.detail.imageState;
                    overlayResult = URL.createObjectURL(e.detail.dest);
                    overlayVisible = false;
                }}
                src="image.jpeg"
                imageState={overlayImageState}
            />
        </div>
    {/if}

    <h2>FilePond</h2>

    <div style="max-width: 20em; padding-bottom: 2em;">
        <FilePond
            server="/api"
            allowMultiple={true}
            imageEditor={{
                // map legacy data objects to new imageState objects
                legacyDataToImageState: legacyDataToImageState,

                // used to create the editor, receives editor configuration, should return an editor instance
                createEditor: openEditor,

                // Required, used for reading the image data
                imageReader: [
                    createDefaultImageReader,
                    {
                        /* optional image reader options here */
                    },
                ],

                // optionally. can leave out when not generating a preview thumbnail and/or output image
                imageWriter: [
                    createDefaultImageWriter,
                    {
                        /* optional image writer options here */
                    },
                ],

                // used to generate poster images, runs an editor in the background
                imageProcessor: processImage,

                // editor options
                editorOptions: {
                    imageOrienter: createDefaultImageOrienter(),
                    ...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,
                    },
                },
            }}
        />
    </div>
</main>

<style global>
    img {
        max-width: 100%;
    }
</style>
