import  config from "./src/config/config.js";
import  ketchUp  from "./src/ketchUp.js";


let loginOverlay = document.getElementById("Registration");
let nextButton = document.getElementById("nextButton");
let introOverlay = document.getElementById("gamestart");
let paytmSuccess = document.getElementById("paytmSuccess");
let howtoPlayLayout = document.getElementById("howToPlay");
let screenLock = document.getElementById("screen-lock");

/** @type {import ("./typings/types")} */

let otpOverlay = document.getElementById("otpOverlay");
let doneButton = document.getElementById("confirmButton");
let startGameBtn = document.getElementById("startGameBtn");
let termAndConditionClick = document.getElementById("termAndConditionClick");
let termAndConditionClick1 = document.getElementById("termAndConditionClick1");
let termAndConditionClick2 = document.getElementById("termAndConditionClick2");
let resendOtp = document.getElementById("resendOtp");
var g_gameServer;
var gameLoaded = false;
var sceneGame;

window.addEventListener('load', (event) => {
    loadGame();
});

		//} else {
            // screenLock.style.display = "none";
            // loadGame();
            // gameLoaded = true;

//ISMOBILE
 //if(screen.orientation.angle == 0)
            // if(window.screen.orientation.angle == 0)
            // if(window.innerHeight > window.innerWidth)
            //     screenLock.style.display = "block";
            // else{
            //     loadGame();
            //     gameLoaded = true;
            // }
        
    //console.log("screen",screen.orientation.angle);

    // window.addEventListener("orientationchange", function(event) {
    //     console.log("windowsOrientation",event)
    //     if(window.screen.orientation.angle == 0) {
    //         otpOverlay.style.display = "block";
    //         if(sceneGame != undefined) sceneGame.canvas.style.display = "none";
    //     } else { 
    //         otpOverlay.style.display = "none";
    //         screenLock.style.display = "none";  
    //         if(sceneGame != undefined) sceneGame.canvas.style.display = "block";
    //         if(gameLoaded == false)   loadGame();
    //     }
    //   });

    //   window.addEventListener("resize", function(event) {
    //     // var stringEvent = JSON.stringify(event)
    //     // window.alert(stringEvent)
    //     // var obj = { tag: "0", dummy : event};
    //     // let alert = JSON.parse(JSON.stringify(obj));
    //     // console.log(alert);
    //     // var output = '';
    //     // for (var entry in event.currentTarget.screen.orientation.angle) {
    //     //     output += 'key: ' + entry + ' | value: ' + event.currentTarget.screen.orientation.angle[entry] + '\n';
    //     // }
    //     //    alert(window);
    //       // console.log("event.currentTarget",event.currentTarget.screen.orientation);
    //        if(window.innerWidth < window.innerHeight) {
    //         otpOverlay.style.display = "block";
    //             if(sceneGame != undefined){
    //                 sceneGame.canvas.style.display = "none";
    //             }
    //        } else {
    //            otpOverlay.style.display = "none";
    //            screenLock.style.display = "none";
    //            if(gameLoaded == false)   loadGame();
    //            if(sceneGame != undefined) sceneGame.canvas.style.display = "block";

    //        }
    //     }, false);
        //    console.log("output",output);
        //    var stringEvent = JSON.stringify(event);
        //    window.alert(stringEvent);
        //    console.log(event);
    //    if(event.target.screen.orientation.angle  != undefined) {
    //       if(event.target.screen.orientation.angle == 0) {
    //         otpOverlay.style.display = "block";
    //         if(sceneGame != undefined){
    //             sceneGame.canvas.style.display = "none";
    //         }
    //       } else {
    //         otpOverlay.style.display = "none";
    //         screenLock.style.display = "none";
    //         if(gameLoaded == false)   loadGame();
    //         if(sceneGame != undefined) sceneGame.canvas.style.display = "block";
    //       }
    //     } else {
    //         if(event.currentTarget.orientation.angle == 0) {
    //             otpOverlay.style.display = "block";
    //             if(sceneGame != undefined){
    //                 sceneGame.canvas.style.display = "none";
    //             }
    //           } else {
    //             otpOverlay.style.display = "none";
    //             screenLock.style.display = "none";
    //             if(gameLoaded == false)   loadGame();
    //             if(sceneGame != undefined) sceneGame.canvas.style.display = "block";
    //           }
    //     }

// });

function playBgMusic(){
    let bgMusic = new Howl({
        src: "assets/audio/bgnew.mp3",
        loop: true,
        html5: false,
        volume: 0.1,
        onend: function() {
            console.log('Finished!');
        }
    });
    bgMusic.play();
    updateVolume(0.1,bgMusic);
}
                                    
