function iOS() {
    const expression = /(iPhone|iPod|iPad)/i;
    if (expression.test(navigator.platform)) {
        return true;
    } else {
        return false;
    }
}

function toggleNotification(id) {
    let oldFavorite = localStorage.getItem('notification_matche_ids');
    if (oldFavorite == null) {
        oldFavorite = '[]';
    }
    oldFavorite = JSON.parse(oldFavorite);
    let oldFavoriteFilter = oldFavorite.filter(function (x) {
        return x.id != id;
    });
    if (oldFavoriteFilter.length == oldFavorite.length) {
        oldFavorite.push({
            id: id,
            created_at: Math.floor((new Date()).getTime() / 1000)
        });
        localStorage.setItem('notification_matche_ids', JSON.stringify(oldFavorite));
        return 'add';
    } else {
        localStorage.setItem('notification_matche_ids', JSON.stringify(oldFavoriteFilter));
        return 'remove';
    }
}

function checkNotifyMe() {
    let oldNotifyMe = localStorage.getItem('notification_matche_ids');
    if (oldNotifyMe == null) {
        oldNotifyMe = '[]';
    }
    oldNotifyMe = JSON.parse(oldNotifyMe);
    let oldNotifyMeFilter = oldNotifyMe.filter(function (x) {
        return x.id != matchInfo.id;
    });
    if (oldNotifyMeFilter.length != oldNotifyMe.length) {
        $('.btn-notify-me').addClass('active');
    }
}

var styles = `
.box-register-noti {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 50px;
  width: 100%;
}
@media (max-width: 540px) {
  .box-register-noti {
    position: unset;
    width: 100%;
  }
}
.box-register-noti .container-register-noti {
  display: flex;
  align-items: center;
  background: #000000ab;
  padding: 10px 20px;
  border-radius: 8px;
}
@media (max-width: 540px) {
  .box-register-noti .container-register-noti {
    width: 100%;
    border-radius: unset;
    display: flex;
  }
}
.box-register-noti .container-register-noti .icon-1 {
  margin-right: 20px;
}
.box-register-noti .container-register-noti .date-time {
  width: 385px;
}
@media (max-width: 540px) {
  .box-register-noti .container-register-noti .date-time {
    width: unset;
    flex: 1;
  }
}
.box-register-noti .container-register-noti .date-time .box-countdown {
  font-size: 18px;
}
@media (max-width: 540px) {
  .box-register-noti .container-register-noti .date-time .box-countdown {
    font-size: 13px;
  }
}
.box-register-noti .container-register-noti .date-time .time-start {
  font-size: 16px;
  opacity: 0.6;
  margin-top: 5px;
}
@media (max-width: 540px) {
  .box-register-noti .container-register-noti .date-time .time-start {
    font-size: 11px;
  }
}
.box-register-noti .container-register-noti .parent-btn-notify-me {
  display: flex;
}
@media (max-width: 540px) {
  .box-register-noti .container-register-noti .parent-btn-notify-me {
    width: 100%;
    flex-direction: column;
  }
}
.box-register-noti .container-register-noti .parent-btn-notify-me .btn-notify-me {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #414144;
  padding: 5px 15px;
  cursor: pointer;
  border-radius: 3px;
}
@media (max-width: 540px) {
  .box-register-noti .container-register-noti .parent-btn-notify-me .btn-notify-me {
    margin-top: 10px;
  }
}
.box-register-noti .container-register-noti .parent-btn-notify-me .btn-notify-me .icon {
  margin-right: 5px;
}
.box-register-noti .container-register-noti .parent-btn-notify-me .btn-notify-me .icon-inactive {
  display: flex;
}
.box-register-noti .container-register-noti .parent-btn-notify-me .btn-notify-me .icon-active {
  display: none;
}
.box-register-noti .container-register-noti .parent-btn-notify-me .btn-notify-me.active .icon-inactive {
  display: none;
}
.box-register-noti .container-register-noti .parent-btn-notify-me .btn-notify-me.active .icon-active {
  display: flex;
}
`

var styleSheet = document.createElement("style")
styleSheet.innerText = styles
document.head.appendChild(styleSheet)

var matchInfo = $('#notification-register').data('match');
console.log('matchInfo', matchInfo)


const firebaseNotification = firebase.initializeApp({
    apiKey: "AIzaSyANNOFgCqhK_GdSxcdPpMnRM6mB0fAs578",
    authDomain: "bingsport-16c9b.firebaseapp.com",
    databaseURL: "https://bingsport-16c9b-default-rtdb.firebaseio.com",
    projectId: "bingsport-16c9b",
    storageBucket: "bingsport-16c9b.appspot.com",
    messagingSenderId: "682675899031",
    appId: "1:682675899031:web:0f1ad1acf1711c3b7b77d2",
    measurementId: "G-CYE22B6QG9"
}, 'NotificationApp');

