// 1. Створення
const xhr = new XMLHttpRequest()

// 2. Ініціалізація (Метод, URL, async)
xhr.open('GET', 'https://api.escuelajs.co/api/v1/products/1')

// 4. Підписка на події (до відправки!)
xhr.onload = function () {
    if (xhr.status === 200) {
        console.log('Успіх:', xhr.response)
    } else {
        console.error('Помилка сервера:', xhr.status)
    }
}

xhr.onerror = function () {
    console.error('Помилка мережі (інтернет зник або CORS)')
}

// 3. Відправка
xhr.send()

xhr.open(method, url, [async, user, password])

console.log('Початок')

const xhr = new XMLHttpRequest()
xhr.open('GET', 'https://api.escuelajs.co/api/v1/products', false) // <--- FALSE

try {
    xhr.send() // ТУТ ВЕСЬ БРАУЗЕР ЗАВИСНЕ

    if (xhr.status === 200) {
        console.log('Отримано дані')
    }
} catch (e) {
    console.log('Помилка')
}

console.log('Кінець')

xhr.open('GET', 'url', true)
xhr.send()
console.log('Я виконуюсь відразу, не чекаючи сервера!')

const xhr = new XMLHttpRequest()
xhr.open('GET', 'https://api.escuelajs.co/api/v1/products')

// 1. Успішне (з точки зору мережі) завершення
xhr.onload = function () {
    // Важливо: 404 Not Found - це теж onload!
    if (xhr.status >= 200 && xhr.status < 300) {
        console.log('Дані:', xhr.response)
    } else {
        console.log('Помилка HTTP:', xhr.status, xhr.statusText)
    }
}

// 2. Проблеми з мережею
xhr.onerror = function () {
    console.log('Fatal Error: Немає інтернету або блокування CORS')
}

// 3. Прогрес завантаження
xhr.onprogress = function (event) {
    if (event.lengthComputable) {
        const percent = Math.round((event.loaded / event.total) * 100)
        console.log(`Завантажено ${percent}%`)
    } else {
        console.log(`Завантажено ${event.loaded} байт (загальний розмір невідомий)`)
    }
}

xhr.send()

const xhr = new XMLHttpRequest()
xhr.open('GET', 'https://api.escuelajs.co/api/v1/products/1')
xhr.responseType = 'json' // ! Магія тут

xhr.onload = function () {
    // xhr.response - це вже об'єкт!
    const product = xhr.response
    console.log(product.title) // Можна відразу звертатися до полів
}

xhr.send()

const xhr = new XMLHttpRequest()
xhr.open('GET', 'https://i.imgur.com/example.jpg')
xhr.responseType = 'blob' // Хочемо отримати файл

xhr.onload = function () {
    if (xhr.status === 200) {
        const blob = xhr.response

        // Створюємо URL для картинки
        const imgUrl = URL.createObjectURL(blob)

        // Показуємо на сторінці
        const img = document.createElement('img')
        img.src = imgUrl
        document.body.appendChild(img)
    }
}

xhr.send()

xhr.open('POST', '/api/data')
// ✅ Правильно:
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.setRequestHeader('Authorization', 'Bearer token123')

const xhr = new XMLHttpRequest()
xhr.open('POST', 'https://api.escuelajs.co/api/v1/products/')

// 1. Обов'язково вказати тип контенту
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8')

xhr.responseType = 'json'

xhr.onload = function () {
    console.log('Створено продукт ID:', xhr.response.id)
}

// 2. Перетворити об'єкт у рядок
const body = JSON.stringify({
    title: 'New Product',
    price: 100,
    description: 'Description...',
    categoryId: 1,
    images: ['https://placeimg.com/640/480/any'],
})

xhr.send(body)

const formData = new FormData()
formData.append('file', fileInput.files[0])
formData.append('description', 'User avatar')

const xhr = new XMLHttpRequest()
xhr.open('POST', 'https://api.escuelajs.co/api/v1/files/upload')

// ❌ НЕ РОБІТЬ ЦЬОГО з FormData:
// xhr.setRequestHeader('Content-Type', 'multipart/form-data');