nextButton.addEventListener("click", () => {
    playTapSFX();
    var nameValue = document.getElementById("nameInput").value;
    var mobileNumVal =  document.getElementById("mobileNumber").value;
    var checkBox = document.getElementById("mycheck");
    var mobileNumberValid;
    var nameValid;
    var checkBoxValid;
    if(/^\d{10}$/.test(mobileNumVal)) 
        mobileNumberValid = true;
    else{
        mobileNumberValid = false;
        document.getElementById("mobileNumberError").style.display = "block";
    }
    if(nameValue != "")
        nameValid = true;
    else {
        nameValid = false;
        document.getElementById("nameErrorId").style.display = "block";
    }
    if(checkBox.checked == true)
         checkBoxValid = true;
    else {
         checkBoxValid = false;
         document.getElementById("checkBoxerrorId").style.display = "block";
    }
    if(mobileNumberValid && nameValid && checkBoxValid) {
        g_gameServer.createPlayer(nameValue,mobileNumVal)
        hideLoginPage();
        showOtpPage();
    }
});

function hideLoginPage() {
    loginOverlay.style.display = "none";
}

function showLoginPage() {
    loginOverlay.style.display = "block";
}

function showOtpPage() {
    otpOverlay.style.display = "block";
    loginOverlay.style.display = "none";
    setTimeout(function () {
        showResendPwd();
    }, 20000);
}

function showResendPwd() {
    resendOtp.style.display = "block";
}

function hideotpPage() {
    otpOverlay.style.display = "none";
}

// doneButton.addEventListener("click", () => {
//     playTapSFX();
//     var otpEnteredVal =  document.getElementById("otpValue").value;
//     if(otpEnteredVal != ""){
//         g_gameServer.sendOtp(otpEnteredVal);
//     } else{
//         document.getElementById("otpError").style.display = "block";
//     }
// });

startGameBtn.addEventListener("click", () => {
    playTapSFX();
    hideIntroPage();
    loadGame();
});

paytmButton.addEventListener("click", () => {
    playTapSFX();
    var paytmnumberValid;
    var paytmnumber =  document.getElementById("paytmnumberId").value;
    if(/^\d{10}$/.test(paytmnumber)) 
         paytmnumberValid = true;
    else{
        paytmnumberValid = false;
        document.getElementById("mobileNumberId").style.display = "block";
    }
    if(paytmnumberValid){
        document.getElementById("paytmPanel").style.display = "none";
        paytmSuccess.style.display = "block";
        g_gameServer.sendPaytm(paytmnumber);
    }
});

homeButton.addEventListener("click", ()  => {
    playTapSFX();
    refereshPage();
});

// termAndConditionClick.addEventListener("click", () => {
//     openTermsAndConditions();
// });
// termAndConditionClick1.addEventListener("click", () => {
//     openTermsAndConditions();
// });

// resendOtp.addEventListener("click",() => {
//     g_gameServer.resendOtp();
// });

// termAndConditionClick2.addEventListener("click", () => {
//     openTermsAndConditions();
// });


howtoplayClick.addEventListener("click", () => {
    playTapSFX();
    introOverlay.style.display ="none";
    howtoPlayLayout.style.display ="block";

});

backArrowBtn.addEventListener("click", () => {
    playTapSFX();
    introOverlay.style.display ="block";
    howtoPlayLayout.style.display ="none";
});


function refereshPage() {
        localStorage.clear();
        location.reload();
}

function showIntroPage() {
    introOverlay.style.display = "block";
}

function hideIntroPage() {
    introOverlay.style.display = "none";
}

// g_gameServer.sendPaytm("8610201155");

function openTermsAndConditions() {
    var popup = $("#termsAndCondition");
    if (popup.length == 0) {
      $("body").append(TermsAndConditionsHTML);
      popup = $("#termsAndCondition");
      $("#termsAndCondition .closePopup").on("click", function () {
        closeTermsAndConditions();
      });
    }
    $("#termsAndCondition").show();
}

function closeTermsAndConditions() {
    $("#termsAndCondition").hide();
}

function playTapSFX(){
    let sfxEffect = new Howl({
        src: "assets/audio/tap.wav"
    });
    sfxEffect.play();
    updateVolume(2, sfxEffect);
}

function updateVolume(range,sound){
    sound.volume(range);
}

window.checkOtpValidation=function(otpStatus) {
    if(otpStatus != 200){
        document.getElementById("otpError").style.display = "block";
    } else {
          hideotpPage();   
          showIntroPage();
    }
}

function loadGame(){
   sceneGame = new Game();
}

class Game extends Phaser.Game {
	constructor() {
		super(config);
		this.scene.add(ketchUp);
		this.scene.start("ketchUp");
	}
}


