import {WebSocketPayload} from "../WebSocketPayload";
import {Modal} from "./Modal";
import {WebSocketEvent} from "../WebSocketEvent";
import {RequestType} from "../RequestType";
import {IJob} from "../database/IJob";
import {WebWebSocketHandler} from "./WebWebSocketHandler";

export class Fill {
    static onFillEvent(payload: WebSocketPayload) {
        let modal = new Modal("fill", "Cocktail wird zubereitet");
        let header = document.createElement("h2");
        header.innerText = "";

        modal.addContent(header);

        let txt = document.createElement("p");
        txt.innerHTML = `Der Cocktail wird gerade zubereitet`;
        txt.id = "main_fillTxt";

        let waterAnimDiv = document.createElement("div");
        waterAnimDiv.classList.add("water");
        modal.addContent(txt);

        modal.addContent(waterAnimDiv);

        let seconds = document.createElement("span");
        seconds.innerText = "60s";
        seconds.style.marginRight = "3%";

        modal.addContent(seconds);

        let ml = document.createElement("span");
        ml.innerText = "200ml";
        modal.addContent(ml);

        modal.addContent(document.createElement("br"));
        modal.addContent(document.createElement("br"));


        let cancelBtn = document.createElement("button");
        cancelBtn.classList.add("btn", "btn-danger");
        cancelBtn.innerText = "Abbrechen";
        cancelBtn.disabled = true;
        setTimeout(() => {
            cancelBtn.disabled = false;
        }, 1000);
        cancelBtn.onclick = () => {
            cancelBtn.disabled = true;
            txt.innerHTML = "Der Vorgang wird abgebrochen...";
            waterAnimDiv.classList.add("waterCancel");

            WebWebSocketHandler.send(new WebSocketPayload(WebSocketEvent.CANCEL));
        };
        modal.addContent(cancelBtn);

        function riseSlowlyUp(lastNumber: number, number: number) {
            for (let i = lastNumber; i < number; i++) {
                setTimeout(() => {
                    ml.innerText = Math.floor(i) + "ml";
                }, (number - lastNumber / 1000) + i * 4);
            }
        }

        modal.open().then(() => {
            WebWebSocketHandler.request(RequestType.JOB).then((payload) => {
                let minus = 0;
                let job = payload.data as IJob;
                ml.innerText = Math.floor((job.completeAmount / job.estimatedTime) * minus) + "ml";
                waterAnimDiv.style.setProperty("--fillTime", job.estimatedTime + "s");
                waterAnimDiv.style.backgroundImage = `url("/images/${job.drink._id}.png")`;
                header.innerText = job.drink.name;
                seconds.innerText = Math.floor(job.estimatedTime) + "s";

                let last = 0;
                let interval = setInterval(() => {
                    minus++;
                    if (minus + 1 > (job.estimatedTime as number)) {
                        clearInterval(interval);
                    }

                    seconds.innerText = (Math.floor(job.estimatedTime as number - minus)) + "s";
                    let calc = Math.floor((job.completeAmount / job.estimatedTime) * minus);
                    riseSlowlyUp(last, calc)
                    last = calc;
                }, 1000);


                setTimeout(() => {
                    txt.innerHTML = "Bitte entnehme den Cocktail";
                    modal.title.innerHTML = "Cocktail fertig gestellt"

                    cancelBtn.classList.add("btn-blendout");
                    waterAnimDiv.classList.add("waterFinished");
                    cancelBtn.onclick = () => {
                        modal.close();
                    }
                }, job.estimatedTime * 1000);
            });
        });
    }
}