/**
 * WordPress dependencies
 */
import { __ } from "@wordpress/i18n";
import { useEffect, useState, memo } from "@wordpress/element";
import { applyFilters } from "@wordpress/hooks";
import { dateI18n, format, getSettings } from "@wordpress/date";
import { isEmpty } from "lodash";
import { safeHTML } from "@wordpress/dom";

/**
 * Externnal depencencies
 */
import parse from "html-react-parser";

/**
 * Internal depencencies
 */
import Inspector from "./inspector";
import Style from "./style";
import PostGridIcon from "./icon";
import { Templates } from './templates/templates'
import defaultAttributes from './attributes';
import {
    ebJsonStringCheck,
    CustomQuery,
    DynamicInputValueHandler,
    EBDisplayIcon,
    BrowseTemplate,
    BlockProps,
    withBlockContext
} from "@essential-blocks/controls";

const Edit = (props) => {
    const { attributes, setAttributes, isSelected } = props;
    const {
        blockId,
        preset,
        queryData,
        loadMoreOptions,
        showThumbnail,
        thumbnailSize,
        showTitle,
        titleLength,
        titleTag,
        showContent,
        contentLength,
        expansionIndicator,
        showReadMore,
        readmoreText,
        showMeta,
        headerMeta,
        footerMeta,
        authorPrefix,
        datePrefix,
        showTaxonomyFilter,
        selectedTaxonomyItems,
        showSearch,
        enableAjaxSearch,
        classHook,
        cover,
        addIcon,
        iconPosition,
        icon,
        enableContents,
        enableThumbnailSort,
        defaultFilter,
        version,
        showBlockContent,
        showFallbackImg,
        fallbackImgUrl,
        fallbackImgAlt,
    } = attributes;

    const dateFormat = getSettings().formats.date;
    const [searchText, setSearchText] = useState("");
    const [loadingSearch, setLoadingSearch] = useState(false);
    const [showSearchResultsWrapper, setShowSearchResultsWrapper] = useState(false);
    const [searchResults, setSearchResults] = useState("");
    const [searchError, setSearchError] = useState(false);
    const [queryResults, setQueryResults] = useState(false);
    const [didMount, setDidMount] = useState(false);
    const isContentEnabled = (contentName) => enableContents.includes(contentName);

    // you must declare this variable
    const enhancedProps = {
        ...props,
        blockPrefix: 'eb-post-grid',
        style: <Style {...props} isContentEnabled={isContentEnabled} />
    };

    // this useEffect is for creating a unique id for each block's unique className by a random unique number
    useEffect(() => {
        setTimeout(() => {
            setDidMount(true)
        }, 1500)

        if (!version) {
            setAttributes({ version: 'v2' });
        }
    }, []);

    useEffect(() => {
        //If Preset is 4/5, make enableThumbnailSort to false
        if (['style-1', 'style-2', 'style-3'].includes(preset) === false) {
            setAttributes({ enableThumbnailSort: false })
        }
    }, [preset])

    const paginationLinks = (options, perPage) => {
        const totalPages = Math.floor(options.totalPosts / perPage);
        let html = "";
        html += `<button class="ebpg-pagination-item-previous">${options.prevTxt}</button>`;
        for (let i = 1; i <= totalPages; i++) {
            if (i === 1) {
                html += `<button class="ebpg-pagination-item active">${i}</button>`;
            } else if (i <= 3) {
                html += `<button class="ebpg-pagination-item">${i}</button>`;
            } else if (i === totalPages) {
                html += '<button class="ebpg-pagination-item-separator">...</button>';
                html += `<button class="ebpg-pagination-item">${i}</button>`;
            } else {
                html += "";
            }
        }
        html += `<button class="ebpg-pagination-item-next">${options.nextTxt}</button>`;
        return html;
    };

    const thumbnailImageUrl = (media) => {
        if (!thumbnailSize) {
            return media.source_url;
        } else if (media?.media_details?.sizes) {
            const sizes = media.media_details.sizes;
            if (sizes[thumbnailSize] && sizes[thumbnailSize].source_url) {
                return sizes[thumbnailSize].source_url;
            } else {
                return media.source_url;
            }
        }
    };

    const ebReadingTime = (text) => {
        if (!text) {
            return 0;
        }
        const wpm = 200;
        text = text.replace(/(<([^>]+)>)/gi, "");
        const words = text.trim().split(/\s+/).length;
        const time = Math.ceil(words / wpm);
        return time;
    };

    // search result
    useEffect(() => {
        const searchTextlength = searchText.length;
        if (searchTextlength == 0) {
            setShowSearchResultsWrapper(false);
        }

        if (!isEmpty(searchText)) {
            setLoadingSearch(true);
            setShowSearchResultsWrapper(true);

            let data = new FormData();
            data.append("action", "post_grid_search_result_content");
            data.append("post_grid_search_nonce", EssentialBlocksProLocalize.post_grid_search_nonce);

            data.append("searchKey", searchText);
            data.append("query_data", JSON.stringify(queryData));
            data.append("attributes", JSON.stringify(attributes));

            fetch(EssentialBlocksProLocalize.ajax_url, {
                method: "POST",
                body: data,
            }) // wrapped
                .then((res) => res.text())
                .then((data) => {
                    const response = JSON.parse(data);

                    if (response.success && response.data) {
                        //check post list
                        setSearchResults(response.data);
                        setLoadingSearch(false);
                        setSearchError(false);
                    } else {
                        setSearchError(true);
                        setLoadingSearch(false);
                    }
                })
                .catch((err) => console.log(err));
        }
    }, [searchText, enableAjaxSearch]);

    return cover.length ? (
        <div>
            <img src={cover} alt="post grid" style={{ maxWidth: "100%" }} />
        </div>
    ) : (
        <>
            {isSelected && showBlockContent && <Inspector
                {...props}
                isContentEnabled={isContentEnabled}
                setQueryResults={setQueryResults} />
            }

            {showBlockContent && didMount === false && (
                <>
                    {queryResults === false && (
                        <div className="eb-loading">
                            <img src={`${EssentialBlocksLocalize?.image_url}/ajax-loader.gif`} alt="Loading..." />
                        </div>
                    )}
                    <CustomQuery
                        isEdit={true}
                        attributes={attributes}
                        setAttributes={setAttributes}
                        setQueryResults={setQueryResults}
                    />
                </>
            )}

            <BlockProps.Edit {...enhancedProps}>

                <BrowseTemplate
                    {...props}
                    Icon={PostGridIcon}
                    title={"Post Grid"}
                    description={"Choose a template for the Post Grid or start blank."}
                    patterns={applyFilters('eb_pro_templates_post_grid', Templates)}
                />

                {showBlockContent && (
                    <>
                        <div className={`eb-parent-wrapper eb-parent-${blockId} ${classHook}`}>

                            {/* {queryResults === false && (
                        <div className="eb-loading">
                            <img src={`${EssentialBlocksLocalize?.image_url}/ajax-loader.gif`} alt="Loading" />
                        </div>
                    )} */}
                            <div className={`eb-post-grid-wrapper ${blockId} ${preset}`} data-id={blockId}>
                                {queryResults !== false && (
                                    <>
                                        {!showTaxonomyFilter && showSearch && (
                                            <>
                                                {applyFilters(
                                                    "eb_post_grid_pro_search_html",
                                                    "",
                                                    attributes,
                                                    setAttributes,
                                                    searchText,
                                                    showSearchResultsWrapper,
                                                    searchResults,
                                                    searchError,
                                                    setSearchText
                                                )}
                                            </>
                                        )}
                                        {showTaxonomyFilter && (
                                            <div className={`eb-post-grid-category-filter${showSearch ? " eb-show-search" : ""}`}>
                                                <ul className="ebpg-category-filter-list">
                                                    {JSON.parse(selectedTaxonomyItems).length > 0 &&
                                                        JSON.parse(selectedTaxonomyItems).map((catItem, catIndex) => (
                                                            <li
                                                                key={catIndex}
                                                                className={`ebpg-category-filter-list-item ${catItem.value === "all" ? "active" : ""
                                                                    }`}
                                                            >
                                                                {catItem.label}
                                                            </li>
                                                        ))}
                                                </ul>
                                                {showSearch && (
                                                    <>
                                                        {applyFilters(
                                                            "eb_post_grid_pro_search_html",
                                                            "",
                                                            attributes,
                                                            setAttributes,
                                                            searchText,
                                                            showSearchResultsWrapper,
                                                            searchResults,
                                                            searchError,
                                                            setSearchText
                                                        )}
                                                    </>
                                                )}
                                            </div>
                                        )}
                                    </>
                                )}

                                {/* with version */}
                                {version === 'v2' && (
                                    <div className="eb-post-grid-posts-wrapper">
                                        {queryResults && typeof queryResults === "object" && queryResults.length > 0 &&
                                            queryResults.map((post, index) => {
                                                //Generate Featured Image
                                                const { featuredImageInfo: { url: imageSourceUrl, alt: featuredImageAlt } = {} } = post;
                                                const featuredImage = showThumbnail && (
                                                    <img key={index} src={imageSourceUrl} alt={featuredImageAlt} />
                                                );

                                                //Generate Title
                                                const title = post?.title?.rendered;
                                                const titleWithLimitWords =
                                                    titleLength >= 0 ? title.trim().split(" ", titleLength).join(" ") : title;
                                                const titleHTML = safeHTML(`
								<${titleTag} class="ebpg-entry-title">
									<a class="ebpg-grid-post-link" href="#" title="">
										${titleWithLimitWords}
									</a>
								</${titleTag}>
							`);

                                                //Generate Excerpt & Read More
                                                let excerpt = post?.excerpt?.rendered;
                                                const excerptElement = document.createElement("div");
                                                excerptElement.innerHTML = excerpt ? excerpt : "";
                                                excerpt = excerptElement.textContent || excerptElement.innerText || "";
                                                const excerptWithLimitWords =
                                                    contentLength >= 0 ? excerpt.trim().split(" ", contentLength).join(" ") : excerpt;

                                                const avatarUrl = (author) => {
                                                    if (author.avatar_urls && author.avatar_urls[96]) {
                                                        return author.avatar_urls[96];
                                                    } else {
                                                        return "http://1.gravatar.com/avatar/467ceabf70aaa0e555b7dd11c9729241?s=96&d=mm&r=g";
                                                    }
                                                };
                                                const avatar = post?._embedded?.author ? (
                                                    <div className="ebpg-author-avatar">
                                                        <a href={"#"}>
                                                            <img
                                                                alt={
                                                                    post._embedded.author[0].name
                                                                        ? post._embedded.author[0].name
                                                                        : post._embedded.author[0].slug
                                                                }
                                                                src={avatarUrl(post._embedded.author[0])}
                                                            />
                                                        </a>
                                                    </div>
                                                ) : (
                                                    ""
                                                );
                                                const date = (
                                                    <span className="ebpg-posted-on">
                                                        <DynamicInputValueHandler
                                                            value={datePrefix}
                                                            tagName="span"
                                                            onChange={(datePrefix) =>
                                                                setAttributes({
                                                                    datePrefix,
                                                                })
                                                            }
                                                            readOnly={true}
                                                        />{" "}
                                                        <time
                                                            dateTime={format(
                                                                "c",
                                                                post.date_gmt
                                                            )}
                                                        >
                                                            {dateI18n(
                                                                dateFormat,
                                                                post.date_gmt
                                                            )}
                                                        </time>
                                                    </span>
                                                );
                                                const author = post?._embedded?.author ? (
                                                    <span className="ebpg-posted-by">
                                                        <DynamicInputValueHandler
                                                            value={authorPrefix}
                                                            tagName="span"
                                                            onChange={(authorPrefix) =>
                                                                setAttributes({
                                                                    authorPrefix,
                                                                })
                                                            }
                                                            readOnly={true}
                                                        />{" "}
                                                        <a
                                                            href={"#"}
                                                            title={
                                                                post._embedded.author[0].name
                                                                    ? post._embedded.author[0].name
                                                                    : post._embedded.author[0].slug
                                                            }
                                                            rel="author"
                                                        >
                                                            {post._embedded.author[0].name
                                                                ? post._embedded.author[0].name
                                                                : post._embedded.author[0].slug}
                                                        </a>
                                                    </span>
                                                ) : (
                                                    ""
                                                );

                                                const postTermsVal = {};
                                                post._embedded &&
                                                    post._embedded["wp:term"] &&
                                                    post._embedded["wp:term"].length > 0 &&
                                                    post._embedded["wp:term"].map((item) => {
                                                        let termObj = {};
                                                        let termName = "";
                                                        item.length > 0 &&
                                                            item.map((term) => {
                                                                termName = term.taxonomy;
                                                                termObj[term.slug] = {
                                                                    name: term.name,
                                                                    id: term.id,
                                                                    link: term.link,
                                                                    slug: term.slug,
                                                                };
                                                            });
                                                        postTermsVal[termName] = termObj;
                                                    });

                                                const postTermsHtml = {};
                                                if (Object.keys(postTermsVal).length > 0) {
                                                    Object.keys(postTermsVal).map((term) => {
                                                        let termClass = term;
                                                        if (term === "category") {
                                                            termClass = "categories";
                                                        } else if (term === "post_tag") {
                                                            termClass = "tags";
                                                        }
                                                        let markup = `<div className="ebpg-meta ebpg-${termClass}-meta">`;
                                                        Object.keys(postTermsVal[term]).length > 0 &&
                                                            Object.keys(postTermsVal[term]).map((item, index) => {
                                                                markup += `
											<a
												key=${index}
												href="#"
												title=${postTermsVal[term][item].name}
											>
												${postTermsVal[term][item].name}
											</a>
										`;
                                                            });
                                                        markup += `</div>`;
                                                        postTermsHtml[term] = markup;
                                                    });
                                                }

                                                const categories = postTermsVal.category ? (
                                                    <div className="ebpg-meta ebpg-categories-meta">
                                                        {Object.keys(postTermsVal.category).map((item, index) => (
                                                            <a key={index} href={"#"} title={postTermsVal.category[item].name}>
                                                                {postTermsVal.category[item].name}
                                                            </a>
                                                        ))}
                                                    </div>
                                                ) : (
                                                    ""
                                                );

                                                const tags = postTermsVal.post_tag ? (
                                                    <div className="ebpg-meta ebpg-tags-meta">
                                                        {Object.keys(postTermsVal.post_tag).map((item, index) => (
                                                            <a key={index} href={"#"} title={postTermsVal.post_tag[item].name}>
                                                                {postTermsVal.post_tag[item].name}
                                                            </a>
                                                        ))}
                                                    </div>
                                                ) : (
                                                    ""
                                                );

                                                const calcTime = ebReadingTime(post?.content?.rendered);
                                                const readtime = (
                                                    <span className="ebpg-read-time">
                                                        <i className={"fas fa-clock"}></i>
                                                        {`${calcTime} ${calcTime > 1 ? "minutes" : "minute"} read`}
                                                    </span>
                                                );

                                                const metaObject = {
                                                    date,
                                                    author,
                                                    categories,
                                                    tags,
                                                    readtime,
                                                };

                                                const headerMetaItems = ebJsonStringCheck(headerMeta)
                                                    ? JSON.parse(headerMeta).map((item) => item.value)
                                                    : [];

                                                const headerMetaHtml = showMeta ? (
                                                    <div className="ebpg-entry-meta ebpg-header-meta">
                                                        {headerMetaItems.includes("avatar") && avatar}
                                                        <div className="ebpg-entry-meta-items">
                                                            {headerMetaItems.map((item) => {
                                                                if (metaObject.hasOwnProperty(item)) {
                                                                    return metaObject[item];
                                                                } else if (postTermsHtml.hasOwnProperty(item)) {
                                                                    return parse(postTermsHtml[item]);
                                                                } else {
                                                                    if (item === "avatar") {
                                                                        return;
                                                                    }
                                                                    return applyFilters(
                                                                        "essential_blocks_post_grid_dynamic_fields_markup",
                                                                        "",
                                                                        item
                                                                    );
                                                                }
                                                            })}
                                                        </div>
                                                    </div>
                                                ) : (
                                                    ""
                                                );

                                                const footerMetaItems = ebJsonStringCheck(footerMeta)
                                                    ? JSON.parse(footerMeta).map((item) => item.value)
                                                    : [];
                                                const footerMetaHtml = showMeta ? (
                                                    <div className="ebpg-entry-meta ebpg-footer-meta">
                                                        {footerMetaItems.includes("avatar") && avatar}
                                                        <div className="ebpg-entry-meta-items">
                                                            {footerMetaItems.map((item) => {
                                                                if (metaObject.hasOwnProperty(item)) {
                                                                    return metaObject[item];
                                                                } else if (postTermsHtml.hasOwnProperty(item)) {
                                                                    return parse(postTermsHtml[item]);
                                                                } else {
                                                                    if (item === "avatar") {
                                                                        return;
                                                                    }
                                                                    return applyFilters(
                                                                        "essential_blocks_post_grid_dynamic_fields_markup",
                                                                        "",
                                                                        item
                                                                    );
                                                                }
                                                            })}
                                                        </div>
                                                    </div>
                                                ) : (
                                                    ""
                                                );

                                                return (
                                                    <article className="ebpg-grid-post ebpg-post-grid-column" data-id={post.id}>
                                                        <div className="ebpg-grid-post-holder">
                                                            {showThumbnail && !enableThumbnailSort && (
                                                                <>
                                                                    {preset === "style-5" && (
                                                                        <a className="ebpg-post-link-wrapper" href="#"></a>
                                                                    )}
                                                                    <div className="ebpg-entry-media">
                                                                        {showThumbnail && (
                                                                            <div className="ebpg-entry-thumbnail">
                                                                                {preset !== "style-5" && (
                                                                                    <a className="ebpg-post-link-wrapper" href="#"></a>
                                                                                )}
                                                                                {post._embedded &&
                                                                                    post._embedded["wp:featuredmedia"] &&
                                                                                    post._embedded["wp:featuredmedia"].length > 0 && (
                                                                                        <img
                                                                                            src={thumbnailImageUrl(
                                                                                                post._embedded["wp:featuredmedia"][0]
                                                                                            )}
                                                                                            alt={post?.title?.alt_text}
                                                                                        />
                                                                                    )}
                                                                                {post._embedded &&
                                                                                    !post._embedded["wp:featuredmedia"] && (
                                                                                        <>
                                                                                            {showFallbackImg && fallbackImgUrl && (
                                                                                                <img
                                                                                                    src={fallbackImgUrl}
                                                                                                    alt={`${fallbackImgAlt ? fallbackImgAlt : `No Thumbnail Available`}`}
                                                                                                />
                                                                                            )}

                                                                                            {(!showFallbackImg || (showFallbackImg && fallbackImgUrl === undefined)) && (
                                                                                                <img
                                                                                                    src={EssentialBlocksLocalize?.placeholder_image}
                                                                                                    alt="No Thumbnail Available"
                                                                                                />
                                                                                            )}
                                                                                        </>
                                                                                    )}
                                                                            </div>
                                                                        )}
                                                                    </div>
                                                                </>
                                                            )}

                                                            <div className="ebpg-entry-wrapper">
                                                                {(preset == "style-1" || preset == "style-2" || preset == "style-3") && showThumbnail && enableThumbnailSort && (
                                                                    <>
                                                                        <div className="ebpg-entry-media">
                                                                            <div className="ebpg-entry-thumbnail">
                                                                                <a className="ebpg-post-link-wrapper" href="#"></a>
                                                                                {post._embedded &&
                                                                                    post._embedded["wp:featuredmedia"] &&
                                                                                    post._embedded["wp:featuredmedia"].length >
                                                                                    0 && (
                                                                                        <img
                                                                                            src={thumbnailImageUrl(
                                                                                                post._embedded[
                                                                                                "wp:featuredmedia"
                                                                                                ][0]
                                                                                            )}
                                                                                            alt={post?.title?.alt_text}
                                                                                        />
                                                                                    )}
                                                                                {post._embedded &&
                                                                                    !post._embedded["wp:featuredmedia"] && (
                                                                                        <>
                                                                                            {showFallbackImg && fallbackImgUrl && (
                                                                                                <img
                                                                                                    src={fallbackImgUrl}
                                                                                                    alt={`${fallbackImgAlt ? fallbackImgAlt : `No Thumbnail Available`}`}
                                                                                                />
                                                                                            )}

                                                                                            {(!showFallbackImg || (showFallbackImg && fallbackImgUrl === undefined)) && (
                                                                                                <img
                                                                                                    src={EssentialBlocksLocalize?.placeholder_image}
                                                                                                    alt="No Thumbnail Available"
                                                                                                />
                                                                                            )}
                                                                                        </>
                                                                                    )}
                                                                            </div>
                                                                        </div>
                                                                    </>
                                                                )}

                                                                {showTitle && (
                                                                    <header
                                                                        className="ebpg-entry-header"
                                                                        dangerouslySetInnerHTML={{
                                                                            __html: titleHTML,
                                                                        }}
                                                                    ></header>
                                                                )}

                                                                {/* Header Meta */}
                                                                {showMeta && headerMetaHtml}

                                                                <div className="ebpg-entry-content">
                                                                    {showContent && (
                                                                        <div className="ebpg-grid-post-excerpt">
                                                                            <p>
                                                                                {excerptWithLimitWords}
                                                                                {__(expansionIndicator)}
                                                                            </p>
                                                                        </div>
                                                                    )}
                                                                    {showReadMore && (
                                                                        <div className="ebpg-readmore-btn">
                                                                            <a href={'#'}>
                                                                                {addIcon && iconPosition === "left" ? (
                                                                                    <EBDisplayIcon icon={icon} className={"eb-button-icon eb-button-icon-left hvr-icon"} />
                                                                                ) : (
                                                                                    ""
                                                                                )}
                                                                                <DynamicInputValueHandler
                                                                                    value={
                                                                                        readmoreText
                                                                                    }
                                                                                    tagName="span"
                                                                                    onChange={(
                                                                                        readmoreText
                                                                                    ) =>
                                                                                        setAttributes(
                                                                                            {
                                                                                                readmoreText,
                                                                                            }
                                                                                        )
                                                                                    }
                                                                                    readOnly={
                                                                                        true
                                                                                    }
                                                                                />
                                                                                {addIcon && iconPosition === "right" ? (
                                                                                    <i
                                                                                        className={`${icon} eb-button-icon eb-button-icon-left hvr-icon`}
                                                                                    ></i>
                                                                                ) : (
                                                                                    ""
                                                                                )}
                                                                            </a>
                                                                        </div>
                                                                    )}
                                                                </div>

                                                                {/* Footer Meta */}
                                                                {showMeta && footerMetaHtml}
                                                            </div>
                                                        </div>
                                                    </article>
                                                );
                                            })}
                                    </div>)
                                }

                                {/* no version */}
                                {!version && queryResults && typeof queryResults === "object" && queryResults.length > 0 &&
                                    queryResults.map((post, index) => {
                                        //Generate Featured Image
                                        const { featuredImageInfo: { url: imageSourceUrl, alt: featuredImageAlt } = {} } = post;
                                        const featuredImage = showThumbnail && (
                                            <img key={index} src={imageSourceUrl} alt={featuredImageAlt} />
                                        );

                                        //Generate Title
                                        const title = post?.title?.rendered;
                                        const titleWithLimitWords =
                                            titleLength >= 0 ? title.trim().split(" ", titleLength).join(" ") : title;
                                        const titleHTML = `
								<${titleTag} class="ebpg-entry-title">
									<a class="ebpg-grid-post-link" href="#" title="">
										${titleWithLimitWords}
									</a>
								</${titleTag}>
							`;

                                        //Generate Excerpt & Read More
                                        let excerpt = post?.excerpt?.rendered;
                                        const excerptElement = document.createElement("div");
                                        excerptElement.innerHTML = excerpt ? excerpt : "";
                                        excerpt = excerptElement.textContent || excerptElement.innerText || "";
                                        const excerptWithLimitWords =
                                            contentLength >= 0 ? excerpt.trim().split(" ", contentLength).join(" ") : excerpt;

                                        const avatarUrl = (author) => {
                                            if (author.avatar_urls && author.avatar_urls[96]) {
                                                return author.avatar_urls[96];
                                            } else {
                                                return "http://1.gravatar.com/avatar/467ceabf70aaa0e555b7dd11c9729241?s=96&d=mm&r=g";
                                            }
                                        };
                                        const avatar = post?._embedded?.author ? (
                                            <div className="ebpg-author-avatar">
                                                <a href={"#"}>
                                                    <img
                                                        alt={
                                                            post._embedded.author[0].name
                                                                ? post._embedded.author[0].name
                                                                : post._embedded.author[0].slug
                                                        }
                                                        src={avatarUrl(post._embedded.author[0])}
                                                    />
                                                </a>
                                            </div>
                                        ) : (
                                            ""
                                        );
                                        const date = (
                                            <span className="ebpg-posted-on">
                                                <DynamicInputValueHandler
                                                    value={datePrefix}
                                                    tagName="span"
                                                    onChange={(datePrefix) =>
                                                        setAttributes({
                                                            datePrefix,
                                                        })
                                                    }
                                                    readOnly={true}
                                                />{" "}
                                                <time
                                                    dateTime={format(
                                                        "c",
                                                        post.date_gmt
                                                    )}
                                                >
                                                    {dateI18n(
                                                        dateFormat,
                                                        post.date_gmt
                                                    )}
                                                </time>
                                            </span>
                                        );
                                        const author = post?._embedded?.author ? (
                                            <span className="ebpg-posted-by">
                                                <DynamicInputValueHandler
                                                    value={authorPrefix}
                                                    tagName="span"
                                                    onChange={(authorPrefix) =>
                                                        setAttributes({
                                                            authorPrefix,
                                                        })
                                                    }
                                                    readOnly={true}
                                                />{" "}
                                                <a
                                                    href={"#"}
                                                    title={
                                                        post._embedded.author[0].name
                                                            ? post._embedded.author[0].name
                                                            : post._embedded.author[0].slug
                                                    }
                                                    rel="author"
                                                >
                                                    {post._embedded.author[0].name
                                                        ? post._embedded.author[0].name
                                                        : post._embedded.author[0].slug}
                                                </a>
                                            </span>
                                        ) : (
                                            ""
                                        );

                                        const postTermsVal = {};
                                        post._embedded &&
                                            post._embedded["wp:term"] &&
                                            post._embedded["wp:term"].length > 0 &&
                                            post._embedded["wp:term"].map((item) => {
                                                let termObj = {};
                                                let termName = "";
                                                item.length > 0 &&
                                                    item.map((term) => {
                                                        termName = term.taxonomy;
                                                        termObj[term.slug] = {
                                                            name: term.name,
                                                            id: term.id,
                                                            link: term.link,
                                                            slug: term.slug,
                                                        };
                                                    });
                                                postTermsVal[termName] = termObj;
                                            });

                                        const postTermsHtml = {};
                                        if (Object.keys(postTermsVal).length > 0) {
                                            Object.keys(postTermsVal).map((term) => {
                                                let termClass = term;
                                                if (term === "category") {
                                                    termClass = "categories";
                                                } else if (term === "post_tag") {
                                                    termClass = "tags";
                                                }
                                                let markup = `<div className="ebpg-meta ebpg-${termClass}-meta">`;
                                                Object.keys(postTermsVal[term]).length > 0 &&
                                                    Object.keys(postTermsVal[term]).map((item, index) => {
                                                        markup += `
											<a
												key=${index}
												href="#"
												title=${postTermsVal[term][item].name}
											>
												${postTermsVal[term][item].name}
											</a>
										`;
                                                    });
                                                markup += `</div>`;
                                                postTermsHtml[term] = markup;
                                            });
                                        }

                                        const categories = postTermsVal.category ? (
                                            <div className="ebpg-meta ebpg-categories-meta">
                                                {Object.keys(postTermsVal.category).map((item, index) => (
                                                    <a key={index} href={"#"} title={postTermsVal.category[item].name}>
                                                        {postTermsVal.category[item].name}
                                                    </a>
                                                ))}
                                            </div>
                                        ) : (
                                            ""
                                        );

                                        const tags = postTermsVal.post_tag ? (
                                            <div className="ebpg-meta ebpg-tags-meta">
                                                {Object.keys(postTermsVal.post_tag).map((item, index) => (
                                                    <a key={index} href={"#"} title={postTermsVal.post_tag[item].name}>
                                                        {postTermsVal.post_tag[item].name}
                                                    </a>
                                                ))}
                                            </div>
                                        ) : (
                                            ""
                                        );

                                        const calcTime = ebReadingTime(post?.content?.rendered);
                                        const readtime = (
                                            <span className="ebpg-read-time">
                                                <i className={"fas fa-clock"}></i>
                                                {`${calcTime} ${calcTime > 1 ? "minutes" : "minute"} read`}
                                            </span>
                                        );

                                        const metaObject = {
                                            date,
                                            author,
                                            categories,
                                            tags,
                                            readtime,
                                        };

                                        const headerMetaItems = ebJsonStringCheck(headerMeta)
                                            ? JSON.parse(headerMeta).map((item) => item.value)
                                            : [];

                                        const headerMetaHtml = showMeta ? (
                                            <div className="ebpg-entry-meta ebpg-header-meta">
                                                {headerMetaItems.includes("avatar") && avatar}
                                                <div className="ebpg-entry-meta-items">
                                                    {headerMetaItems.map((item) => {
                                                        if (metaObject.hasOwnProperty(item)) {
                                                            return metaObject[item];
                                                        } else if (postTermsHtml.hasOwnProperty(item)) {
                                                            return parse(postTermsHtml[item]);
                                                        } else {
                                                            if (item === "avatar") {
                                                                return;
                                                            }
                                                            return applyFilters(
                                                                "essential_blocks_post_grid_dynamic_fields_markup",
                                                                "",
                                                                item
                                                            );
                                                        }
                                                    })}
                                                </div>
                                            </div>
                                        ) : (
                                            ""
                                        );

                                        const footerMetaItems = ebJsonStringCheck(footerMeta)
                                            ? JSON.parse(footerMeta).map((item) => item.value)
                                            : [];
                                        const footerMetaHtml = showMeta ? (
                                            <div className="ebpg-entry-meta ebpg-footer-meta">
                                                {footerMetaItems.includes("avatar") && avatar}
                                                <div className="ebpg-entry-meta-items">
                                                    {footerMetaItems.map((item) => {
                                                        if (metaObject.hasOwnProperty(item)) {
                                                            return metaObject[item];
                                                        } else if (postTermsHtml.hasOwnProperty(item)) {
                                                            return parse(postTermsHtml[item]);
                                                        } else {
                                                            if (item === "avatar") {
                                                                return;
                                                            }
                                                            return applyFilters(
                                                                "essential_blocks_post_grid_dynamic_fields_markup",
                                                                "",
                                                                item
                                                            );
                                                        }
                                                    })}
                                                </div>
                                            </div>
                                        ) : (
                                            ""
                                        );

                                        return (
                                            <article className="ebpg-grid-post ebpg-post-grid-column" data-id={post.id}>
                                                <div className="ebpg-grid-post-holder">
                                                    {showThumbnail && !enableThumbnailSort && (
                                                        <>
                                                            {preset === "style-5" && (
                                                                <a className="ebpg-post-link-wrapper" href="#"></a>
                                                            )}
                                                            <div className="ebpg-entry-media">
                                                                {showThumbnail && (
                                                                    <div className="ebpg-entry-thumbnail">
                                                                        {preset !== "style-5" && (
                                                                            <a className="ebpg-post-link-wrapper" href="#"></a>
                                                                        )}
                                                                        {post._embedded &&
                                                                            post._embedded["wp:featuredmedia"] &&
                                                                            post._embedded["wp:featuredmedia"].length > 0 && (
                                                                                <img
                                                                                    src={thumbnailImageUrl(
                                                                                        post._embedded["wp:featuredmedia"][0]
                                                                                    )}
                                                                                    alt={post?.title?.alt_text}
                                                                                />
                                                                            )}
                                                                        {post._embedded &&
                                                                            !post._embedded["wp:featuredmedia"] && (
                                                                                <>
                                                                                    {showFallbackImg && fallbackImgUrl && (
                                                                                        <img
                                                                                            src={fallbackImgUrl}
                                                                                            alt={`${fallbackImgAlt ? fallbackImgAlt : `No Thumbnail Available`}`}
                                                                                        />
                                                                                    )}

                                                                                    {(!showFallbackImg || (showFallbackImg && fallbackImgUrl === undefined)) && (
                                                                                        <img
                                                                                            src={EssentialBlocksLocalize?.placeholder_image}
                                                                                            alt="No Thumbnail Available"
                                                                                        />
                                                                                    )}
                                                                                </>
                                                                            )}
                                                                    </div>
                                                                )}
                                                            </div>
                                                        </>
                                                    )}

                                                    <div className="ebpg-entry-wrapper">
                                                        {(preset == "style-1" || preset == "style-2" || preset == "style-3") &&
                                                            showThumbnail &&
                                                            enableThumbnailSort && (
                                                                <>
                                                                    <div className="ebpg-entry-media">
                                                                        <div className="ebpg-entry-thumbnail">
                                                                            <a className="ebpg-post-link-wrapper" href="#"></a>
                                                                            {post._embedded &&
                                                                                post._embedded["wp:featuredmedia"] &&
                                                                                post._embedded["wp:featuredmedia"].length >
                                                                                0 && (
                                                                                    <img
                                                                                        src={thumbnailImageUrl(
                                                                                            post._embedded[
                                                                                            "wp:featuredmedia"
                                                                                            ][0]
                                                                                        )}
                                                                                        alt={post?.title?.alt_text}
                                                                                    />
                                                                                )}
                                                                            {post._embedded &&
                                                                                !post._embedded["wp:featuredmedia"] && (
                                                                                    <>
                                                                                        {showFallbackImg && fallbackImgUrl && (
                                                                                            <img
                                                                                                src={fallbackImgUrl}
                                                                                                alt={`${fallbackImgAlt ? fallbackImgAlt : `No Thumbnail Available`}`}
                                                                                            />
                                                                                        )}

                                                                                        {(!showFallbackImg || (showFallbackImg && fallbackImgUrl === undefined)) && (
                                                                                            <img
                                                                                                src={EssentialBlocksLocalize?.placeholder_image}
                                                                                                alt="No Thumbnail Available"
                                                                                            />
                                                                                        )}
                                                                                    </>
                                                                                )}
                                                                        </div>
                                                                    </div>
                                                                </>
                                                            )}

                                                        {showTitle && (
                                                            <header
                                                                className="ebpg-entry-header"
                                                                dangerouslySetInnerHTML={{
                                                                    __html: titleHTML,
                                                                }}
                                                            ></header>
                                                        )}

                                                        {/* Header Meta */}
                                                        {showMeta && headerMetaHtml}

                                                        <div className="ebpg-entry-content">
                                                            {showContent && (
                                                                <div className="ebpg-grid-post-excerpt">
                                                                    <p>
                                                                        {excerptWithLimitWords}
                                                                        {__(expansionIndicator)}
                                                                    </p>
                                                                </div>
                                                            )}
                                                            {showReadMore && (
                                                                <div className="ebpg-readmore-btn">
                                                                    <a href={'#'}>
                                                                        {addIcon && iconPosition === "left" ? (
                                                                            <i
                                                                                className={`${icon} eb-button-icon eb-button-icon-left hvr-icon`}
                                                                            ></i>
                                                                        ) : (
                                                                            ""
                                                                        )}
                                                                        <DynamicInputValueHandler
                                                                            value={
                                                                                readmoreText
                                                                            }
                                                                            tagName="span"
                                                                            onChange={(
                                                                                readmoreText
                                                                            ) =>
                                                                                setAttributes(
                                                                                    {
                                                                                        readmoreText,
                                                                                    }
                                                                                )
                                                                            }
                                                                            readOnly={
                                                                                true
                                                                            }
                                                                        />
                                                                        {addIcon && iconPosition === "right" ? (
                                                                            <i
                                                                                className={`${icon} eb-button-icon eb-button-icon-left hvr-icon`}
                                                                            ></i>
                                                                        ) : (
                                                                            ""
                                                                        )}
                                                                    </a>
                                                                </div>
                                                            )}
                                                        </div>

                                                        {/* Footer Meta */}
                                                        {showMeta && footerMetaHtml}
                                                    </div>
                                                </div>
                                            </article>
                                        );
                                    })
                                }

                                {typeof queryResults != "undefined" && queryResults.length < 1 && <p>No Posts Found</p>}

                                {/* Pagination */}
                                {typeof queryResults != "undefined" && queryResults.length > 0 &&
                                    typeof loadMoreOptions != "undefined" && loadMoreOptions.enableMorePosts && (
                                        <div
                                            className={`ebpg-pagination ${loadMoreOptions.loadMoreType === "3" ? "prev-next-btn" : ""
                                                }`}
                                        >
                                            {loadMoreOptions.loadMoreType === "1" && (
                                                <button className="btn ebpg-pagination-button">
                                                    {loadMoreOptions.loadMoreButtonTxt}
                                                </button>
                                            )}
                                            {(loadMoreOptions.loadMoreType === "2" || loadMoreOptions.loadMoreType === "3") && (
                                                <div
                                                    className="btn ebpg-pagination-page"
                                                    dangerouslySetInnerHTML={{
                                                        __html: paginationLinks(loadMoreOptions, queryData.per_page),
                                                    }}
                                                ></div>
                                            )}
                                        </div>
                                    )}
                            </div>
                        </div>
                    </>
                )}
            </BlockProps.Edit>
        </>
    );
}

export default memo(withBlockContext(defaultAttributes)(Edit))
