class BankCalculation {
    amount: string;
    year: number;
    interest: number;
    compound: number;

    constructor(
        amount: string,
        year: number,
        interest: number,
        compound: number
    ) {
        this.amount = amount;
        this.year = year;
        this.interest = interest / 100;
        this.compound = compound;
    }

    myFutureAmount(renderArea: HTMLElement): void {
        const totalInterest: number = this.getCalcInterestWithPower();
        const answer = Math.round(
            Number(this.amount.replaceAll(",", "")) * totalInterest
        );
        this.renderTemplate(`$${answer.toLocaleString("en-US")}`, renderArea);
    }

    protected getCalcInterestWithPower(): number {
        let year: number = this.year;
        const interest: number = this.getCalcInterest();
        let calcPower: number = interest ** year;
        if (this.isCompound()) {
            year = year * this.compound;
            calcPower = interest ** year;
        }
        return Number(calcPower.toFixed(5));
    }

    protected getCalcInterest(): number {
        let interest: number = 1 + this.interest;
        if (this.isCompound()) {
            interest = 1 + this.interest / this.compound;
        }
        return Number(interest.toFixed(5));
    }

    protected isCompound(): boolean {
        return this.compound > 1 ? true : false;
    }

    protected renderTemplate(answer: string, renderArea: HTMLElement) {
        renderArea.innerHTML = `<div>Your ${this.amount} after ${this.year} year will be ${answer}</div>`;
    }
}

const FORM = document.querySelector(
    '[data-time="bank-form"]'
) as HTMLFormElement;
const DOM = {
    totalAmount: document.querySelector(
        '[data-time="total-amount"]'
    ) as HTMLInputElement,
    interest: document.querySelector(
        '[data-time="interest"]'
    ) as HTMLInputElement,
    year: document.querySelector('[data-time="year"]') as HTMLInputElement,
    compound: document.querySelector(
        '[data-time="compound-frequency"]'
    ) as HTMLInputElement,
    renderContainer: document.querySelector(
        '[data-time="render"]'
    ) as HTMLElement
};

FORM.addEventListener("submit", (event) => {
    event.preventDefault();
    const total_amount: string = DOM.totalAmount.value;
    const interest: number = Number(DOM.interest.value);
    const year: number = Number(DOM.year.value);
    const compound: number = Number(DOM.compound.value);

    const bankCalculation = new BankCalculation(
        total_amount,
        year,
        interest,
        compound
    );
    if (total_amount !== "" && interest !== 0 && year !== 0) {
        bankCalculation.myFutureAmount(DOM.renderContainer);
    } else {
        alert("Fill out all the input box.");
    }
});