<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>GREEN API TEST</title>

    <style>

        body{
            background: #e9e9e9;
            font-family: Arial;
        }

        .main{
            width: 1000px;
            margin: 40px auto;
            display: flex;
            gap: 30px;
        }

        .left{
            width: 320px;
            display: flex;
            flex-direction: column;
        }

        .right{
            flex: 1;
        }

        input{
            margin-bottom: 12px;
            padding: 12px;
            border: 1px solid #999;
        }

        textarea{
            margin-bottom: 12px;
            padding: 12px;
            resize: none;
            border: 1px solid #999;
        }

        button{
            margin-bottom: 20px;
            padding: 15px;
            cursor: pointer;
            border: 1px solid #999;
            background: white;
        }

        button:hover{
            opacity: 0.9;
        }

        #message{
            height: 100px;
        }

        #result{
            width: 100%;
            height: 540px;
        }

    </style>
</head>
<body>

<div class="main">

    <div class="left">

        <input
                type="text"
                id="idInstance"
                placeholder="idInstance"
        >

        <input
                type="text"
                id="apiToken"
                placeholder="ApiTokenInstance"
        >

        <button onclick="getSettings()">
            getSettings
        </button>

        <button onclick="getStateInstance()">
            getStateInstance
        </button>

        <input
                type="text"
                id="phone"
                placeholder="79999999999"
        >

        <textarea
                id="message"
                placeholder="Hello world!"
        ></textarea>

        <button onclick="sendMessage()">
            sendMessage
        </button>

        <input
                type="text"
                id="phoneFile"
                placeholder="79999999999"
        >

        <input
                type="text"
                id="fileUrl"
                placeholder="https://site.com/file.jpg"
        >

        <button onclick="sendFileByUrl()">
            sendFileByUrl
        </button>

    </div>

    <div class="right">

        <textarea id="result" readonly></textarea>

    </div>

</div>

<script>

    function getData(){

        let idInstance =
            document.getElementById("idInstance").value

        let apiToken =
            document.getElementById("apiToken").value

        return {
            idInstance,
            apiToken
        }
    }

    function showResult(data){

        document.getElementById("result").value =
            JSON.stringify(data, null, 2)
    }

    async function getSettings(){

        let data = getData()

        try{

            let response = await fetch(
                `https://7107.api.greenapi.com/waInstance${data.idInstance}/getSettings/${data.apiToken}`
            )

            let result = await response.json()

            showResult(result)

        }catch(error){

            console.log(error)

            showResult(error)
        }
    }

    async function getStateInstance(){

        let data = getData()

        try{

            let response = await fetch(
                `https://7107.api.greenapi.com/waInstance${data.idInstance}/getStateInstance/${data.apiToken}`
            )

            let result = await response.json()

            showResult(result)

        }catch(error){

            console.log(error)

            showResult(error)
        }
    }

    async function sendMessage(){

        let data = getData()

        let phone =
            document.getElementById("phone").value

        let message =
            document.getElementById("message").value

        try{

            let response = await fetch(
                `https://7107.api.greenapi.com/waInstance${data.idInstance}/sendMessage/${data.apiToken}`,
                {
                    method: "POST",

                    headers: {
                        "Content-Type": "application/json"
                    },

                    body: JSON.stringify({

                        chatId: phone + "@c.us",

                        message: message

                    })
                }
            )

            let result = await response.json()

            showResult(result)

        }catch(error){

            console.log(error)

            showResult(error)
        }
    }

async function sendFileByUrl(){

    let data = getData()

    let phone = document.getElementById("phoneFile").value.trim()
    let fileUrl = document.getElementById("fileUrl").value.trim()

    let response = await fetch(
        `https://7107.api.greenapi.com/waInstance${data.idInstance}/sendFileByUrl/${data.apiToken}`,
        {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                chatId: phone + "@c.us",
                urlFile: fileUrl,
                fileName: "javascript.png"
            })
        }
    )

    let text = await response.text()

    document.getElementById("result").value = text
}

</script>

</body>
</html>