<!DOCTYPE html>
<html
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{layout/default_layout}"
>
<th:block  layout:fragment="head" id="head">
    <script type="text/javascript" th:src="@{/js/toast-ui.js}"></script>
    <script type="text/javascript" th:src="@{/js/blog.js}"></script>
    <link th:href="@{/css/blog.css}" rel="stylesheet" />
    <link th:href="@{/css/toast-ui.css}" rel="stylesheet" />
    <link th:href="@{/css/toast-ui-dark.css}" rel="stylesheet" />
    <!--    <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor-dark.css" />-->
    <script th:inline="javascript">
        var editor
        let onChange = () => {console.log(editor.getMarkdown())}
        document.addEventListener("DOMContentLoaded", onLoaded);
        function onLoaded() {
            var currentTitle =  [[${defaultTitle}]]
            getLocation()
            var titleField = document.getElementById('title_field')
            titleField.addEventListener("change", (event) => {
                baseData.title = titleField.value
                console.log(baseData.title)
            });
            titleField.value = currentTitle
            var style = getComputedStyle(document.body)
            console.log(style.getPropertyValue('--ContentVerticalMargin'))
            console.log(window.c)
            console.log(style.getPropertyValue('--FooterHeight'))
            console.log(style.getPropertyValue('--TopHeight'))
            var editorHeght = (
                document.querySelector('#main_layer').getBoundingClientRect().height * 0.7
            )

            editor = new toastui.Editor({
                el: document.querySelector('#editor'),
                previewStyle: 'tab',
                height: editorHeght + 'px',
                width:'95%',
                theme:'dark',
                usageStatistics : false,
                toolbar:null,
                initialValue:
                    "# 제목 " +"\n" +
                    "평문 사이에 **볼드체** *이탤릭체*"+"\n" +
                    "~~어디쓰지~~"+"\n" +
                    "***"+"\n" +
                    "### 모라모라 " +"\n" +
                    "> 으흐흠..." +"\n" +
                    "* 쓸까?" +"\n" +
                    "1. 첫번째" +"\n" +
                    "* [x] 체크하자" +"\n" +
                    "* [ ] 체크하자" +"\n" +
                    "    \|dd\|cc\|ff\|\n" +
                    "    \|\-\-\-\|\-\-\-\|\-\-\-\|\n" +
                    "    \|aa\|s\|s\|" +"\n" +
                    "[링크다](https://youtube.com)" +"\n" +
                    "`var test = 'real test'`" +"\n" +
                    "```\n" +
                    "let test= = 'real test'\n" +
                    "```"
                ,
                theme:"dark",
                initialEditType:"wysiwyg",
                hooks: {
                    addImageBlobHook: (blob, callback) => {
                        const formData = new FormData();
                        formData.append('file', blob);
                        let uploadUrl = getMainPath() + "/blog/post/imageUpload";
                        let imageUrl = getMainPath() + '/blog/post/images/';
                        $.ajax({
                            type: 'POST',
                            enctype: 'multipart/form-data',
                            url: uploadUrl,
                            data: formData,
                            dataType: 'json',
                            processData: false,
                            contentType: false,
                            cache: false,
                            timeout: 600000,
                            success: function (data) {
                                imageUrl += data.fileName;
                                callback(imageUrl, '사진 대체 텍스트 입력');
                            },
                            error: function (e) {
                                callback('image_load_fail', '사진 대체 텍스트 입력');
                            }
                        });
                    }
                }
            });
        }
        function save() {
            console.log(editor.getHTML())
            console.log(editor.getMarkdown())
            onclickWrite([[${enc}]],[[${keyword}]],editor.getMarkdown())
        }
    </script>
</th:block>
<th:block layout:fragment="content" id="content">
    <div id="main_layer">
        <th:block th:if="${PERMISSION != 'OK'}">
            <h1>권한이 없는 뎁쇼?!</h1>
        </th:block>
        <th:block th:if="${PERMISSION == 'OK'}">
            <div class="layer">
                <input id="title_field" class="write_option" />
            </div>
            <div id="editor" ></div>
            <div class="write_controllbox">

                <div class="write_option btn-example" to="#popLayer1" onclick="openPopup(this)"  ></div>
                <div style="width: 15px" ></div>
                <div class="write_option btn-example" to="#popLayer2" onclick="openPopup(this)" id="hashtag_field"></div>
                <div style="width: 15px" ></div>
                <label class="write_option" readonly id="location_field"></label>
            </div>
            <h1><button id="save" class="write_option" style="width: 100%; position: relative"  onclick="save()">저장하셈</button></h1>
        </th:block>
    </div>
</th:block>
<th:block layout:fragment="popup_layer">
    <div id="popLayer1" class="pop_layer">
        <div class="pop_container">
            <div class="pop_conts">
                <!--content //-->
                <p class="ctxt mb20">Thank you.<br>
                    Your registration was submitted successfully.<br>
                    Selected invitees will be notified by e-mail on JANUARY 24th.<br><br>
                    Hope to see you soon!
                </p>
                <div class="btn_r">
                    <a href="#" class="btn_layerClose">Close</a>
                </div>
                <!--// content-->
            </div>
        </div>
    </div>
    <div id="popLayer2" class="pop_layer">
        <div class="pop_container">
            <div class="pop_conts">
                <!--content //-->
                <p class="ctxt mb20">
                    test 002
                </p>
                <div class="btn_r">
                    <a href="#" class="btn_layerClose">Close</a>
                </div>
                <!--// content-->
            </div>
        </div>
    </div>
</th:block>

</html>
