<template>
    <form
        ref="form"
        :action="submitUrl"
        method="post"
        enctype="multipart/form-data"
        class="weightVerify"
        @submit="onSubmit"
    >
        <!-- Targets the specific flagged order this form belongs to -->
        <input type="hidden" name="verification_id" :value="verificationId" />

        <!-- Camera blobs are injected into these inputs on submit -->
        <input type="file" name="front_photo" ref="frontInput" class="weightVerify__fileInput" tabindex="-1" />
        <input type="file" name="side_photo" ref="sideInput" class="weightVerify__fileInput" tabindex="-1" />

        <div class="weightVerify__step" :class="{ 'is-complete': !!frontBlob }">
            <slot name="front-copy"></slot>
            <weight-capture @captured="frontBlob = $event" @cleared="frontBlob = null" />
        </div>

        <div class="weightVerify__step" :class="{ 'is-complete': !!sideBlob }">
            <slot name="side-copy"></slot>
            <weight-capture @captured="sideBlob = $event" @cleared="sideBlob = null" />
        </div>

        <p class="weightVerify__validation" v-if="!bothCaptured">
            Both photos are required before you can submit
        </p>

        <button type="submit" class="button weightVerify__submit" :disabled="!canSubmit">
            {{ submitting ? 'Submitting…' : 'Submit for review' }}
        </button>
    </form>
</template>

<script>
import weightCapture from './weight_capture.vue'

export default {
    name: 'weightVerificationForm',
    components: { weightCapture },
    props: {
        submitUrl: {
            type: String,
            required: true,
        },
        verificationId: {
            type: [Number, String],
            required: true,
        },
    },
    data() {
        return {
            frontBlob: null,
            sideBlob: null,
            submitting: false,
        }
    },
    computed: {
        bothCaptured() {
            return !!this.frontBlob && !!this.sideBlob
        },
        canSubmit() {
            return this.bothCaptured && !this.submitting
        },
    },
    methods: {
        onSubmit(event) {
            if (!this.canSubmit) {
                event.preventDefault()
                return
            }

            this.populateInput(this.$refs.frontInput, this.frontBlob, 'weight-front.jpg')
            this.populateInput(this.$refs.sideInput, this.sideBlob, 'weight-side.jpg')

            this.submitting = true
            // Allow the native form submission to proceed with the populated inputs.
        },

        populateInput(input, blob, filename) {
            const dataTransfer = new DataTransfer()
            dataTransfer.items.add(new File([blob], filename, { type: blob.type || 'image/jpeg' }))
            input.files = dataTransfer.files
        },
    },
}
</script>

<style lang="less">
.weightVerify {
    &__fileInput {
        position: absolute !important;
        left: -9999px !important;
    }

    &__step {
        margin-bottom: 2rem;
    }

    &__validation {
        color: var(--alert_color);
        font-weight: 600;
        margin-bottom: 1rem;
    }

    &__submit[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
    }
}
</style>
