@php
    /* ### Config 에 들어가는 변수
        1. [필수] type : 해당 값으로 DB 모델의 Class 를 다르게 작성해줘야 합니다 - 백단 케이스 추가 필요
        2. [필수] id : pk 값
        3. [선택] is_limit : Integer , 이 값으로 최대 댓글 개수가 제한됩니다. (무제한인경우, 전송금지!)

        이 외에 백단 처리시 필요한 데이터를 전송할 수 있습니다.
    */

    $config = isset($config) ? $config : [];
@endphp
<section x-data="commentPage" class="my-3" style="height: fit-content">
    <header><h6>댓글 <strong x-text="data.total"></strong> 건</h6></header>
    <main>
        @foreach ($config as $key => $val)
            <input type="hidden" name="{{ $key }}" id="{{ $key }}" value="{{ $val }}" class="config" />
        @endforeach

        <div class="memo-form m-box" x-show="onCheckWriteable()">
            <div class="font-weight-600 mb-2">작성하기</div>

            @if (isset($templates) && ! empty($templates))
                <div class="templates" id="templates">
                    @foreach($templates as $type => $template)
                        <div class="template font-sm" style="letter-spacing: -1px">
                            <label class="form-check-wrap">
                                <div>
                                    <input type="radio" name="template" value="{{ $type }}" class="form-check-input" @click="onChangeTemplate('{{ $type }}')" />
                                    <span class="name">{{ $type }}</span>
                                </div>
                                @if ($template)
                                <div class="text">{!! nl2br($template) !!}</div>
                                <div class="text-inline" style="display: none">{{ $template }}</div>
                                @endif
                            </label>
                        </div>
                    @endforeach
                </div>
            @endif



            <div class="reply-form" x-show="parent.name">
                <div class="reply-text">
                    <strong>@<span x-text="parent.name"></span></strong>
                    의 댓글에 답글을 입력하고 있습니다.
                </div>
                <a @click="onReplyReset()"><i class="bi bi-x"></i></a>
            </div>
            <textarea class="form-control form-control-sm" id="text" rows="5" name="text" x-model="text"></textarea>
            <div class="row mt-2">
                <div class="col-6 font-sm">
                    <span class="byteCnt">0</span>/2000 byte
                </div>
                <div class="col-6 align-right">
                    <input type="file" name="comment-files" id="commentFiles" style="display: none" @change="onUploadFiles" accept="image/*, video/*, application/pdf" multiple/>
                    <label class="btn btn-success btn-sm text-white" for="commentFiles">파일업로드</label>
                    <button class="btn btn-sm btn-primary" type="button" @click="onCreateComment()">등록</button>
                </div>
            </div>
            <div class="handle-list">
                <ul class="list-item-none flex">
                    <template x-for="(file , index ) in files" :key="index">
                        <li class="attachment">
                            <div class="attachment-info">
                                <span class="attachment-icon">
                                    <i class="bi bi-paperclip"></i>
                                </span>
                                <div class="attachment-title" x-text="file.name"></div>
                            </div>
                            <a class="btn-remove text-black" @click="onRemoveFile(index)">
                                <i class="bi bi-x"></i>
                            </a>
                        </li>
                    </template>
                </ul>
            </div>
        </div>

        <div class="memo-wrap memo-flex">
            <div class="memo-box">
                <div class="font-weight-600 my-3 memo-flex" x-show="onCheckWriteable()">
                    <div x-show="data.lastPage > 1">
                        <button class="btn btn-sm btn-secondary" type="button" @click="getComments(data.currentPage - 1 )" x-show="data.currentPage > 1"><i class="bi bi-caret-left"></i></button>
                        <button class="btn btn-sm bg-warning" x-text="data.currentPage"></button>
                        <button class="btn btn-sm btn-secondary" type="button" @click="getComments(data.currentPage + 1 )" x-show="data.currentPage < data.lastPage"><i class="bi bi-caret-right"></i></button>
                    </div>
                </div>
                <ul class="mt-3">
                    <template x-for="(item, index) in data.list" :key="index">
                        <li class="memo-item m-box mb-3" x-show="item.is_show" :class="{'reply' : item.parent_comment_id > 0}">
                            <div class="row mb-2 mt-0 mx-2 align-items-center">
                                <div class="col-6 memo-desc py-2 px-0">
                                    <div class="font-weight-600" x-text="item.name"></div>
                                    <div class="font-sm" x-text="item.date"></div>
                                </div>
                                <div class="align-right px-0 col-6 comment-buttons">
                                    <template x-if="item.activated == 0">
                                        <div class="mx-2 text-danger" style="letter-spacing: -1px; font-size: 0.8rem">
                                            <strong x-text="item.deactivated_type == 'admin' ? '관리자' : '작성자' "></strong>에 의해 삭제된 댓글입니다.
                                        </div>
                                    </template>

                                    <a @click="onReplyView(index)" href="javascript:void(0)" x-show="item.reply_cnt > 0">
                                        댓글보기(<span x-text="item.reply_cnt"></span>건)
                                    </a>

                                    <template x-if="item.activated == 1 && item.parent_comment_id == 0 && onCheckWriteable()">
                                        <a @click="onReplyComment(index)" href="javascript:void(0)">댓글달기</a>
                                    </template>
                                    <template  x-if="item.activated == 1 && item.is_mine">
                                        <span>
                                            <input type="file" name="comment-files" :id="`${index}_commentFiles`" style="display: none" @change="onUploadFiles(event, index)" accept="image/*, video/*, application/pdf" multiple/>
                                            <label class="btn btn-xsm btn-success" type="button" :for="`${index}_commentFiles`" x-show="item.is_update">
                                                <i class="bi bi-upload"></i>
                                            </label>
                                            <button class="btn btn-xsm btn-primary" type="button" @click="onClickChangeComment(index)">
                                                <i class="bi bi-pencil-square"></i>
                                            </button>
                                            <button class="btn btn-xsm btn-danger" type="button" @click="onRemoveComment(index)">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </span>
                                    </template>

                                </div>
                            </div>

                            <div class="mb-2">

                                <textarea class="form-control form-control-sm"
                                    x-ref="textarea"
                                    x-model="item.content" :disabled="! item.is_update"
                                ></textarea>
                                <div class="col-6 font-sm mt-2" x-show="item.is_update">
                                    <span class="byteCnt">0</span>/2000 byte
                                </div>

                            </div>
                            <div class="handle-list" x-show="item.attachments">
                                <ul class="list-item-none flex">
                                    <template x-for="(attachment , attachmentIndex ) in item.attachments" :key="`${index}_${attachmentIndex}`">
                                        <li class="attachment b-b-1">
                                            <div class="attachment-info">
                                                <span class="attachment-icon">
                                                    <i class="bi bi-paperclip"></i>
                                                </span>
                                                <div class="attachment-title">
                                                    <a x-text="attachment.name" :href="attachment.download_url ? attachment.download_url : 'javascript:void(0)'" download target="_blank"></a>
                                                </div>
                                            </div>
                                            <a class="btn-remove text-black" x-show="item.is_mine && item.is_update" @click="onRemoveFile(attachmentIndex, index)">
                                                <i class="bi bi-x"></i>
                                            </a>
                                        </li>
                                    </template>
                                </ul>
                            </div>
                        </li>
                    </template>
                </ul>
            </div>
        </div>
    </main>
