class CommentItem extends HTMLElement {
    constructor() {
        super()
    }
    connectedCallback() {
        let objDetails = JSON.parse(this.getAttribute("data-details"));
        // remove the attribute to prevent re-rendering
        this.removeAttribute("data-details")
        this.innerHTML = this._template(objDetails);


        // add event listener
        $(this).find(".deleteComment").on("click", (e) => {
            this.deleteComment(objDetails["comment_id"])
        })

        $(this).find(".btnLikeComment").on("click", (e) => {
            if ($("#userMemberId").val() == "-1") return $(".handleLoginClick").click();

            $(e.target).closest(".btnLikeComment").toggleClass("!text-dark");
            this.likeComment(objDetails["like_uuid"])
            if ($(e.target).closest(".btnLikeComment").hasClass("!text-dark")) $(this).find(".commentLikeCount").html(+$(this).find(".commentLikeCount").html() + 1); else {
                $(this).find(".commentLikeCount").html(+$(this).find(".commentLikeCount").html() - 1)
            }
        })
    }
    _template({
        username,
        rating,
        comment,
        ary_tags,
        member_id,
        like_count,
        is_user_like
    }) {
        // <i class="fa-solid fa-star text-[#f77c18]"></i>
        // <i class="fa-solid fa-star-half-stroke "></i>
        // <i class="fa-solid fa-star text-slate-400"></i>


        return /* html */ `
        <div class="flex flex-nowrap justify-between py-4 md:py-8 bg-primary/5 hover:bg-primary/15  rounded transition duration-100 relative group select-none shadow-lg">
            <div class="max-sm:hidden w-3/12">
                <img tabindex="commentUserDetails" role="button" class="m-1 cursor-default rounded-full w-32 h-32 mx-auto shadow" src="/assets/svg/user-default-avatar.svg" />

                <p class="text-primary font-bold text-center">${username}</p>
                <div class="block px-3 bg-primary/80 text-white capitalize text-sm w-32 mx-auto rounded-full py-1 mt-2"><i class="fa-solid fa-check"></i> Recommends</div>
            </div>
            ${+member_id === +$("#userMemberId").val() ?
                /* html */`
                <div class="group-hover:flex hidden absolute top-2 right-4 flex-nowrap gap-2 text-lg">
                ${/* <button class="cursor-pointer px-2 py-1 btn btn-sm hover:bg-yellow-400 hover:text-white text-yellow-400"><i class="fa-solid fa-pen-to-square "></i></button> */ ""}
                    <button class="cursor-pointer px-2 py-1 btn btn-sm hover:bg-red-400 hover:text-white text-red-400 deleteComment"><i class="fa-solid fa-trash "></i></button>
                </div>`
                : ""
            }
            

            <div class="w-full md:w-9/12 px-4 grid grid-cols-1 gap-2 my-2">
                <p class="text-dark font-bold text-lg contents md:hidden">${username}</p>

                <div class="flex flex-nowrap  text-base items-center min-h-[1.5rem]">
                    ${[...Array(5)].map((_, i) => {
                if (i < rating) return `<i class="fa-solid fa-star text-[#f77c18]"></i>`
                else return `<i class="fa-solid fa-star text-slate-400"></i>`
            }).join("")
            }
                    <p class="text-slate-800 font-bold text-base mx-2">${rating} Star</p>
                </div>
                <hr  class="mb-2 block md:hidden border-slate-400"/>
                <p class="text-slate-500 select-default">${comment}</p>

                <div class="flex flex-wrap gap-1 gap-y-2 text-white font-semibold
                *-[div]:p-4 *-[div]:bg-primary/80 *-[div]:text-white *-[div]:text-xs
                ">
                    ${ary_tags.map(tag => {
                return `<div class="badge">${tag.tag_content}</div>`
            }).join("")}
                </div>

                <div class="hidden">
                    <div class="inline-block cursor-pointer text-slate-400 transition duration-100 editComment btnLikeComment active:scale-[1.2] ${is_user_like ? "!text-dark" : ""}" ><i class="fa-solid fa-thumbs-up "></i><span class="commentLikeCount mx-2">${like_count}</span></div>
                    ${/* <div class="inline-block cursor-pointer text-slate-400 hover:text-primary transition duration-150 "><i class="fa-solid fa-comment"></i> Comment</div> */ ""}
                </div>

            </div>
        </div>
    `
    }


    deleteComment(id) {
        // console.log(id)
        // delete the comment from the database
        let formData = new FormData();
        formData.append("member_id", +$("#userMemberId").val())
        axios.post(`/api/comment.php?METHODS=DELETE&comment_id=${id}`, formData)
            .then(res => {
                if (res.status != 204) return
                $(".btnGetComment").click()
            })
    }

    likeComment(uuid) {
        let formData = new FormData();
        formData.append("member_id", +$("#userMemberId").val())
        formData.append("like_uuid", uuid)

        axios.post(`/api/comment.php?METHODS=LIKE_COMMENT`, formData);
        return this.getLikeCount(uuid)
    }

    getLikeCount(uuid) {
        return axios.get(`/api/comment.php?METHODS=GET_LIKE_COUNT&like_uuid=${uuid}`);
    }


}

customElements.define("comment-item", CommentItem)