<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"/>
<link href='{{ url_for("static", filename="mystyle.css") }}' rel="stylesheet">

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
<style>


    .container {
        width: 80%;
        max-width: 800px;
        margin: 30px auto;
        padding: 20px;
        background-color: white;

        border: solid 1px gray;
        border-radius: 10px;
    }

    span.example {
        color: gray;
        font-size: 14px;
    }

    .btn-sparta {
        color: #fff;
        background-color: #e8344e;
        border-color: #e8344e;
    }

    .btn-outline-sparta {
        color: #e8344e;
        background-color: transparent;
        background-image: none;
        border-color: #e8344e;
    }
</style>
<script>
    let word = '{{ word }}'
    $(document).ready(function () {
        {#get_definitions()#}
        {% if status=='old' %}
            get_examples()
        {% endif %}
    })

    function get_definitions() {
        $.ajax({
            type: "GET",
            url: `https://owlbot.info/api/v4/dictionary/${word}`,
            beforeSend: function (xhr) {
                xhr.setRequestHeader("Authorization", "Token be0f5ffabb32a681282efaf2a5602b2371c8c41f");
            },
            data: {},
            error: function (xhr, status, error) {
                alert("에러 발생!");
            },
            success: function (response) {
                console.log(response)
                $('#word').text(response['word'])
                if (response['pronunciation'] == null) {
                    $('#pronunciation').text('')
                } else {
                    $('#pronunciation').text(`/${response['pronunciation']}/`)
                }

                let definitions = response['definitions']
                $('#definitions').empty()
                for (let i = 0; i < definitions.length; i++) {
                    let definition = definitions[i]
                    let temp_html = ``
                    if (definition['example'] == null) {
                        temp_html = `<div style="padding:10px">
                                    <i>${definition['type']}</i>
                                    <br>${definition['definition']}<br>
                                       </div> `
                    } else {
                        temp_html = `<div style="padding:10px">
                                    <i>${definition['type']}</i>
                                    <br>${definition['definition']}<br>
                                    <span class="example">${definition['example']}</span>
                                    </div> `
                    }
                    $('#definitions').append(temp_html)
                }
            }
        })
    }

    function save_word() {
        $.ajax({
            type: "POST",
            url: `/api/save_word`,
            data: {
                word_give: '{{ word }}',
                definition_give: '{{ result.definitions[0].definition }}'
            },
            success: function (response) {
                alert(response["msg"])
                window.location.href = '/detail/{{ word }}?status_give=old'
            }
        });
    }

    function delete_word() {
        $.ajax({
            type: "POST",
            url: `/api/delete_word`,
            data: {
                word_give: '{{ word }}'
            },
            success: function (response) {
                alert(response["msg"])
                window.location.href = '/'
            }
        });
    }

    function get_examples() {
        $("#example-list").empty()
        $.ajax({
            type: "GET",
            url: `/api/get_exs?word_give=${word}`,
            data: {},
            success: function (response) {
                console.log(response)
                let examples = response['examples']
                for (let i = 0; i < examples.length; i++) {
                    let example = examples[i]["example"]
                    let html_temp = `<li id="ex-${i}">${example}&nbsp;&nbsp;&nbsp;<a
                        href="javascript:delete_ex(${i})">delete</a></li>
                        `
                    $('#example-list').append(html_temp)
                }
            }
        });
    }

    function add_ex() {
        let new_ex = $('#new-example').val();
        //console.log(new_ex)
        //new_ex.toLowerCase() 와 word.toLowerCase()  비교
        if (!new_ex.toLowerCase().includes(word.toLowerCase())) {
            alert(`${word}를 포함하는 문장을 써 주세요!`)
            return
        }
        $.ajax({
            type: "POST",
            url: `/api/save_ex`,
            data: {
                word_give: word,
                ex_give: new_ex
            },
            success: function (response) {
                console.log(response)
                get_examples()
                $('#new-example').val("")
            }
        });


    }

    function delete_ex(i) {
        console.log("deleting", i)
        $.ajax({
            type: "POST",
            url: `/api/delete_ex`,
            data: {
                word_give: word,
                number_give: i
            },
            success: function (response) {
                get_examples()
            }
        });
    }
</script>