const candidateImage = document.querySelector("#candidate")
const loadingDiv = document.querySelector("#loading")
const likeButton = document.querySelector("#like")
const likeValue = 1
const dislikeButton = document.querySelector("#dislike")
const dislikeValue = 0
const helpButton = document.querySelector("#help")
const cookieName = "session"
const serverPort = "8000"
// const nextButton = document.querySelector("#next")

const presentAlert = function (header, message) {
    const ialert = document.createElement('ion-alert');
    ialert.header = header;
    ialert.message = message;
    ialert.buttons = ['OK'];

    document.body.appendChild(ialert);
    return ialert.present();
}


const getDocumentCookie = function (name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}

    // const showLoading = function() {
    //     candidateImage.style.display = "none"
    //     loadingDiv.style.display = "block"
    // }

    // const hideLoading = function() {
    //     loadingDiv.style.display = "none"
    //     candidateImage.style.display = "block"
    // }

    const nextImage = function () {
        const cookie = getDocumentCookie(cookieName)
        // showLoading()
        fetch(`http://127.0.0.1:8000/next_picture/${cookie}`)
            .then(response => {
                if (response.status === 200) {
                    console.log('ok')
                    return response.json()
                } else if (response.status === 204) {
                    // alert("You did it! You voted for everything")
                    presentAlert('Спасибо!', 'Вы оценили все фото, что у нас были')
                    likeButton.disabled = true
                    dislikeButton.disabled = true
                    candidateImage.alt = "Дело сделано!"
                    throw "Дело сделано!"
                } else {
                    throw new Error("Ошибка")
                }
            })
            .then(data => {
                console.log(data)
                console.log(data.picture_uri)
                console.log(`http://127.0.0.1:5500/${data.picture_uri}`)
                const pictureUrl = data.picture_uri
                candidateImage.src = `http://127.0.0.1:5500/${data.picture_uri}`
                // hideLoading()
                pictureId = data.picture_id
                console.log({ pictureId })
                return pictureId
            })
        // .catch(error => console.error('Error:', error))
    }


    const vote = function (picture_id, mark) {
        const cookie = getDocumentCookie(cookieName)
        fetch(`http://127.0.0.1:${serverPort}/rate_picture/${cookie}/${picture_id}/${mark}`)
            .then(response => response.json())
            .then(data => console.log(data))
            .catch(error => console.error('Error:', error))

        pictureId = nextImage(cookie)
    }

    likeButton.onclick = function () {
        vote(pictureId, likeValue)  // like оценивается на 1
    }
    dislikeButton.onclick = function () {
        vote(pictureId, dislikeValue)  // dislike оценивается на 0
    }
    helpButton.onclick = function () {
        presentModal()
    }

    // nextButton.onclick = function() {
    //     nextImage(sessionCookie)
    // }

    // // Get a reference to an element.
    // const candidateImage = document.querySelector("#candidate")


    if (document.cookie) {
        const sessionCookie = getDocumentCookie(cookieName)
        let pictureId = nextImage()
    } else {
        const pictureId = fetch(`http://127.0.0.1:${serverPort}/new_session`)
            .then(response => response.json())
            .then(data => {
                const cookie = data.cookie
                document.cookie = `${cookieName}=${cookie}`
                return cookie
            })
            .then(cookie => nextImage())
            .catch(error => console.error('Error:', error))
    }