(async function () {

    Vue.component('bundle-table', {
        props: ['bundles'],
        methods: {
            removeBundle: function (idx) {
                this.$emit('bundle-remove', idx)
            },
            getFormattedDateTime: function (bundle) {
                if (!!bundle.createdAt) {
                    return bundle.createdAt.split('T')[0] + ' ' + bundle.createdAt.split('T')[1];
                }
                return luxon.DateTime.now().toFormat('yyyy-MM-dd HH:mm:ss');
            },
        },
        template: `
               <table class="table table-bordered bg-white col-sm-8">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Item ID</th>
                            <th>Sku</th>
                            <th>Job Card ID</th>
                            <th>Wrap Quantity</th>
                            <th>Type</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(bundle,index) in bundles">
                            <input hidden="hidden" v-bind:name="'bundles[' + index + '].id'" v-bind:value="bundle.id" >
                            <input hidden="hidden" v-bind:name="'bundles[' + index + '].itemId'" v-bind:value="bundle.itemId" >
                            <input hidden="hidden" v-bind:name="'bundles[' + index + '].sku'" v-bind:value="bundle.sku" >
                            <input hidden="hidden" v-bind:name="'bundles[' + index + '].masterBundleId'" v-bind:value="bundle.masterBundleId" >
                            <input hidden="hidden" v-bind:name="'bundles[' + index + '].jobCardId'" v-bind:value="bundle.jobCardId" >
                            <input hidden="hidden" v-bind:name="'bundles[' + index + '].wrapQuantity'" v-bind:value="bundle.wrapQuantity" >
                            <input hidden="hidden" v-bind:name="'bundles[' + index + '].type'" v-bind:value="bundle.type" >
                            <input hidden="hidden" v-bind:name="'bundles[' + index + '].barcode'" v-bind:value="bundle.barcode" >
                            <input hidden="hidden" v-bind:name="'bundles[' + index + '].createdAt'" v-bind:value="getFormattedDateTime(bundle.createdAt)" >
                            <input hidden="hidden" v-bind:name="'bundles[' + index + '].createdBy'" v-bind:value="bundle.createdBy" >
                            <td><span>{{bundle.id}}</span></td>
                            <td><span>{{bundle.itemId}}</span></td>
                            <td><span>{{bundle.sku}}</span></td>
                            <td><span>{{bundle.jobCardId}}</span></td>
                            <td><span>{{bundle.wrapQuantity}}</span></td>
                            <td><span>{{bundle.type}}</span></td>
                            <td>
                                <button type="button" title="Remove" class="btn btn-light text-left" v-on:click="removeBundle(index)">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
               </table>
        `

    })


    let app = new Vue({
        el: "#masterBarcodeApp",
        data: {
            bundles: [],
        },
        methods: {
            removeBundle: function (idx) {
                this.bundles.splice(idx, 1)
            },
            onBundleSelect: function (id, bundle) {
                this.bundles.push(
                    bundle
                )
            },
            hasMultipleItemSelect : function () {
                const ids = this.bundles.map(item => item.itemId);
                const uniqueIds = new Set(ids);
                return uniqueIds.size > 1;
            },
            hasDuplicates: function () {
                const ids = this.bundles.map(item => item.id);
                const uniqueIds = new Set(ids);
                return ids.length !== uniqueIds.size;
            }
        },
        mounted: function () {
            this.bundles = window.ctp.wrapper.bundles;
        }

    });

})(jQuery);