class Maintenance {
    constructor(maintenanceData) {
        this.maintenanceData = maintenanceData;
    }

    show() {
        let html = `

        <head>
            <link href="${base_url()}resources/css/bootstrap/bootstrap.min.css" rel="stylesheet"/>
            <script src="${base_url()}resources/js/bootstrap/bootstrap.bundle.min.js"></script>
        </head>
        
        <style>
            body{
                margin:0;
                padding:0
            }
            .maintenance-bg{
                background-image: ${this.maintenanceData.bgImage}; 
                filter: blur(4px);
            }
        </style>   
        
    
        <div class="maintenance-bg" style="width:100%;height:100%;"></div>   
        <div id='maintenance-content' class="${this.maintenanceData.withCountdown ? 'd-none' : ''} justify-content-center align-items-center" style="position:absolute;top:0%;left:0%;width:100%;height:100%;">
            <div class="d-flex justify-content-center align-items-center" style="width:100%;height:100%;">
                <div style="width:900px;height:350px;" class="p-4">
                    <div class="w-100 h-100 d-flex flex-column justify-content-center align-items-center">
                        <h1 style="text-shadow:#4b5563 1px 1px;" class="text-center">Coming soon!</h1>
                        <h4 style="text-shadow:#4b5563 1px 1px;" class="text-center">This section is under maintenance.</h4>
                        <div style="" class="d-flex justify-content-center align-items-center p-4">
                            <span style="font-size:6rem;text-shadow:#4b5563 1px 1px;" id="countdown"></span>
                        </div> 
                        <a class="btn btn-primary" href="${base_url()}/index.php">Go to dashboard</a>
                    </div>             
                </div>
            </div>
        </div>
        `;
        document.querySelector('html').innerHTML = html;

        if (this.maintenanceData.withCountdown) {
            this.countdown(this.maintenanceData.goLiveAt);
        }
    }

    countdown(goLiveAt) {
        let x = setInterval(function () {
            let countDownDate = new Date(goLiveAt).getTime();
            let now = new Date().getTime();
            let distance = countDownDate - now;
            let days = Math.floor(distance / (1000 * 60 * 60 * 24));
            let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            let seconds = Math.floor((distance % (1000 * 60)) / 1000);
            let countdown = document.getElementById("countdown");
            countdown.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
            if (distance < 0) {
                clearInterval(x);
                countdown.innerHTML = "0d 0h 0m 0s ";
                window.location.reload();
            }
        }, 1000);

        setTimeout(() => {
            document.querySelector('#maintenance-content').classList.add('d-flex');
            document.querySelector('#maintenance-content').classList.remove('d-none');
        }, 1000);
    }
}
