export default class DonationModule {
    constructor(options) {
        this.options = DonationModule.updateSettings(options);
        this.donationAmmount;
        this.giftaidAmmount;
        this.DonationAmount = document.getElementById("DonationAmount");
    }

    static updateSettings(userSettings) {
        const defaultSettings = {
            donationModuleEl: ".donation-module", //Dom El
            donationAmountRadioEls: ".donation-amount-input.is-radio input", //String
            donationAmountTextEl: ".donation-amount-input.is-text input", //String
            giftaidValueEls: ".giftaid-value", //String,
            tagsRadioEls: ".donation-tag-input input", //String
            tagsErrorMsgEl: ".tag-error-msg", //String
            giftaidPercentage: 25,
            wallPlaquesMin: 250,
            tributeTags: document.querySelectorAll(".donation-tribute-tag"),
            wallPlaques: document.querySelectorAll(".donation-wall-plaque"),
            donationTributeTag: "#donationTributeTag",
            donationWallPlaque: "#donationWallPlaque"
        };

        for (const attrname in userSettings) {
            defaultSettings[attrname] = userSettings[attrname];
        }

        defaultSettings.donationModuleEl = typeof defaultSettings.donationModuleEl === 'string' ? document.querySelector(defaultSettings.donationModuleEl) : defaultSettings.donationModuleEl;

        return defaultSettings;
    }

    init() {
        if (this.options.donationModuleEl) {
            const _this = this;
            this.options.donationAmountRadioEls = this.options.donationModuleEl.querySelectorAll(this.options.donationAmountRadioEls);
            this.options.donationAmountTextEl = this.options.donationModuleEl.querySelector(this.options.donationAmountTextEl);
            this.options.giftaidValueEls = this.options.donationModuleEl.querySelectorAll(this.options.giftaidValueEls);
            this.options.tagsRadioEls = this.options.donationModuleEl.querySelectorAll(this.options.tagsRadioEls);
            this.options.tagsErrorMsgEl = this.options.donationModuleEl.querySelector(this.options.tagsErrorMsgEl);


            Array.prototype.forEach.call(this.options.donationAmountRadioEls, (donationAmountRadioEl, i) => {
                donationAmountRadioEl.addEventListener("change", (event) => {
                    _this.getRadioValue();
                });
            });

            Array.prototype.forEach.call(this.options.tagsRadioEls, (radioEl, i) => {
                radioEl.addEventListener("change", (event) => {
                    //_this.uiHandler();
                    _this.getRadioValues2();
                });
            });

            ["keyup", "change"].forEach(eventType => {
                this.options.donationAmountTextEl.addEventListener(eventType, (event) => {
                    this.getDonationAmountTextValue();
                    console.log(this.options.donationAmountTextEl)
                });
            });
        }

        if (this.options.tributeTags.length > 0) {
            this.tagsAndWallPlaquesHandler();
        }
    }

    // updating the donation input value
    getDonationAmountTextValue() {
        this.donationAmmount = this.options.donationAmountTextEl.value;
        console.log(this.options.donationAmountTextEl.value)
        Array.prototype.forEach.call(this.options.donationAmountRadioEls, (donationAmountRadioEl, i) => {
            donationAmountRadioEl.checked = false;
        });

        this.uiHandler();
    }

    //Radio inputs for £3, £15, £20
    getRadioValue() {

        Array.prototype.forEach.call(this.options.donationAmountRadioEls, (donationAmountRadioEl, i) => {
            if (donationAmountRadioEl.checked) {
                this.donationAmmount = donationAmountRadioEl.value;
                this.uiHandler();
            }
        });
    }

    getRadioValues2() {

        Array.prototype.forEach.call(this.options.tagsRadioEls, (tagsRadioEl, i) => {
            if (tagsRadioEl.checked) {
                this.donationAmmount = tagsRadioEl.value;
                this.uiHandler();
            }
        });
    }

    uiHandler() {
        this.giftaidAmmount = this.donationAmmount * (this.options.giftaidPercentage / 100);
        this.options.donationAmountTextEl.value = this.donationAmmount;

        Array.prototype.forEach.call(this.options.giftaidValueEls, (giftaidValueEl, i) => {
            giftaidValueEl.innerHTML = this.giftaidAmmount;
        });

        if (this.options.tagsRadioEls.length) {
            Array.prototype.forEach.call(this.options.tagsRadioEls, (radio, i) => {
                //debugger;
                if (radio.checked && radio.value === "wallPlaques" && this.donationAmmount < this.options.wallPlaquesMin) {
                    this.options.tagsErrorMsgEl.classList.remove("is-d-none");
                } else {
                    this.options.tagsErrorMsgEl.classList.add("is-d-none");
                }

            });
        }
    }

    // A function to set amount's manually - Tan
    setDonationAmount(amount) {
        this.DonationAmount.value = amount;
        this.giftaidAmmount = this.DonationAmount.value * (this.options.giftaidPercentage / 100);
        this.options.donationAmountTextEl.value = this.DonationAmount.value;

        Array.prototype.forEach.call(this.options.giftaidValueEls, (giftaidValueEl, i) => {
            giftaidValueEl.innerHTML = this.giftaidAmmount;
        });
    }

    tagsAndWallPlaquesHandler() {
        // this sets initial amount to 25
        this.setDonationAmount(25);

        this.options.donationTributeTag.addEventListener("click", () => {
            this.setDonationAmount(25);
            // this is some wierd bug, needs 2 clicks for the setDonationAmount() function above to work
            //donationTributeTag.click();
            this.options.tributeTags.forEach((item, index) => {
                this.options.tributeTags[index].style.display = "block";
                this.options.wallPlaques[index].style.display = "none";
            })
        })

        donationWallPlaque.addEventListener("click", () => {
            this.setDonationAmount(250);
            // this is some wierd bug, needs 2 clicks for the setDonationAmount() works
            //donationWallPlaque.click();
            this.options.wallPlaques.forEach((item, index) => {
                this.options.wallPlaques[index].style.display = "block";
                this.options.tributeTags[index].style.display = "none";
            })
        })

        this.options.tributeTags.forEach((item, index) => {
            this.options.tributeTags[index].style.display = "block";
            this.options.wallPlaques[index].style.display = "none";
        })
    }
}