</section>

<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer=""></script>

<script>
    const maxBytes = 2000;
    const maxHeight = 300;
    $(function() {
        $(document).on("keydown", 'textarea', function() {
            $(this).css("height",'auto');

            const height = (Number(this.scrollHeight) + 30) > maxHeight ? maxHeight : (Number(this.scrollHeight) + 30);
            $(this).css("height", height + 'px');


            let byteCnt = calculateBytes($(this).val());
            if (byteCnt > maxBytes) {
                byteCnt = maxBytes;
                $(this).val(truncateByBytes($(this).val(), maxBytes))
            }
            $(this).closest(".m-box").find('.byteCnt').text(byteCnt);

        })
    })

    document.addEventListener("alpine:init", () => {
        Alpine.data("commentPage" , () => ({
            data : {},
            parent : {},
            text : "",
            files: [],
            templates: {},
            page : 1,
            async init() {
                if ( $('#templates').length > 0 ) {
                    const templates = {};
                    $.each($('.template'), function() {

                        templates[$(this).find(".name").text()] =  $(this).find('.text-inline').text()

                    })
                    this.templates = templates
                }

                await this.getComments();
            }, onChangeTemplate(name) {
                this.text = this.templates[name];

            }, onUploadFiles(event, index = -1) {
                Array.from(event.target.files).forEach(file => {
                    if (index > -1) {
                        this.data.list[index].attachments.push(file);
                    } else {
                        this.files.push(file);
                    }
                });
            }, onRemoveFile(index, commentIndex = -1) {
                if (commentIndex >-1) {
                    this.data.list[commentIndex].attachments.splice(index, 1);
                } else {
                    this.files.splice(index, 1)
                }

            }, onReplyComment(index) {
                this.parent = this.data.list[index];
            }, onReplyView(index) {
                let item = this.data.list[index];
                item = {...item, is_reply_show : ! item.is_reply_show};

                this.data.list = this.data.list.map(comment => {
                    if (item.id === comment.parent_comment_id) {
                        comment.is_show = item.is_reply_show;
                    }

                    return item.id === comment.id ? item : comment;
                });

                if (item.is_reply_show) {
                    this.$nextTick(() => {
                        onLoadTextarea(false)
                    });
                }

            }, onReplyReset() {
                this.parent = {}
            }, onCheckWriteable() {
                let isWrite = true;
                if ($('#is_limit').length > 0) {
                    isWrite = $('#is_limit').val() > this.data.total ;
                }

                return isWrite;
            }, async onCreateComment() {
                if ($.isEmptyObject(this.text)) {
                    alertify.alert("error", "댓글 내용을 입력하세요");
                    return false;
                }

                const result = await createComment(this.text, this.files, this.parent ? this.parent.id : 0);
                if (result.status) {
                    await this.getComments();
                    this.text = "";
                    this.onReplyReset();
                    this.files = []

                } else {
                    alertify.alert("error", result.message);
                }
            },async onClickChangeComment(index) {
                const item = this.data.list[index];
                let status = true;
                if (item.is_update) {
                    status = await modifyComment(item);
                }

                if (status) {
                    item.is_update = ! item.is_update;
                }
            }, async getComments(page = 1) {

                const data = await getComments(page);

                const oldComments = this.data.list ? this.data.list.reduce((acc, item) => {
                    acc[item.id] = item;
                    return acc;
                }, {}) : { };

                this.data = data;
                this.data.list = this.data.list.map((comment) =>  ({...comment, is_show: comment.parent_comment_id == 0,  is_reply_show: false, is_update : false}) );

                if (this.page == page && oldComments ) {
                    const self = this;
                    this.data.list.forEach((comment, index) => {
                        if (oldComments[comment.id]) {
                            const oldComment = oldComments[comment.id];
                            if (oldComment.is_reply_show !== comment.is_reply_show) {
                                this.onReplyView(index);
                            }
                        }
                    });

                }

                this.page = page;
                this.$nextTick(() => {
                    onLoadTextarea()
                });
            }, onRemoveComment( index) {
                const item = this.data.list[index];
                const self = this;
                alertify.confirm("확인", "댓글을 삭제하시겠습니까?", async () => {
                    const status = await removeComment(item.id);
                    if (status) {
                        await self.getComments(self.page);
                    }
                }, () => { })
            }
        }))
    })

    function onLoadTextarea(isAll = true) {


        setInterval(() => {
            $("#text").trigger("keydown");
            const targets = isAll ? $(".memo-item textarea") : $(".memo-item.reply textarea")
            $.each(targets, function() {
                $(this).trigger("keydown");
            })
        }, 100);

    }

    async function getComments(page) {
        const params = $('.config').serialize() + "&page=" + page;
        const result = await customFetch("{{ route('api.comment.list') }}?" + params, {
            method: "GET",
            headers: { "Content-Type" : "application/json"}
        });

        if (result.status) {
            return result.data;
        }
    }

    async function createComment(text, files = [], parent_id = 0) {
        const formData = new FormData();
        $.each($('.config') , function() {
            formData.append($(this).attr('name'), $(this).val());
        })

        if (files) {
            $.each(files , function(index) {
                formData.append("attachments[]" , files[index])
            })
        }
        formData.append("content" , text);
        formData.append("parent_comment_id" , parent_id);
        const result = await customFetch("{{ route('api.comment.create') }}", {
            method: "POST",
            body: formData
        });

        return result;
    }

    async function modifyComment(comment) {
        const formData = new FormData();
        formData.append("comment_id" , comment.id);
        formData.append("content" , comment.content);

        if (comment.attachments) {
            $.each(comment.attachments , function(index) {
                const attachment = comment.attachments[index];
                if (attachment instanceof File) {
                    formData.append("attachments[]", attachment);
                } else {
                    formData.append("attachment_ids[]", attachment.id);
                }
            })
        }

        const result = await customFetch("{{ route('api.comment.modify') }}", {
            method: "POST",
            body: formData
        });

        return result;
    }

    async function removeComment(id) {
        const result = await customFetch("{{ route('api.comment.remove') }}", {
            method: "POST",
            body: JSON.stringify({"comment_id" : id, 'type' : $('#type').val(), 'prefix' : $('#prefix').val()}),
            headers: { "Content-Type" : "application/json"}
        });

        return result.status;
    }


</script>