{{- /*gotype: crud-generator/html_components.CropImage*/ -}}
{{ define "cropImage" }}
    <div>
        <img id="crop-image" src="{{.ImageUrl}}" alt="Image to crop"
             style="max-width: 100%; display: block">
    </div>
    <div class="py-5">
        <form
                id="cropForm"
                data-hx-encoding="multipart/form-data"
                data-hx-target="#{{.ImageId}}-imageDisplay"
                data-hx-push-url="false"
                data-hx-put="{{ .SaveUrl}}"
        >
            <input type="file" name="image" id="imageInput" class="hidden">
            <button type="submit" id="cropTrigger" class="hidden"></button>
            <button id="save" {{template "buttonStyle"}} type="button"
            >
                Save
            </button>
        </form>
        <button id="rotate" {{template "buttonStyle"}} type="button">Rotate</button>
        <button {{template "buttonStyle"}} type="button"
                                           data-hx-target="#{{.ImageId}}-imageDisplay"
                                           data-hx-push-url="false"
                                           data-hx-get="{{ .CancelUrl}}"
        >Cancel
        </button>
        <progress id="cropProgress" value="0" max="100" style="width: 100%"></progress>
    </div>
    <script>
        (() => {
            const image = document.getElementById('crop-image');
            const cropper = new Cropper(image, {
                rotatable: true,
                crop(event) {
                },
            });
            document.getElementById('rotate').addEventListener('click', function () {
                image.cropper.rotate(90);
            });

            htmx.on('#cropForm', 'htmx:xhr:progress', function (evt) {
                let progressValue = evt.detail.loaded / evt.detail.total * 100;
                htmx.find('#cropProgress').setAttribute('value', progressValue)
            });

            htmx.on('body', 'htmx:afterSwap', function (evt) {
                if (evt.target.tagName.toLowerCase() !== 'body') {
                    return
                }
                document.querySelectorAll('.crop-image').forEach((img) => {
                    const originalSource = img.getAttribute('data-original-source')
                    img.src = originalSource + '&t=' + new Date().getTime()
                });
            });

            document.getElementById('save').addEventListener('click', function (evt) {
                evt.preventDefault()
                const canvas = cropper.getCroppedCanvas();
                canvas.toBlob((blob) => {
                    // https://stackoverflow.com/a/66466855
                    const file = new File([blob], 'image.jpeg', {type: 'image/jpeg'});
                    const container = new DataTransfer();
                    container.items.add(file);
                    document.getElementById('imageInput').files = container.files
                    document.getElementById('cropTrigger').click()
                }, 'image/jpeg');
            });
        })()
    </script>
{{end}}