import { CheckoutService } from "./checkoutService";

/**
 * Controls the checkout form
 */
class CheckoutController {

    constructor() {

        const self = this;
        this._checkoutForm = document.querySelector('.js-checkout-form');

        if(!isset(this._checkoutForm)) return;

        this.differentShippingAddressCheckbox = this._checkoutForm.querySelector('#other_shipping_address');
        this.orderAsRadioButtons = this._checkoutForm.getElementsByClassName('js-order-type');
        // this._submitButton = this._checkoutForm.querySelector('.js-submit');

        if(this.differentShippingAddressCheckbox) this.toggleShippingAddressFields(this.differentShippingAddressCheckbox.checked);

        //Bind event listeners to this class.
        this.triggerToggleShippingAddress = this.triggerToggleShippingAddress.bind(this);
        this.triggerChangeOrderAs = this.triggerChangeOrderAs.bind(this);

        //Enable the listeners.
        this.controlListeners(true);
    }

    /**
     * @param {boolean} enabled
     */
    controlListeners(enabled) {
        const self = this;
        this.differentShippingAddressCheckbox.removeEventListener('change', this.triggerToggleShippingAddress);

        const orderAsRadioButtonsLength = this.orderAsRadioButtons.length;
        for (let index = 0; index < orderAsRadioButtonsLength; index++) {
            const orderAsRadioButton = this.orderAsRadioButtons[index];
            orderAsRadioButton.removeEventListener('change', this.triggerChangeOrderAs);

            if( orderAsRadioButton.checked ) {
                this.changeOrderAs(orderAsRadioButton.value);
            }
        }

        if (enabled) {
            this.differentShippingAddressCheckbox.addEventListener('change', this.triggerToggleShippingAddress);
            for (let index = 0; index < orderAsRadioButtonsLength; index++) this.orderAsRadioButtons[index].addEventListener('change', this.triggerChangeOrderAs);
        }
    }

    /**
     * Toggle the shipping address fields
     *
     * @param event
     */
    triggerToggleShippingAddress(event)
    {
        const input = event.currentTarget;
        this.toggleShippingAddressFields(input.checked); 
    }

    toggleShippingAddressFields(value)
    {
        const shippingFieldsArea = this._checkoutForm.querySelector('.js-shipping-address-fields');

        if(!value) {
            shippingFieldsArea.classList.add('is-hidden');
        } else {
            shippingFieldsArea.classList.remove('is-hidden');
        }

        // Hidden is the inverted value of the checked
        // shippingFieldsArea.hidden = (!value);
    }
    

    triggerChangeOrderAs(event)
    {
        const changedRadioButton = event.currentTarget;
        this.changeOrderAs(changedRadioButton.value);
    }

    changeOrderAs(orderType)
    {
        const companyFields = this._checkoutForm.querySelector('.js-company-information');

        if(orderType !== 'business') {
            companyFields.classList.add('is-hidden');
        } else {
            companyFields.classList.remove('is-hidden');
        }
    }
}

export { CheckoutController }