function showTime(time) {
    var seconds = parseInt(time, 10);

    var days = Math.floor(seconds / (3600*24));
    seconds  -= days*3600*24;
    var hrs   = Math.floor(seconds / 3600);
    seconds  -= hrs*3600;
    var mnts = Math.floor(seconds / 60);
    seconds  -= mnts*60;
    var result = "";
    if (days > 0) {
        result += (days >= 10 ? days : '0' + days)+"d ";
    }
    if (hrs > 0) {
        result += (hrs >= 10 ? hrs : '0' + hrs)+"h ";
    }
    if (mnts > 0) {
        result += (mnts >= 10 ? mnts : '0' + mnts)+"m ";
    }
    if (seconds > 0) {
        result += (seconds >= 10 ? seconds : '0' + seconds)+"s ";
    }
    return result;
}

function countDownTimeLeft() {
    if (matchInfo.timeleft >= 900 && matchInfo.is_playing == false) {
        if (user_private_token.substr(0, 4) !== 'vip_') {
            console.log('Remove time left');
            $('#player-html5').remove();
        }
        setInterval(function () {
            let timeNow = moment().tz('UTC').unix()
            let timeLeft = matchInfo.timestamp - timeNow;
            if (timeLeft <= 0) {
                location.reload()
            } else {
                $('.box-countdown').html(`The match will start in ${showTime(timeLeft)}`)
                $('#player-html5').remove();
            }
        }, 1000)
    }
}

$(document).ready(function () {
    if (matchInfo.is_playing && matchInfo.is_playing == 1) {
        return;
    }
    if (iOS()) {
        return;
    }
    if (typeof (moment) == "undefined") {
        importScripts('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js');
    }

    $('.box-register-noti').html(`
        <div class="container-register-noti">
            <div class="icon-1">
                <img src="https://bingsport.com/images/icon-noti.png" />
            </div>
            <div class="parent-btn-notify-me">
                <div class="date-time">
                    <div class="box-countdown">Please wait...</div>
                    <div class="time-start">${moment.unix(matchInfo.timestamp).format('MMMM DD, HH:mm')}</div>
                </div>
                <div style="display: flex; align-items: center">
                    <div class="btn-notify-me">
                        <div class="icon icon-inactive">
                            <svg fill="#fff" height="24px" viewBox="0 0 24 24" width="24px"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z"></path></svg>
                        </div>
                        <div class="icon icon-active">
                            <svg fill="#fff" height="24px" viewBox="0 0 24 24" width="24px"><path d="M7.58 4.08L6.15 2.65C3.75 4.48 2.17 7.3 2.03 10.5h2c.15-2.65 1.51-4.97 3.55-6.42zm12.39 6.42h2c-.15-3.2-1.73-6.02-4.12-7.85l-1.42 1.43c2.02 1.45 3.39 3.77 3.54 6.42zM18 11c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2v-5zm-6 11c.14 0 .27-.01.4-.04.65-.14 1.18-.58 1.44-1.18.1-.24.15-.5.15-.78h-4c.01 1.1.9 2 2.01 2z"></path></svg>
                        </div>
                        <div class="icon-inactive">Notify me</div>
                        <div class="icon-active">Notification on</div>
                    </div>
                </div>
            </div>
        </div>
    `);

    checkNotifyMe();
    countDownTimeLeft();

    $(document).on('click', '.btn-notify-me', function () {
        if (iOS() == false) {
            try {
                const messaging = firebaseNotification.messaging();

                getToken(messaging, function (token) {
                    console.log('HAVE TOKEN: ' + token);
                    if (!token) {
                        alertMessageMe("Please allow notify permission", "error")
                        return;
                    }
                    let action = toggleNotification(matchInfo.id);

                    if (action == 'add') {
                        $('.btn-notify-me').addClass('active');
                    } else {
                        $('.btn-notify-me').removeClass('active');
                    }

                    $.ajax({
                        url: `https://admin.ttbd.live/api/register-notification`,
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            link: location.href,
                            token,
                            action,
                            start_time: matchInfo.timestamp,
                            image: matchInfo.cover,
                            match_name: matchInfo.name
                        },
                        error: function (result) {

                        }
                    });
                })
            } catch (e) {
                console.log(e);


            }
        }
    })
})


function getToken(messaging, callback, isRetry = false) {
    messaging
        .requestPermission()
        .then(function () {
            console.log('HAVE PERMISSION')
            return messaging.getToken()
        })
        .then(function(token) {
            callback(token);
        }).catch(function (err) {
        console.log('User Chat Token Error: '+ err);
        if (isRetry == false) {
            getToken(messaging, callback, true);
        }
    });
}

function alertMessageMe(message) {
    if (alertMessage) {
        alertMessage(message);
    } else {
        alert(message);
    }
}