class SubscriptionForm {
    form
    stripe_price_input
    total_quantity_input
    products_and_quantities
    weight_per_item = '0'
    weight_unit = 'lb'
    products
    max_quantity = 20

    constructor(form) {
        this.form = document.querySelector(form)
        this.stripe_price_input = this.form.querySelector('input[name=stripe_price_id]')
        this.products = this.form.querySelectorAll('input[name^=product_]')
        this.total_quantity_input = this.form.querySelector('input[name=total_quantity]')
        this.total_weight_input = this.form.querySelector('input[name=total_weight]')
        this.products_and_quantities = this.form.querySelector('input[name=products_and_quantities]')
        this.submitBtn = this.form.querySelector('input[type=submit]')

        this.connect()
    }

    connect() {
        this.form.addEventListener('change', this.change.bind(this))
        const formData = new FormData(this.form)
    }

    change(event) {
        if (event.target.name == 'stripe_product') {
            this.stripe_price_input.value = event.target.parentElement.querySelector('select[name=stripe_price]').value
            const values = event.target.dataset.weight.split(':')
            this.weight_per_item = values[0]
            this.weight_unit = values[1]
        } else if (event.target.name == 'stripe_price') {
            this.stripe_price_input.value = event.target.value
        } else if (event.target.name.includes('product_')) {
            const selected = Array.from(this.products).filter(item => item.value > 0)
            this.total_quantity_input.value = this.total_qty
            this.products_and_quantities.value = JSON.stringify(
                selected.map(item => {
                    return {'pk': item.dataset.id, 'name': item.name.slice(8), 'quantity': Number(item.value)}
                })
            )
        }

        this.total_weight_input.value = this.total_weight

        this.checkMaxQuantity()

        this.submitBtn.disabled = !this.isValid
    }

    checkMaxQuantity() {
        if (this.total_qty < this.max_quantity) {
            Array.from(this.products).map(input => input.max = this.max_quantity)
        } else {
            Array.from(this.products).map(input => {
                if (input.value == '') {
                    input.max = 0
                } else {
                    input.max = input.value
                }
            })
        }
    }

    get isValid() {
        return this.validate();
    }

    validate() {
        const inputs = new Set();
        [this.stripe_price_input,
        this.total_quantity_input,
        this.total_weight_input,
        this.products_and_quantities].forEach(input => {
            if (input.value == '') {
                inputs.add(false)
            }
        });
        if (this.total_qty < 1) {
            inputs.add(false)
        }
        const valid = (inputs.has(false)) ? false : true;

        return valid;
    }

    get total_qty() {
        return Array.from(this.products).reduce((total, current) => {
            return total + Number(current.value)
        }, 0)
    }

    get total_weight() {
        const weight = this.total_qty * Number(this.weight_per_item)
        return `${weight}:${this.weight_unit}`
    }
}

document.addEventListener('DOMContentLoaded', () => {
    new SubscriptionForm('.subscription-create-form')
})