/**
 * WordPress dependencies
 */
import { __ } from "@wordpress/i18n";
import { useEffect, useState, useRef } from "@wordpress/element";
import { MediaUpload } from "@wordpress/block-editor";
import {
    PanelRow,
    SelectControl,
    ToggleControl,
    TextControl,
    Button,
    ButtonGroup,
    BaseControl,
    RangeControl,
    __experimentalToggleGroupControl as ToggleGroupControl,
    __experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from "@wordpress/components";
import { applyFilters } from "@wordpress/hooks";

/**
 * External Dependencies
 */
import Select2 from "react-select";

/**
 * Internal depencencies
 */
import {
    WRAPPER_MARGIN,
    WRAPPER_PADDING,
    WRAPPER_BORDER_SHADOW,
    WRAPPER_BG,
    COLUMN_PADDING,
    COLUMN_BG,
    COLUMN_BORDER_SHADOW,
    THUMBNAIL_IMAGE_SIZE,
    THUMBNAIL_BORDER_RADIUS,
    THUMBNAIL_MARGIN,
    TITLE_MARGIN,
    CONTENT_MARGIN,
    READMORE_MARGIN,
    READMORE_PADDING,
    HEADER_META_MARGIN,
    FOOTER_META_MARGIN,
    HEADER_META_SPACE,
    FOOTER_META_SPACE,
    AVATAR_BORDER_RADIUS,
    COLUMN_MEDIA_WIDTH,
    UNIT_TYPES,
    HEIGHT_UNIT_TYPES,
    NORMAL_HOVER,
    TEXT_ALIGN,
    TITLE_TAGS,
    CONTENT_POSITION,
    VERTICAL_POSITION,
    DOTS_GAP,
    ARROW_POSITION,
    DOTS_POSITION,
    ARROW_SIZE,
    DOTS_SIZE,
    SLIDES_GAP,
    SLIDE_TO_SHOW,
    FONT_UNIT_TYPES,
    DOT_PRESETS,
    READMORE_BORDER_SHADOW,
} from "./constants/constants";
import {
    EBPG_TITLE_TYPOGRAPHY,
    EBPG_CONTENT_TYPOGRAPHY,
    EBPG_READMORE_TYPOGRAPHY,
    EBPG_META_TYPOGRAPHY,
} from "./constants/typographyPrefixConstants";

import {
    ColorControl,
    ResponsiveDimensionsControl,
    TypographyDropdown,
    BorderShadowControl,
    ResponsiveRangeController,
    BackgroundControl,
    CustomQuery,
    faArrowIcons,
    dashiconsArrows,
    DynamicInputControl,
    EBIconPicker,
    InspectorPanel,
    ImageAvatar,
    sanitizeIconValue,
} from "@essential-blocks/controls";

function Inspector(props) {
    const { attributes, setAttributes, slider, setQueryResults } = props;
    const {
        resOption,
        preset,
        queryData,
        postTerms,
        showThumbnail,
        thumbnailOverlayColor,
        thumbnailOverlayHoverColor,
        showTitle,
        titleColor,
        titleHoverColor,
        titleColorStyle,
        titleLength,
        titleTextAlign,
        titleTag,
        showContent,
        contentColor,
        contentTextAlign,
        contentLength,
        expansionIndicator,
        showReadMore,
        readmoreText,
        readmoreColor,
        readmoreBGColor,
        readmoreTextAlign,
        readmoreHoverColor,
        readmoreBGHoverColor,
        readmoreColorType,
        showMeta,
        headerMeta,
        footerMeta,
        authorPrefix,
        datePrefix,
        headerMetaTextAlign,
        footerMetaTextAlign,
        metaColorType,
        authorMetaColor,
        authorMetaHoverColor,
        commonMetaColor,
        commonMetaHoverColor,
        commonMetaDividerColor,
        categoryMetaColor,
        categoryMetaHoverColor,
        categoryMetaDividerColor,
        tagMetaDividerColor,
        tagMetaColor,
        tagMetaHoverColor,
        tagMetaBgColor,
        tagMetaBgHoverColor,
        dateMetaColor,
        dynamicMetaColor,
        dynamicMetaBgColor,
        styleVerticalAlignment,
        leftArrowIcon,
        rightArrowIcon,
        arrowColorType,
        arrowColor,
        arrowHoverColor,
        dotsColor,
        dotsActiveColor,
        speed,
        pauseOnHover,
        infinite,
        dots,
        autoplaySpeed,
        autoplay,
        adaptiveHeight,
        arrows,
        dotPreset,
        showFallbackImg,
        fallbackImgUrl,
        fallbackImgId,
        fallbackImgAlt,
    } = attributes;

    const [metaOptions, setMetaOptions] = useState([]);

    useEffect(() => {
        const meta = [
            { value: "date", label: "Published Date" },
            { value: "author", label: "Author Name" },
            { value: "avatar", label: "Author Avatar" },
        ];

        if (postTerms && Object.keys(postTerms).length > 0) {
            Object.keys(postTerms).map((term) => {
                meta.push(postTerms[term]);
            });
        }

        //Meta option Filter
        const updatedMeta = applyFilters(
            "essential_blocks_post_carousel_meta",
            meta,
            queryData?.source,
        );

        //Set Meta Options
        if (updatedMeta.then) {
            updatedMeta.then((resp) => {
                const modifiedArray = resp.map((item) => ({
                    ...item,
                    options: item.options.map((option) => {
                        if (typeof option.label === "object") {
                            const prefix =
                                EssentialBlocksProLocalize?.eb_dynamic_tags
                                    ? `${EssentialBlocksProLocalize.eb_dynamic_tags}/`
                                    : "";
                            return {
                                ...option.label,
                                value: `${prefix}${option.label.value}/settings=[]`,
                            };
                        }
                        return { ...option };
                    }),
                }));
                setMetaOptions(modifiedArray);
            });
        } else {
            setMetaOptions(updatedMeta);
        }
    }, [postTerms]);

    const prevSource = useRef(queryData?.source);
    const prevterms = useRef(postTerms);

    useEffect(() => {
        if (!queryData || !queryData.source) {
            return;
        }
        if (queryData.source != prevSource.current) {
            const terms =
                prevterms.current && typeof prevterms.current === "object"
                    ? Object.keys(prevterms.current)
                    : [];

            let headerMetaVal =
                headerMeta.length > 0 ? JSON.parse(headerMeta) : [];
            headerMetaVal =
                headerMetaVal.length > 0 &&
                headerMetaVal.filter((item) => !terms.includes(item.value));

            let footerMetaVal =
                footerMeta.length > 0 ? JSON.parse(footerMeta) : [];
            footerMetaVal =
                footerMetaVal.length > 0 &&
                footerMetaVal.filter((item) => !terms.includes(item.value));

            setAttributes({
                headerMeta: JSON.stringify(headerMetaVal),
                footerMeta: JSON.stringify(footerMetaVal),
            });
            prevSource.current = queryData.source;
        }
    }, [queryData?.source]);

    return (
        <>
            <InspectorPanel
                advancedControlProps={{
                    marginPrefix: WRAPPER_MARGIN,
                    paddingPrefix: WRAPPER_PADDING,
                    borderPrefix: WRAPPER_BORDER_SHADOW,
                    backgroundPrefix: WRAPPER_BG,
                }}
            >
                <InspectorPanel.General>
                    <InspectorPanel.PanelBody
                        title={__("Carousel", "essential-blocks")}
                        initialOpen={true}
                    >
                        <ToggleControl
                            label={__("Show Arrows", "essential-blocks")}
                            checked={arrows}
                            onChange={() => {
                                setAttributes({
                                    arrows: !arrows,
                                });
                            }}
                            __nextHasNoMarginBottom
                        />
                        <ToggleControl
                            label={__("Equal Height", "essential-blocks")}
                            checked={adaptiveHeight}
                            onChange={() => {
                                setAttributes({
                                    adaptiveHeight: !adaptiveHeight,
                                });
                            }}
                            __nextHasNoMarginBottom
                        />

                        <ToggleControl
                            label={__("Autoplay", "essential-blocks")}
                            checked={autoplay}
                            onChange={() => {
                                autoplay
                                    ? slider.current.slickPlay()
                                    : slider.current.slickPause();
                                setAttributes({
                                    autoplay: !autoplay,
                                });
                            }}
                            __nextHasNoMarginBottom
                        />

                        <ToggleControl
                            label={__("Dots", "essential-blocks")}
                            checked={dots}
                            onChange={() => setAttributes({ dots: !dots })}
                            __nextHasNoMarginBottom
                        />

                        <ToggleControl
                            label={__("Infinite", "essential-blocks")}
                            checked={infinite}
                            onChange={() =>
                                setAttributes({
                                    infinite: !infinite,
                                })
                            }
                            __nextHasNoMarginBottom
                        />

                        <ToggleControl
                            label={__("Pause on Hover", "essential-blocks")}
                            checked={pauseOnHover}
                            onChange={() =>
                                setAttributes({
                                    pauseOnHover: !pauseOnHover,
                                })
                            }
                            __nextHasNoMarginBottom
                        />

                        <ResponsiveRangeController
                            baseLabel={__("Slides to Show", "essential-blocks")}
                            controlName={SLIDE_TO_SHOW}
                            units={[]}
                            min={1}
                            max={8}
                            step={1}
                        />

                        {autoplay && (
                            <RangeControl
                                label={__("Autoplay Speed", "essential-blocks")}
                                value={autoplaySpeed}
                                onChange={(autoplaySpeed) =>
                                    setAttributes({
                                        autoplaySpeed,
                                    })
                                }
                                min={0}
                                max={8000}
                                __nextHasNoMarginBottom
                                __next40pxDefaultSize
                            />
                        )}

                        <RangeControl
                            label={__("Animation Speed", "essential-blocks")}
                            value={speed}
                            onChange={(speed) => setAttributes({ speed })}
                            min={0}
                            max={3000}
                            __nextHasNoMarginBottom
                            __next40pxDefaultSize
                        />

                        {dots && (
                            <SelectControl
                                label={__("Dot Preset", "essential-blocks")}
                                value={dotPreset}
                                options={DOT_PRESETS}
                                onChange={(dotPreset) =>
                                    setAttributes({ dotPreset })
                                }
                                __next40pxDefaultSize
                                __nextHasNoMarginBottom
                            />
                        )}
                    </InspectorPanel.PanelBody>
                    <InspectorPanel.PanelBody
                        title={__("Layout", "essential-blocks")}
                        initialOpen={false}
                    >
                        <ToggleControl
                            label={__("Show Thumbnail?")}
                            checked={showThumbnail}
                            onChange={() => {
                                setAttributes({
                                    showThumbnail: !showThumbnail,
                                });
                            }}
                            __nextHasNoMarginBottom
                        />

                        {showThumbnail && (
                            <>
                                <ResponsiveRangeController
                                    baseLabel={__(
                                        "Thumbnail Height",
                                        "essential-blocks",
                                    )}
                                    controlName={THUMBNAIL_IMAGE_SIZE}
                                    units={HEIGHT_UNIT_TYPES}
                                    min={1}
                                    max={500}
                                    step={1}
                                />
                                {preset === "style-3" && (
                                    <ResponsiveRangeController
                                        baseLabel={__(
                                            "Thumbnail Width",
                                            "essential-blocks",
                                        )}
                                        controlName={COLUMN_MEDIA_WIDTH}
                                        units={[
                                            {
                                                label: "%",
                                                value: "%",
                                            },
                                        ]}
                                        min={0}
                                        max={100}
                                        step={1}
                                    />
                                )}

                                <ToggleControl
                                    label={__("Show Fallback Image?")}
                                    checked={showFallbackImg}
                                    onChange={() => {
                                        setAttributes({
                                            showFallbackImg: !showFallbackImg,
                                        });
                                    }}
                                    __nextHasNoMarginBottom
                                />

                                {showFallbackImg && !fallbackImgUrl && (
                                    <MediaUpload
                                        onSelect={({ id, url, alt }) =>
                                            setAttributes({
                                                fallbackImgUrl: url,
                                                fallbackImgId: id,
                                                fallbackImgAlt: alt,
                                            })
                                        }
                                        type="image"
                                        value={fallbackImgId}
                                        render={({ open }) => {
                                            return (
                                                <Button
                                                    className="eb-background-control-inspector-panel-img-btn components-button"
                                                    label={__(
                                                        "Upload Image",
                                                        "essential-blocks",
                                                    )}
                                                    icon="format-image"
                                                    onClick={open}
                                                />
                                            );
                                        }}
                                    />
                                )}

                                {showFallbackImg && fallbackImgUrl && (
                                    <ImageAvatar
                                        imageUrl={fallbackImgUrl}
                                        onDeleteImage={() =>
                                            setAttributes({
                                                fallbackImgUrl: null,
                                            })
                                        }
                                    />
                                )}
                            </>
                        )}

                        {preset === "style-4" && preset === "pro-style-5" && (
                            <ToggleGroupControl
                                label={__(
                                    "Content Vertical Alignment",
                                    "essential-blocks",
                                )}

                                value={styleVerticalAlignment}
                                onChange={(value) =>
                                    setAttributes({
                                        styleVerticalAlignment: value,
                                    })
                                }
                                isBlock
                                __next40pxDefaultSize
                                __nextHasNoMarginBottom
                            >
                                {VERTICAL_POSITION.map((item, index) => (
                                    <ToggleGroupControlOption
                                        key={index}
                                        value={item.value}
                                        label={item.label}
                                    />
                                ))}
                            </ToggleGroupControl>
                        )}

                        <ToggleControl
                            label={__("Show Title?")}
                            checked={showTitle}
                            onChange={() => {
                                setAttributes({
                                    showTitle: !showTitle,
                                });
                            }}
                            __nextHasNoMarginBottom
                        />

                        {showTitle && (
                            <>
                                <ToggleGroupControl
                                    label={__("Title Tag", "essential-blocks")}
                                    className="eb-advance-heading-alignment eb-html-tag-buttongroup newtogglegroupcontrol"
                                    value={titleTag}
                                    onChange={(value) =>
                                        setAttributes({
                                            titleTag: value,
                                        })
                                    }
                                    isBlock
                                    __next40pxDefaultSize
                                    __nextHasNoMarginBottom
                                >
                                    {TITLE_TAGS.map((item, key) => (
                                        <ToggleGroupControlOption
                                            key={key}
                                            value={item.value}
                                            label={item.label}
                                        />
                                    ))}
                                </ToggleGroupControl>

                                <RangeControl
                                    label="Title Words"
                                    value={titleLength}
                                    onChange={(value) =>
                                        setAttributes({
                                            titleLength: value,
                                        })
                                    }
                                    min={-1}
                                    max={100}
                                    __nextHasNoMarginBottom
                                    __next40pxDefaultSize
                                />
                            </>
                        )}

                        <ToggleControl
                            label={__("Show Excerpt?")}
                            checked={showContent}
                            onChange={() => {
                                setAttributes({
                                    showContent: !showContent,
                                });
                            }}
                            __nextHasNoMarginBottom
                        />

                        {showContent && (
                            <>
                                <RangeControl
                                    label="Excerpt Words"
                                    value={contentLength}
                                    onChange={(value) =>
                                        setAttributes({
                                            contentLength: value,
                                        })
                                    }
                                    min={-1}
                                    max={100}
                                    __nextHasNoMarginBottom
                                    __next40pxDefaultSize
                                />

                                <TextControl
                                    label="Expansion Indicator"
                                    type={"text"}
                                    value={expansionIndicator}
                                    onChange={(text) =>
                                        setAttributes({
                                            expansionIndicator: text,
                                        })
                                    }
                                    __next40pxDefaultSize
                                    __nextHasNoMarginBottom
                                />
                            </>
                        )}

                        <ToggleControl
                            label={__("Show Read More Button?")}
                            checked={showReadMore}
                            onChange={() => {
                                setAttributes({
                                    showReadMore: !showReadMore,
                                });
                            }}
                            __nextHasNoMarginBottom
                        />

                        {showReadMore && (
                            <>
                                <TextControl
                                    label="Button Text"
                                    type={"text"}
                                    value={readmoreText}
                                    onChange={(text) =>
                                        setAttributes({
                                            readmoreText: text,
                                        })
                                    }
                                    __next40pxDefaultSize
                                    __nextHasNoMarginBottom
                                />
                            </>
                        )}

                        <ToggleControl
                            label={__("Show Meta?")}
                            checked={showMeta}
                            onChange={() => {
                                setAttributes({
                                    showMeta: !showMeta,
                                });
                            }}
                            __nextHasNoMarginBottom
                        />

                        {showMeta && (
                            <>
                                <div className="eb-control-item-wrapper">
                                    <PanelRow>Header Meta</PanelRow>
                                    <Select2
                                        name="select-header-meta"
                                        value={
                                            headerMeta.length > 0
                                                ? JSON.parse(headerMeta)
                                                : ""
                                        }
                                        onChange={(selected) =>
                                            setAttributes({
                                                headerMeta:
                                                    JSON.stringify(selected),
                                            })
                                        }
                                        options={metaOptions}
                                        isMulti="true"
                                    />
                                </div>

                                <div className="eb-control-item-wrapper">
                                    <PanelRow>Footer Meta</PanelRow>
                                    <Select2
                                        name="select-footer-meta"
                                        value={
                                            footerMeta.length > 0
                                                ? JSON.parse(footerMeta)
                                                : ""
                                        }
                                        onChange={(selected) =>
                                            setAttributes({
                                                footerMeta:
                                                    JSON.stringify(selected),
                                            })
                                        }
                                        options={metaOptions}
                                        isMulti="true"
                                    />
                                </div>
                                <DynamicInputControl
                                    label={__(
                                        "Author Prefix",
                                        "essential-blocks",
                                    )}
                                    help={__(
                                        "Example: by John Doe",
                                        "essential-blocks",
                                    )}
                                    attrName="authorPrefix"
                                    inputValue={authorPrefix}
                                    setAttributes={setAttributes}
                                    onChange={(text) =>
                                        setAttributes({
                                            authorPrefix: text,
                                        })
                                    }
                                />
                                <DynamicInputControl
                                    label={__(
                                        "Published Date Prefix",
                                        "essential-blocks",
                                    )}
                                    help={__(
                                        "Example: on 01/01/2023",
                                        "essential-blocks",
                                    )}
                                    attrName="datePrefix"
                                    inputValue={datePrefix}
                                    setAttributes={setAttributes}
                                    onChange={(text) =>
                                        setAttributes({
                                            datePrefix: text,
                                        })
                                    }
                                />
                            </>
                        )}
                    </InspectorPanel.PanelBody>
                    <CustomQuery
                        attributes={attributes}
                        setAttributes={setAttributes}
                        setQueryResults={setQueryResults}
                    />
                </InspectorPanel.General>
                <InspectorPanel.Style>
                    <InspectorPanel.PanelBody
                        title={__("Carousel", "essential-blocks")}
                        initialOpen={true}
                    >
                        <ResponsiveRangeController
                            baseLabel={__("Slides Gap", "essential-blocks")}
                            controlName={SLIDES_GAP}
                            units={[]}
                            min={0}
                            max={100}
                            step={1}
                        />
                    </InspectorPanel.PanelBody>

                    <InspectorPanel.PanelBody
                        title={__("Columns", "essential-blocks")}
                        initialOpen={false}
                    >
                        <ResponsiveDimensionsControl
                            controlName={COLUMN_PADDING}
                            baseLabel="Padding"
                        />
                        <InspectorPanel.PanelBody
                            title={__("Background", "essential-blocks")}
                            initialOpen={false}
                        >
                            <BackgroundControl
                                controlName={COLUMN_BG}
                                noOverlay
                            />
                        </InspectorPanel.PanelBody>
                        <InspectorPanel.PanelBody
                            title={__("Border")}
                            initialOpen={false}
                        >
                            <BorderShadowControl
                                controlName={COLUMN_BORDER_SHADOW}
                                noShadow
                            // noBorder
                            />
                        </InspectorPanel.PanelBody>
                    </InspectorPanel.PanelBody>

                    {showThumbnail && (
                        <InspectorPanel.PanelBody
                            title={__("Thumbnail", "essential-blocks")}
                            initialOpen={false}
                        >
                            {preset != "style-4" ||
                                (preset != "pro-style-5" && (
                                    <>
                                        <ResponsiveDimensionsControl
                                            controlName={
                                                THUMBNAIL_BORDER_RADIUS
                                            }
                                            baseLabel="Border Radius"
                                        />

                                        <ResponsiveDimensionsControl
                                            controlName={THUMBNAIL_MARGIN}
                                            baseLabel="Margin"
                                        />
                                    </>
                                ))}

                            <ColorControl
                                label={__("Overlay Color", "essential-blocks")}
                                color={thumbnailOverlayColor}
                                attributeName={"thumbnailOverlayColor"}
                            />
                            <ColorControl
                                label={__(
                                    "Overlay Hover Color",
                                    "essential-blocks",
                                )}
                                color={thumbnailOverlayHoverColor}
                                attributeName={"thumbnailOverlayHoverColor"}
                            />
                        </InspectorPanel.PanelBody>
                    )}

                    {showTitle && (
                        <InspectorPanel.PanelBody
                            title={__("Title", "essential-blocks")}
                            initialOpen={false}
                        >
                            <ToggleGroupControl
                                label={__("Title Color Style", "essential-blocks")}
                                className="eb-inspector-btn-group newtogglegroupcontrol"
                                value={titleColorStyle}
                                onChange={(value) =>
                                    setAttributes({
                                        titleColorStyle: value,
                                    })
                                }
                                isBlock
                                __next40pxDefaultSize
                                __nextHasNoMarginBottom
                            >
                                {NORMAL_HOVER.map((item, index) => (
                                    <ToggleGroupControlOption
                                        key={index}
                                        value={item.value}
                                        label={item.label}
                                    />
                                ))}
                            </ToggleGroupControl>

                            {titleColorStyle === "normal" && (
                                <ColorControl
                                    label={__("Color", "essential-blocks")}
                                    color={titleColor}
                                    onChange={(newColor) =>
                                        setAttributes({
                                            titleColor: newColor,
                                        })
                                    }
                                />
                            )}

                            {titleColorStyle === "hover" && (
                                <ColorControl
                                    label={__(
                                        "Hover Color",
                                        "essential-blocks",
                                    )}
                                    color={titleHoverColor}
                                    onChange={(newColor) =>
                                        setAttributes({
                                            titleHoverColor: newColor,
                                        })
                                    }
                                />
                            )}
                            <ToggleGroupControl
                                label={__("Alignment", "essential-blocks")}

                                value={titleTextAlign}
                                onChange={(value) =>
                                    setAttributes({
                                        titleTextAlign: value,
                                    })
                                }
                                isBlock
                                __next40pxDefaultSize
                                __nextHasNoMarginBottom
                            >
                                {TEXT_ALIGN.map((item, index) => (
                                    <ToggleGroupControlOption
                                        key={index}
                                        value={item.value}
                                        label={item.label}
                                    />
                                ))}
                            </ToggleGroupControl>
                            <TypographyDropdown
                                baseLabel={__("Typography", "essential-blocks")}
                                typographyPrefixConstant={EBPG_TITLE_TYPOGRAPHY}
                            />
                            <ResponsiveDimensionsControl
                                controlName={TITLE_MARGIN}
                                baseLabel="Margin"
                            />
                        </InspectorPanel.PanelBody>
                    )}

                    {showContent && (
                        <InspectorPanel.PanelBody
                            title={__("Excerpt", "essential-blocks")}
                            initialOpen={false}
                        >
                            <ColorControl
                                label={__("Color", "essential-blocks")}
                                color={contentColor}
                                onChange={(color) =>
                                    setAttributes({
                                        contentColor: color,
                                    })
                                }
                            />
                            <ToggleGroupControl
                                label={__("Alignment", "essential-blocks")}

                                value={contentTextAlign}
                                onChange={(value) =>
                                    setAttributes({
                                        contentTextAlign: value,
                                    })
                                }
                                isBlock
                                __next40pxDefaultSize
                                __nextHasNoMarginBottom
                            >
                                {TEXT_ALIGN.map((item, index) => (
                                    <ToggleGroupControlOption
                                        key={index}
                                        value={item.value}
                                        label={item.label}
                                    />
                                ))}
                            </ToggleGroupControl>
                            <TypographyDropdown
                                baseLabel={__("Typography", "essential-blocks")}
                                typographyPrefixConstant={
                                    EBPG_CONTENT_TYPOGRAPHY
                                }
                            />
                            <ResponsiveDimensionsControl
                                controlName={CONTENT_MARGIN}
                                baseLabel="Margin"
                            />
                        </InspectorPanel.PanelBody>
                    )}

                    {(preset != "style-4" || preset != "pro-style-5") &&
                        showReadMore && (
                            <InspectorPanel.PanelBody
                                title={__(
                                    "Read More Button",
                                    "essential-blocks",
                                )}
                                initialOpen={false}
                            >
                                <ToggleGroupControl
                                    label={__("Read More Color Type", "essential-blocks")}
                                    className="eb-inspector-btn-group newtogglegroupcontrol"
                                    value={readmoreColorType}
                                    onChange={(value) =>
                                        setAttributes({
                                            readmoreColorType: value,
                                        })
                                    }
                                    isBlock
                                    __next40pxDefaultSize
                                    __nextHasNoMarginBottom
                                >
                                    {NORMAL_HOVER.map((item, index) => (
                                        <ToggleGroupControlOption
                                            key={index}
                                            value={item.value}
                                            label={item.label}
                                        />
                                    ))}
                                </ToggleGroupControl>

                                {readmoreColorType === "normal" && (
                                    <>
                                        <ColorControl
                                            label={__(
                                                "Color",
                                                "essential-blocks",
                                            )}
                                            color={readmoreColor}
                                            onChange={(newColor) =>
                                                setAttributes({
                                                    readmoreColor: newColor,
                                                })
                                            }
                                        />
                                        <ColorControl
                                            label={__(
                                                "Background Color",
                                                "essential-blocks",
                                            )}
                                            color={readmoreBGColor}
                                            onChange={(newColor) =>
                                                setAttributes({
                                                    readmoreBGColor: newColor,
                                                })
                                            }
                                        />
                                    </>
                                )}

                                {readmoreColorType === "hover" && (
                                    <>
                                        <ColorControl
                                            label={__(
                                                "Hover Color",
                                                "essential-blocks",
                                            )}
                                            color={readmoreHoverColor}
                                            onChange={(newColor) =>
                                                setAttributes({
                                                    readmoreHoverColor:
                                                        newColor,
                                                })
                                            }
                                        />
                                        <ColorControl
                                            label={__(
                                                "Hover Background Color",
                                                "essential-blocks",
                                            )}
                                            color={readmoreBGHoverColor}
                                            onChange={(newColor) =>
                                                setAttributes({
                                                    readmoreBGHoverColor:
                                                        newColor,
                                                })
                                            }
                                        />
                                    </>
                                )}
                                <ToggleGroupControl
                                    label={__("Alignment", "essential-blocks")}

                                    value={readmoreTextAlign}
                                    onChange={(value) =>
                                        setAttributes({
                                            readmoreTextAlign: value,
                                        })
                                    }
                                    isBlock
                                    __next40pxDefaultSize
                                    __nextHasNoMarginBottom
                                >
                                    {TEXT_ALIGN.map((item, index) => (
                                        <ToggleGroupControlOption
                                            key={index}
                                            value={item.value}
                                            label={item.label}
                                        />
                                    ))}
                                </ToggleGroupControl>
                                <TypographyDropdown
                                    baseLabel={__(
                                        "Typography",
                                        "essential-blocks",
                                    )}
                                    typographyPrefixConstant={
                                        EBPG_READMORE_TYPOGRAPHY
                                    }
                                />
                                <ResponsiveDimensionsControl
                                    controlName={READMORE_MARGIN}
                                    baseLabel="Margin"
                                />
                                <ResponsiveDimensionsControl
                                    controlName={READMORE_PADDING}
                                    baseLabel="Padding"
                                />

                                <InspectorPanel.PanelBody
                                    title={__("Border & Shadow")}
                                    initialOpen={false}
                                >
                                    <BorderShadowControl
                                        controlName={READMORE_BORDER_SHADOW}
                                        noShadow
                                    // noBorder
                                    />
                                </InspectorPanel.PanelBody>
                            </InspectorPanel.PanelBody>
                        )}

                    {showMeta && (
                        <InspectorPanel.PanelBody
                            title={__("Meta", "essential-blocks")}
                            initialOpen={false}
                        >
                            <ToggleGroupControl
                                label={__(
                                    "Header Meta Alignment",
                                    "essential-blocks",
                                )}

                                value={headerMetaTextAlign}
                                onChange={(value) =>
                                    setAttributes({
                                        headerMetaTextAlign: value,
                                    })
                                }
                                isBlock
                                __next40pxDefaultSize
                                __nextHasNoMarginBottom
                            >
                                {CONTENT_POSITION.map((item, index) => (
                                    <ToggleGroupControlOption
                                        key={index}
                                        value={item.value}
                                        label={item.label}
                                    />
                                ))}
                            </ToggleGroupControl>
                            <ResponsiveRangeController
                                baseLabel={__(
                                    "Header Meta Gap",
                                    "essential-blocks",
                                )}
                                controlName={HEADER_META_SPACE}
                                units={UNIT_TYPES}
                                min={1}
                                max={100}
                                step={1}
                            />
                            <ResponsiveDimensionsControl
                                controlName={HEADER_META_MARGIN}
                                baseLabel="Header Meta Margin"
                            />

                            <ToggleGroupControl
                                label={__(
                                    "Footer Meta Alignment",
                                    "essential-blocks",
                                )}
                                value={footerMetaTextAlign}
                                onChange={(value) =>
                                    setAttributes({
                                        footerMetaTextAlign: value,
                                    })
                                }
                                isBlock
                                __next40pxDefaultSize
                                __nextHasNoMarginBottom
                            >
                                {CONTENT_POSITION.map((item, index) => (
                                    <ToggleGroupControlOption key={index} value={item.value} label={item.label} />
                                ))}
                            </ToggleGroupControl>
                            <ResponsiveRangeController
                                baseLabel={__(
                                    "Footer Meta Gap",
                                    "essential-blocks",
                                )}
                                controlName={FOOTER_META_SPACE}
                                units={UNIT_TYPES}
                                min={1}
                                max={100}
                                step={1}
                            />
                            <ResponsiveDimensionsControl
                                controlName={FOOTER_META_MARGIN}
                                baseLabel="Footer Meta Margin"
                            />

                            <ToggleGroupControl
                                label=""
                                hideLabelFromVision
                                value={metaColorType}
                                onChange={(value) =>
                                    setAttributes({
                                        metaColorType: value,
                                    })
                                }
                                isBlock
                                __next40pxDefaultSize
                                __nextHasNoMarginBottom
                            >
                                {NORMAL_HOVER.map((item, index) => (
                                    <ToggleGroupControlOption key={index} value={item.value} label={item.label} />
                                ))}
                            </ToggleGroupControl>

                            {metaColorType === "normal" && (
                                <>
                                    <ColorControl
                                        label={__(
                                            "Author Color",
                                            "essential-blocks",
                                        )}
                                        color={authorMetaColor}
                                        onChange={(newColor) =>
                                            setAttributes({
                                                authorMetaColor: newColor,
                                            })
                                        }
                                    />
                                    <ColorControl
                                        label={__(
                                            "Date Color",
                                            "essential-blocks",
                                        )}
                                        color={dateMetaColor}
                                        onChange={(newColor) =>
                                            setAttributes({
                                                dateMetaColor: newColor,
                                            })
                                        }
                                    />
                                    <ColorControl
                                        label={__(
                                            "Common Color",
                                            "essential-blocks",
                                        )}
                                        color={commonMetaColor}
                                        onChange={(newColor) =>
                                            setAttributes({
                                                commonMetaColor: newColor,
                                            })
                                        }
                                    />
                                    <ColorControl
                                        label={__(
                                            "Common Divider Color",
                                            "essential-blocks",
                                        )}
                                        color={commonMetaDividerColor}
                                        onChange={(newColor) =>
                                            setAttributes({
                                                commonMetaDividerColor:
                                                    newColor,
                                            })
                                        }
                                    />
                                    <ColorControl
                                        label={__(
                                            "Category Color",
                                            "essential-blocks",
                                        )}
                                        color={categoryMetaColor}
                                        onChange={(newColor) =>
                                            setAttributes({
                                                categoryMetaColor: newColor,
                                            })
                                        }
                                    />
                                    <ColorControl
                                        label={__(
                                            "Category Divider Color",
                                            "essential-blocks",
                                        )}
                                        color={categoryMetaDividerColor}
                                        onChange={(newColor) =>
                                            setAttributes({
                                                categoryMetaDividerColor:
                                                    newColor,
                                            })
                                        }
                                    />
                                    <ColorControl
                                        label={__(
                                            "Tag Color",
                                            "essential-blocks",
                                        )}
                                        color={tagMetaColor}
                                        onChange={(newColor) =>
                                            setAttributes({
                                                tagMetaColor: newColor,
                                            })
                                        }
                                    />
                                    <ColorControl
                                        label={__(
                                            "Tag BG Color",
                                            "essential-blocks",
                                        )}
                                        color={tagMetaBgColor}
                                        onChange={(newColor) =>
                                            setAttributes({
                                                tagMetaBgColor: newColor,
                                            })
                                        }
                                    />
                                    <ColorControl
                                        label={__(
                                            "Tag Divider Color",
                                            "essential-blocks",
                                        )}
                                        color={tagMetaDividerColor}
                                        onChange={(newColor) =>
                                            setAttributes({
                                                tagMetaDividerColor: newColor,
                                            })
                                        }
                                    />
                                    <ColorControl
                                        label={__(
                                            "Dynamic Data Color",
                                            "essential-blocks",
                                        )}
                                        color={dynamicMetaColor}
                                        onChange={(newColor) =>
                                            setAttributes({
                                                dynamicMetaColor: newColor,
                                            })
                                        }
                                    />
                                    <ColorControl
                                        label={__(
                                            "Dynamic Data BG Color",
                                            "essential-blocks",
                                        )}
                                        color={dynamicMetaBgColor}
                                        onChange={(newColor) =>
                                            setAttributes({
                                                dynamicMetaBgColor: newColor,
                                            })
                                        }
                                    />
                                </>
                            )}

                            {metaColorType === "hover" && (
                                <>
                                    <ColorControl
                                        label={__(
                                            "Author Hover Color",
                                            "essential-blocks",
                                        )}
                                        color={authorMetaHoverColor}
                                        onChange={(newColor) =>
                                            setAttributes({
                                                authorMetaHoverColor: newColor,
                                            })
                                        }
                                    />
                                    <ColorControl
                                        label={__(
                                            "Common Hover Color",
                                            "essential-blocks",
                                        )}
                                        color={commonMetaHoverColor}
                                        onChange={(newColor) =>
                                            setAttributes({
                                                commonMetaHoverColor: newColor,
                                            })
                                        }
                                    />
                                    <ColorControl
                                        label={__(
                                            "Category Hover Color",
                                            "essential-blocks",
                                        )}
                                        color={categoryMetaHoverColor}
                                        onChange={(newColor) =>
                                            setAttributes({
                                                categoryMetaHoverColor:
                                                    newColor,
                                            })
                                        }
                                    />
                                    <ColorControl
                                        label={__(
                                            "Tag Hover Color",
                                            "essential-blocks",
                                        )}
                                        color={tagMetaHoverColor}
                                        onChange={(newColor) =>
                                            setAttributes({
                                                tagMetaHoverColor: newColor,
                                            })
                                        }
                                    />
                                    <ColorControl
                                        label={__(
                                            "Tag BG Hover Color",
                                            "essential-blocks",
                                        )}
                                        color={tagMetaBgHoverColor}
                                        onChange={(newColor) =>
                                            setAttributes({
                                                tagMetaBgHoverColor: newColor,
                                            })
                                        }
                                    />
                                </>
                            )}

                            <TypographyDropdown
                                baseLabel={__(
                                    "Meta Typography",
                                    "essential-blocks",
                                )}
                                typographyPrefixConstant={EBPG_META_TYPOGRAPHY}
                            />

                            <ResponsiveDimensionsControl
                                controlName={AVATAR_BORDER_RADIUS}
                                baseLabel="Avatar Border Radius"
                            />
                        </InspectorPanel.PanelBody>
                    )}

                    {arrows && (
                        <InspectorPanel.PanelBody
                            title={__("Arrow", "essential-blocks")}
                            initialOpen={false}
                        >
                            <EBIconPicker
                                value={leftArrowIcon}
                                onChange={(icon) =>
                                    setAttributes({
                                        leftArrowIcon: sanitizeIconValue(icon),
                                    })
                                }
                                title={__(
                                    "Left Arrow Icon",
                                    "essential-blocks",
                                )}
                                icons={{
                                    fontAwesome: faArrowIcons,
                                    dashIcon: dashiconsArrows,
                                }}
                            />
                            <EBIconPicker
                                value={rightArrowIcon}
                                onChange={(icon) =>
                                    setAttributes({
                                        rightArrowIcon: sanitizeIconValue(icon),
                                    })
                                }
                                title={__(
                                    "Right Arrow Icon",
                                    "essential-blocks",
                                )}
                                icons={{
                                    fontAwesome: faArrowIcons,
                                    dashIcon: dashiconsArrows,
                                }}
                            />
                            <ToggleGroupControl
                                label=""
                                hideLabelFromVision
                                value={arrowColorType}
                                onChange={(value) =>
                                    setAttributes({
                                        arrowColorType: value,
                                    })
                                }
                                isBlock
                                __next40pxDefaultSize
                                __nextHasNoMarginBottom
                            >
                                {NORMAL_HOVER.map((item, index) => (
                                    <ToggleGroupControlOption key={index} value={item.value} label={item.label} />
                                ))}
                            </ToggleGroupControl>

                            {arrowColorType === "normal" && (
                                <ColorControl
                                    label={__("Color", "essential-blocks")}
                                    color={arrowColor}
                                    onChange={(newColor) =>
                                        setAttributes({
                                            arrowColor: newColor,
                                        })
                                    }
                                />
                            )}

                            {arrowColorType === "hover" && (
                                <ColorControl
                                    label={__("Color", "essential-blocks")}
                                    color={arrowHoverColor}
                                    onChange={(newColor) =>
                                        setAttributes({
                                            arrowHoverColor: newColor,
                                        })
                                    }
                                />
                            )}

                            <ResponsiveRangeController
                                baseLabel={__("Arrow Size", "essential-blocks")}
                                controlName={ARROW_SIZE}
                                units={FONT_UNIT_TYPES}
                                min={1}
                                max={50}
                                step={1}
                            />

                            <ResponsiveRangeController
                                baseLabel={__(
                                    "Arrow Position",
                                    "essential-blocks",
                                )}
                                controlName={ARROW_POSITION}
                                units={UNIT_TYPES}
                                min={-100}
                                max={100}
                                step={1}
                            />
                        </InspectorPanel.PanelBody>
                    )}

                    {dots && (
                        <InspectorPanel.PanelBody
                            title={__("Dot", "essential-blocks")}
                            initialOpen={false}
                        >
                            <ColorControl
                                label={__("Color", "essential-blocks")}
                                color={dotsColor}
                                onChange={(color) =>
                                    setAttributes({
                                        dotsColor: color,
                                    })
                                }
                            />

                            <ColorControl
                                label={__("Active Color", "essential-blocks")}
                                color={dotsActiveColor}
                                onChange={(color) =>
                                    setAttributes({
                                        dotsActiveColor: color,
                                    })
                                }
                            />

                            {!dotPreset.includes("modern") && (
                                <ResponsiveRangeController
                                    baseLabel={__(
                                        "Dots Size",
                                        "essential-blocks",
                                    )}
                                    controlName={DOTS_SIZE}
                                    units={FONT_UNIT_TYPES}
                                    min={1}
                                    max={100}
                                    step={1}
                                />
                            )}

                            <ResponsiveRangeController
                                baseLabel={__("Dots Gap", "essential-blocks")}
                                controlName={DOTS_GAP}
                                units={UNIT_TYPES}
                                min={0}
                                max={50}
                                step={1}
                            />
                            <ResponsiveRangeController
                                baseLabel={__(
                                    "Dots Position (PX)",
                                    "essential-blocks",
                                )}
                                controlName={DOTS_POSITION}
                                min={-100}
                                max={100}
                                step={1}
                                noUnits
                            />
                        </InspectorPanel.PanelBody>
                    )}
                </InspectorPanel.Style>
            </InspectorPanel>
        </>
    );
}
export default Inspector;