xhr.send(formData) // Браузер все зробить сам

<input type="file" id="fileInput" />
<button onclick="uploadFile()">Завантажити</button>

<div id="progressContainer" style="width: 300px; border: 1px solid #ccc; display: none;">
    <div id="progressBar" style="width: 0%; height: 20px; background: #4caf50; transition: width 0.2s;"></div>
</div>
<div id="status"></div>

<script>
    function uploadFile() {
        const file = document.getElementById('fileInput').files[0]
        if (!file) return

        const xhr = new XMLHttpRequest()

        // 1. Налаштування прогресу ЗАВАНТАЖЕННЯ (UPLOAD)
        xhr.upload.onprogress = function (event) {
            document.getElementById('progressContainer').style.display = 'block'

            if (event.lengthComputable) {
                const percent = Math.round((event.loaded / event.total) * 100)

                const bar = document.getElementById('progressBar')
                bar.style.width = percent + '%'
                bar.textContent = percent + '%'
            }
        }

        // 2. Успішне завантаження на сервер (але ще не відповідь!)
        xhr.upload.onload = function () {
            document.getElementById('status').innerText = 'Файл відправлено, чекаємо відповідь...'
        }

        // 3. Відповідь від сервера
        xhr.onload = function () {
            if (xhr.status === 201 || xhr.status === 200) {
                document.getElementById('status').innerText = 'Успіх! Файл збережено.'
                document.getElementById('progressBar').style.background = '#2196f3'
            } else {
                document.getElementById('status').innerText = 'Помилка сервера: ' + xhr.status
                document.getElementById('progressBar').style.background = '#f44336'
            }
        }

        xhr.onerror = function () {
            document.getElementById('status').innerText = 'Помилка мережі!'
        }

        xhr.open('POST', 'https://api.escuelajs.co/api/v1/files/upload')

        const formData = new FormData()
        formData.append('file', file)

        xhr.send(formData)
    }
</script>

xhr.timeout = 5000 // 5000 мс = 5 секунд

xhr.ontimeout = function () {
    console.error('Запит тривав занадто довго і був скасований!')
}

xhr.abort()

const xhr = new XMLHttpRequest()
xhr.withCredentials = true // Відправляти cookies та auth headers на інший домен

xhr.open('GET', 'https://api.another-domain.com/profile')
xhr.send()

const xhr = new XMLHttpRequest()
xhr.open('GET', '/api/users')
xhr.responseType = 'json'

xhr.onload = function () {
    if (xhr.status === 200) {
        console.log(xhr.response)
    } else {
        console.error('Error:', xhr.status)
    }
}

xhr.onerror = () => console.error('Network Error')
xhr.send()

try {
    const response = await fetch('/api/users')
    if (!response.ok) {
        throw new Error(`Error: ${response.status}`)
    }
    const data = await response.json()
    console.log(data)
} catch (error) {
    console.error('Network Error', error)
}

function request(method, url, data = null) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open(method, url)

        // Автоматичний JSON
        xhr.responseType = 'json'
        if (data) {
            xhr.setRequestHeader('Content-Type', 'application/json')
        }

        xhr.onload = () => {
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve({
                    status: xhr.status,
                    data: xhr.response,
                    headers: xhr.getAllResponseHeaders(),
                })
            } else {
                reject({
                    status: xhr.status,
                    statusText: xhr.statusText,
                    data: xhr.response,
                })
            }
        }

        xhr.onerror = () => {
            reject({
                status: 0,
                statusText: 'Network Error',
            })
        }

        // Обробка даних перед відправкою
        xhr.send(data ? JSON.stringify(data) : null)
    })
}

// Використання:
request('GET', 'https://api.escuelajs.co/api/v1/products/1')
    .then((response) => {
        console.log('Product:', response.data.title)
        return request('GET', `https://api.escuelajs.co/api/v1/categories/${response.data.category.id}`)
    })
    .then((categoryResponse) => {
        console.log('Category:', categoryResponse.data.name)
    })
    .catch((error) => {
        console.error('Something went wrong:', error)
    })