@extends("common.layout-popup")

@section("header")
    {!! resource("js/components/tab.js") !!}
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer=""></script>
@endsection

@section("page-title", "회원 메모")
@section("content")
    <input type="hidden" name="user_id" id="user_id" value="{{ $userId }}" />
    <section x-data="memoPage" class="my-3" style="height: fit-content">
        <header>메모</header>
        <main>
            <div class="memo-form m-box">
                <div class="font-weight-600 mb-2">작성하기</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">
                        <button class="btn btn-sm btn-primary" type="button" @click="onCraeteMemo()">등록</button>
                    </div>
                </div>
            </div>

            <div class="memo-wrap memo-flex">
                <div class="memo-box">
                    <div class="font-weight-600 my-3 memo-flex">
                        <div>
                            <span x-text="data.name" class="mr-3"></span>
                            <span x-text="data.total" class="text-primary"></span> 건
                        </div>
                        <div x-show="data.lastPage > 1">
                            <button class="btn btn-sm btn-secondary" type="button" @click="getMemos(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="getMemos(data.currentPage + 1 )" x-show="data.currentPage < data.lastPage"><i class="bi bi-caret-right"></i></button>
                        </div>
                    </div>
                    <ul class="custom-scroll mt-3 limit-height">
                        <template x-for="(item, index) in data.list" :key="index">
                            <li class="memo-item m-box mb-3">
                                <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" x-show="item.is_mine">
                                        <button class="btn btn-xsm btn-primary" type="button" @click="onClickChangeMemo( index)">
                                            <i class="bi bi-pencil-square"></i>
                                        </button>
                                        <button class="btn btn-xsm btn-danger" type="button" @click="onRemoveMemo( index)">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="mb-2">
                                    <textarea class="form-control form-control-sm"
                                        x-ref="textarea"
                                        x-model="item.memo" :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>
                            </li>
                        </template>
                    </ul>
                </div>
            </div>
        </main>
    </section>
@endsection
@push("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("memoPage" , () => ({
            data : {},
            user_id : 0,
            page : 1,
            text : "",
            async init() {

                this.user_id = $("#user_id") ? $("#user_id").val() : 0;
                await this.getMemos();

            }, async onCraeteMemo() {
                if ($.isEmptyObject(text)) {
                    alertify.alert("error", "메모 내용을 입력하세요");
                    return false;
                }

                const result = await createMemo(this.user_id, this.text);
                if (result.status) {
                    await this.getMemos();
                    this.text = ""

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

                if (status) {
                    item.is_update = ! item.is_update;
                }
            }, async getMemos(page = 1) {
                const data = await getMemoList(this.user_id, page);
                const self = this;
                $.each(data , function(type) {
                    self.data = data
                    self.data['list'] = self.data['list'].map((memo) => ( {...memo, is_update : false} ));
                })

                this.$nextTick(() => {
                    onLoadTextarea()
                });
            }, onRemoveMemo(index) {
                const item = this.data['list'][index];
                const self = this;
                alertify.confirm("확인", "메모를 삭제하시겠습니까?", async () => {
                    const status = await removeMemo(item.id);
                    if (status) {
                        await self.getMemos(type);
                    }
                }, () => { })
            }
        }))
    })

    function onLoadTextarea() {
        $("#text").trigger("keydown")
        $.each($(".memo-item textarea"), function() {
            $(this).trigger("keydown");
        })
    }

    async function getMemoList(user_id, page) {

        const params = {"user_id": user_id, 'page' : page}
        const result = await customFetch("{{ route('api.user.memo.list') }}?" + $.param(params), {
            method: "GET",
            headers: { "Content-Type" : "application/json"}
        });

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

    async function createMemo(user_id, text) {
        const result = await customFetch("{{ route('api.user.memo.create') }}", {
            method: "POST",
            body: JSON.stringify({"user_id": user_id, "text" : text}),
            headers: { "Content-Type" : "application/json"}
        });

        return result;
    }

    async function modifyMemo(memo) {
        const result = await customFetch("{{ route('api.user.memo.modify') }}", {
            method: "POST",
            body: JSON.stringify(memo),
            headers: { "Content-Type" : "application/json"}
        });

        return result.status;
    }

    async function removeMemo(id) {
        const result = await customFetch("{{ route('api.user.memo.remove') }}", {
            method: "POST",
            body: JSON.stringify({"id" : id}),
            headers: { "Content-Type" : "application/json"}
        });

        return result.status;
    }
</script>
@endpush