/**
 * WordPress dependencies
 */
import { __ } from "@wordpress/i18n";
import {
    ToggleControl,
    SelectControl,
    BaseControl,
    __experimentalDivider as Divider,
    __experimentalToggleGroupControl as ToggleGroupControl,
    __experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from "@wordpress/components";
import { applyFilters } from "@wordpress/hooks";

import {
    ColorControl,
    ResponsiveRangeController,
    ResponsiveDimensionsControl,
    BorderShadowControl,
    TypographyDropdown,
    InspectorPanel
} from "@essential-blocks/controls";

import {
    FORM_LISTS,
    INPUT_TEXTAREA_INDENT,
    INPUT_WIDTH,
    INPUT_HEIGHT,
    TEXTAREA_WIDTH,
    TEXTAREA_HEIGHT,
    INPUT_TEXTAREA_PADDING,
    INPUT_TEXTAREA_SPACING,
    SUBMIT_BUTTON_WIDTH,
    SUBMIT_BUTTON_HEIGHT,
    INPUT_TEXTAREA_BORDER,
    SECTION_BREAK_PADDING,
    SECTION_BREAK_MARGIN,
    SECTION_BREAK_DESC_PADDING,
    SECTION_BREAK_DESC_MARGIN,
    SECTION_BREAK_POSITION,
    CUSTOM_HTML_PADDING,
    CUSTOM_HTML_MARGIN,
    BTN_WIDTH_STYLE,
    SUBMIT_BUTTON_POSITION,
    SUBMIT_BUTTON_PADDING,
    SUBMIT_BUTTON_MARGIN,
    SUBMIT_BUTTON_BORDER,
    SUCCESS_BORDER,
    ERROR_PADDING,
    ERROR_MARGIN,
    CHECKBOX_SIZE,
    CHECKBOX_BORDER,
    CHECKBOX_RADIUS,
    RADIO_RADIUS,
    CHECKBOX_ITEM_SPACING,
    FORM_BORDER,
    FORM_PADDING,
    FORM_MARGIN,
    BUTTON_POSITION,
} from "./constants";
import {
    typoPrefix_label,
    typoPrefix_input,
    typoPrefix_section_break,
    typoPrefix_section_break_desc,
    typoPrefix_custom_html,
    typoPrefix_submit_btn,
    typoPrefix_success,
    typoPrefix_error,
} from "./constants/typographyPrefixConstants";

const Inspector = ({ attributes, setAttributes }) => {
    const {
        resOption,
        // new
        showLabels,
        showPlaceholder,
        showErrorMessage,
        labelColor,
        inputHoverType,
        inputBackgroundColor,
        inputTextColor,
        inputFocusBackgroundColor,
        placeholderColor,
        sectionBreakColor,
        sectionBreakPosition,
        sectionBreakDescColor,
        customHtmlPosition,
        customHtmlColor,
        btnWidthType,
        btnAlignment,
        btnHoverType,
        btnBackgroundColor,
        btnColor,
        btnBackgroundHoverColor,
        btnHoverColor,
        successBackgroundColor,
        successColor,
        errorColor,
        customCheckboxStyle,
        checkboxSwitcher,
        checkboxColor,
        checkboxBorderColor,
        checkboxCheckedColor,
        formBackgroundColor,
        formAlignment,
        formId,
    } = attributes;

    return (
        <>
            <InspectorPanel advancedControlProps={{
                marginPrefix: FORM_MARGIN,
                paddingPrefix: FORM_PADDING,
                borderPrefix: FORM_BORDER,
                hasMargin: true,
                hasBackground: false
            }}>
                <InspectorPanel.General>
                    <InspectorPanel.PanelBody
                        title={__(
                            "Fluent Form",
                            "essential-blocks"
                        )}
                    >
                        <SelectControl
                            label={__(
                                "Select Form",
                                "essential-blocks"
                            )}
                            value={formId}
                            options={applyFilters(
                                "eb_fluent_form_lists",
                                FORM_LISTS
                            )}
                            onChange={(newFormId) =>
                                setAttributes({
                                    formId: newFormId,
                                })
                            }
                            __next40pxDefaultSize
                            __nextHasNoMarginBottom
                        />
                        <ToggleControl
                            label={__(
                                "Show Labels",
                                "essential-blocks"
                            )}
                            checked={showLabels}
                            onChange={(showLabels) =>
                                setAttributes({ showLabels })
                            }
                            __nextHasNoMarginBottom
                        />
                        <ToggleControl
                            label={__(
                                "Show Placeholder",
                                "essential-blocks"
                            )}
                            checked={showPlaceholder}
                            onChange={(showPlaceholder) =>
                                setAttributes({
                                    showPlaceholder,
                                })
                            }
                            __nextHasNoMarginBottom
                        />
                        <ToggleControl
                            label={__(
                                "Show Error Message",
                                "essential-blocks"
                            )}
                            checked={showErrorMessage}
                            onChange={(showErrorMessage) =>
                                setAttributes({
                                    showErrorMessage,
                                })
                            }
                            __nextHasNoMarginBottom
                        />
                    </InspectorPanel.PanelBody>
                </InspectorPanel.General>
                <InspectorPanel.Style>
                    <>
                        <InspectorPanel.PanelBody
                            title={__("Labels", "essential-blocks")}
                            initialOpen={true}
                        >
                            <>
                                <ColorControl
                                    label={__(
                                        "Color",
                                        "essential-blocks"
                                    )}
                                    color={labelColor}
                                    attributeName={'labelColor'}
                                />
                                <TypographyDropdown
                                    baseLabel={__(
                                        "Typography",
                                        "essential-blocks"
                                    )}
                                    typographyPrefixConstant={
                                        typoPrefix_label
                                    }
                                />
                            </>
                        </InspectorPanel.PanelBody>
                        <InspectorPanel.PanelBody
                            title={__(
                                "Input & Textarea",
                                "essential-blocks"
                            )}
                            initialOpen={false}
                        >
                            <>
                                <ToggleGroupControl

                                    value={inputHoverType}
                                    onChange={(value) =>
                                        setAttributes({
                                            inputHoverType: value,
                                        })
                                    }
                                    isBlock
__next40pxDefaultSize
__nextHasNoMarginBottom
                                >
                                    <ToggleGroupControlOption
                                        value="normal"
                                        label={__("NORMAL", "essential-blocks")}
                                    />
                                    <ToggleGroupControlOption
                                        value="focus"
                                        label={__("FOCUS", "essential-blocks")}
                                    />
                                </ToggleGroupControl>
                                {inputHoverType === "normal" && (
                                    <>
                                        <ColorControl
                                            label={__(
                                                "Background Color",
                                                "essential-blocks"
                                            )}
                                            color={
                                                inputBackgroundColor
                                            }
                                            attributeName={'inputBackgroundColor'}
                                        />
                                        <ColorControl
                                            label={__(
                                                "Color",
                                                "essential-blocks"
                                            )}
                                            color={inputTextColor}
                                            attributeName={'inputTextColor'}
                                        />
                                    </>
                                )}
                                {inputHoverType === "focus" && (
                                    <>
                                        <ColorControl
                                            label={__(
                                                "Background Color",
                                                "essential-blocks"
                                            )}
                                            color={
                                                inputFocusBackgroundColor
                                            }
                                            attributeName={'inputFocusBackgroundColor'}
                                        />
                                    </>
                                )}
                                <TypographyDropdown
                                    baseLabel={__(
                                        "Typography",
                                        "essential-blocks"
                                    )}
                                    typographyPrefixConstant={
                                        typoPrefix_input
                                    }
                                />
                                <Divider />
                                <ResponsiveRangeController
                                    baseLabel={__(
                                        "Text Indent",
                                        "essential-blocks"
                                    )}
                                    controlName={
                                        INPUT_TEXTAREA_INDENT
                                    }
                                    min={0}
                                    max={60}
                                    step={1}
                                />
                                <ResponsiveRangeController
                                    baseLabel={__(
                                        "Input Width",
                                        "essential-blocks"
                                    )}
                                    controlName={INPUT_WIDTH}
                                    min={0}
                                    max={1200}
                                    step={1}
                                />
                                <ResponsiveRangeController
                                    baseLabel={__(
                                        "Input Height",
                                        "essential-blocks"
                                    )}
                                    controlName={INPUT_HEIGHT}
                                    min={0}
                                    max={200}
                                    step={1}
                                />
                                <ResponsiveRangeController
                                    baseLabel={__(
                                        "Textarea Width",
                                        "essential-blocks"
                                    )}
                                    controlName={TEXTAREA_WIDTH}
                                    min={0}
                                    max={1200}
                                    step={1}
                                />
                                <ResponsiveRangeController
                                    baseLabel={__(
                                        "Textarea Height",
                                        "essential-blocks"
                                    )}
                                    controlName={TEXTAREA_HEIGHT}
                                    min={0}
                                    max={400}
                                    step={1}
                                />
                                <Divider />
                                <ResponsiveDimensionsControl
                                    controlName={
                                        INPUT_TEXTAREA_PADDING
                                    }
                                    baseLabel={__(
                                        "Padding",
                                        "essential-blocks"
                                    )}
                                />
                                <ResponsiveRangeController
                                    baseLabel={__(
                                        "Spacing",
                                        "essential-blocks"
                                    )}
                                    controlName={
                                        INPUT_TEXTAREA_SPACING
                                    }
                                    min={0}
                                    max={100}
                                    step={1}
                                />
                            </>
                            <BaseControl __nextHasNoMarginBottom>
                                <h3 className="eb-control-title">
                                    {__(
                                        "Border & Shadow",
                                        "essential-blocks"
                                    )}
                                </h3>
                            </BaseControl>
                            <BorderShadowControl
                                controlName={INPUT_TEXTAREA_BORDER}
                            />
                        </InspectorPanel.PanelBody>
                        <InspectorPanel.PanelBody
                            title={__(
                                "Placeholder",
                                "essential-blocks"
                            )}
                            initialOpen={false}
                        >
                            <>
                                <ColorControl
                                    label={__(
                                        "Color",
                                        "essential-blocks"
                                    )}
                                    color={placeholderColor}
                                    attributeName={'placeholderColor'}
                                />
                            </>
                        </InspectorPanel.PanelBody>
                        <InspectorPanel.PanelBody
                            title={__(
                                "Radio & Checkbox",
                                "essential-blocks"
                            )}
                            initialOpen={false}
                        >
                            <ToggleControl
                                label={__(
                                    "Custom Style",
                                    "essential-blocks"
                                )}
                                checked={customCheckboxStyle}
                                onChange={(customCheckboxStyle) =>
                                    setAttributes({
                                        customCheckboxStyle,
                                    })
                                }
                                __nextHasNoMarginBottom
                            />
                            {customCheckboxStyle && (
                                <>
                                    <ResponsiveRangeController
                                        baseLabel={__(
                                            "Size",
                                            "essential-blocks"
                                        )}
                                        controlName={CHECKBOX_SIZE}
                                        min={0}
                                        max={80}
                                        step={1}
                                    />
                                    <ToggleGroupControl

                                        value={checkboxSwitcher}
                                        onChange={(value) =>
                                            setAttributes({
                                                checkboxSwitcher: value,
                                            })
                                        }
                                        isBlock
__next40pxDefaultSize
__nextHasNoMarginBottom
                                    >
                                        <ToggleGroupControlOption
                                            value="normal"
                                            label={__("NORMAL", "essential-blocks")}
                                        />
                                        <ToggleGroupControlOption
                                            value="checked"
                                            label={__("CHECKED", "essential-blocks")}
                                        />
                                    </ToggleGroupControl>
                                    {checkboxSwitcher ===
                                        "normal" && (
                                            <>
                                                <ColorControl
                                                    label={__(
                                                        "Color",
                                                        "essential-blocks"
                                                    )}
                                                    color={
                                                        checkboxColor
                                                    }
                                                    attributeName={'checkboxColor'}
                                                />
                                                <ResponsiveRangeController
                                                    baseLabel={__(
                                                        "Border Width",
                                                        "essential-blocks"
                                                    )}
                                                    controlName={
                                                        CHECKBOX_BORDER
                                                    }
                                                    min={0}
                                                    max={15}
                                                    step={1}
                                                    noUnits={true}
                                                />
                                                <ColorControl
                                                    label={__(
                                                        "Border Color",
                                                        "essential-blocks"
                                                    )}
                                                    color={
                                                        checkboxBorderColor
                                                    }
                                                    attributeName={'checkboxBorderColor'}
                                                />
                                                <BaseControl __nextHasNoMarginBottom>
                                                    <h3 className="eb-control-title">
                                                        {__(
                                                            "Checkbox",
                                                            "essential-blocks"
                                                        )}
                                                    </h3>
                                                </BaseControl>
                                                <ResponsiveDimensionsControl
                                                    controlName={
                                                        CHECKBOX_RADIUS
                                                    }
                                                    baseLabel={__(
                                                        "Border Radius",
                                                        "essential-blocks"
                                                    )}
                                                />

                                                <BaseControl __nextHasNoMarginBottom>
                                                    <h3 className="eb-control-title">
                                                        {__(
                                                            "Radio Buttons",
                                                            "essential-blocks"
                                                        )}
                                                    </h3>
                                                </BaseControl>
                                                <ResponsiveDimensionsControl
                                                    controlName={
                                                        RADIO_RADIUS
                                                    }
                                                    baseLabel={__(
                                                        "Border Radius",
                                                        "essential-blocks"
                                                    )}
                                                />
                                            </>
                                        )}
                                    {checkboxSwitcher ===
                                        "checked" && (
                                            <ColorControl
                                                label={__(
                                                    "Color",
                                                    "essential-blocks"
                                                )}
                                                color={
                                                    checkboxCheckedColor
                                                }
                                                attributeName={'checkboxCheckedColor'}
                                            />
                                        )}
                                    <ResponsiveRangeController
                                        baseLabel={__(
                                            "Item Spacing",
                                            "essential-blocks"
                                        )}
                                        controlName={
                                            CHECKBOX_ITEM_SPACING
                                        }
                                        min={0}
                                        max={100}
                                        step={1}
                                    />
                                </>
                            )}
                        </InspectorPanel.PanelBody>
                        <InspectorPanel.PanelBody
                            title={__(
                                "Section Break",
                                "essential-blocks"
                            )}
                            initialOpen={false}
                        >
                            <>
                                <ToggleGroupControl
                                    label={__(
                                        "Alignment",
                                        "essential-blocks"
                                    )}

                                    value={sectionBreakPosition}
                                    onChange={(value) =>
                                        setAttributes({
                                            sectionBreakPosition: value,
                                        })
                                    }
                                    isBlock
                                    __next40pxDefaultSize
                                    __nextHasNoMarginBottom
                                >
                                    {SECTION_BREAK_POSITION.map(
                                        (item, index) => (
                                            <ToggleGroupControlOption
                                                key={index}
                                                value={item.value}
                                                label={item.label}
                                            />
                                        )
                                    )}
                                </ToggleGroupControl>
                                <Divider />
                                <BaseControl __nextHasNoMarginBottom>
                                    <h3 className="eb-control-title">
                                        {__(
                                            "Label",
                                            "essential-blocks"
                                        )}
                                    </h3>
                                </BaseControl>
                                <ColorControl
                                    label={__(
                                        "Color",
                                        "essential-blocks"
                                    )}
                                    color={sectionBreakColor}
                                    attributeName={'sectionBreakColor'}
                                />
                                <TypographyDropdown
                                    baseLabel={__(
                                        "Typography",
                                        "essential-blocks"
                                    )}
                                    typographyPrefixConstant={
                                        typoPrefix_section_break
                                    }
                                />
                                <ResponsiveDimensionsControl
                                    controlName={
                                        SECTION_BREAK_PADDING
                                    }
                                    baseLabel={__(
                                        "Padding",
                                        "essential-blocks"
                                    )}
                                />
                                <ResponsiveDimensionsControl
                                    controlName={
                                        SECTION_BREAK_MARGIN
                                    }
                                    baseLabel={__(
                                        "Margin",
                                        "essential-blocks"
                                    )}
                                />
                                <Divider />
                                <BaseControl __nextHasNoMarginBottom>
                                    <h3 className="eb-control-title">
                                        {__(
                                            "Description",
                                            "essential-blocks"
                                        )}
                                    </h3>
                                </BaseControl>
                                <ColorControl
                                    label={__(
                                        "Color",
                                        "essential-blocks"
                                    )}
                                    color={sectionBreakDescColor}
                                    attributeName={'sectionBreakDescColor'}
                                />
                                <TypographyDropdown
                                    baseLabel={__(
                                        "Typography",
                                        "essential-blocks"
                                    )}
                                    typographyPrefixConstant={
                                        typoPrefix_section_break_desc
                                    }
                                />
                                <ResponsiveDimensionsControl
                                    controlName={
                                        SECTION_BREAK_DESC_PADDING
                                    }
                                    baseLabel={__(
                                        "Padding",
                                        "essential-blocks"
                                    )}
                                />
                                <ResponsiveDimensionsControl
                                    controlName={
                                        SECTION_BREAK_DESC_MARGIN
                                    }
                                    baseLabel={__(
                                        "Margin",
                                        "essential-blocks"
                                    )}
                                />
                            </>
                        </InspectorPanel.PanelBody>
                        <InspectorPanel.PanelBody
                            title={__(
                                "Custom HTML",
                                "essential-blocks"
                            )}
                            initialOpen={false}
                        >
                            <>
                                <ToggleGroupControl
                                    label={__(
                                        "Alignment",
                                        "essential-blocks"
                                    )}

                                    value={customHtmlPosition}
                                    onChange={(value) =>
                                        setAttributes({
                                            customHtmlPosition: value,
                                        })
                                    }
                                    isBlock
                                    __next40pxDefaultSize
                                    __nextHasNoMarginBottom
                                >
                                    {SECTION_BREAK_POSITION.map(
                                        (item, index) => (
                                            <ToggleGroupControlOption
                                                key={index}
                                                value={item.value}
                                                label={item.label}
                                            />
                                        )
                                    )}
                                </ToggleGroupControl>
                                <ColorControl
                                    label={__(
                                        "Color",
                                        "essential-blocks"
                                    )}
                                    color={customHtmlColor}
                                    attributeName={'customHtmlColor'}
                                />
                                <TypographyDropdown
                                    baseLabel={__(
                                        "Typography",
                                        "essential-blocks"
                                    )}
                                    typographyPrefixConstant={
                                        typoPrefix_custom_html
                                    }
                                />
                                <ResponsiveDimensionsControl
                                    controlName={
                                        CUSTOM_HTML_PADDING
                                    }
                                    baseLabel={__(
                                        "Padding",
                                        "essential-blocks"
                                    )}
                                />
                                <ResponsiveDimensionsControl
                                    controlName={CUSTOM_HTML_MARGIN}
                                    baseLabel={__(
                                        "Margin",
                                        "essential-blocks"
                                    )}
                                />
                            </>
                        </InspectorPanel.PanelBody>
                        <InspectorPanel.PanelBody
                            title={__("Submit", "essential-blocks")}
                            initialOpen={false}
                        >
                            <>
                                {btnWidthType === "custom" && (
                                    <ToggleGroupControl
                                        label={__(
                                            "Alignment",
                                            "essential-blocks"
                                        )}

                                        value={btnAlignment}
                                        onChange={(value) =>
                                            setAttributes({
                                                btnAlignment: value,
                                            })
                                        }
                                        isBlock
                                        __next40pxDefaultSize
                                        __nextHasNoMarginBottom
                                    >
                                        {SUBMIT_BUTTON_POSITION.map(
                                            (item, index) => (
                                                <ToggleGroupControlOption
                                                    key={index}
                                                    value={item.value}
                                                    label={item.label}
                                                />
                                            )
                                        )}
                                    </ToggleGroupControl>
                                )}
                                <ResponsiveRangeController
                                    baseLabel={__(
                                        "Height",
                                        "essential-blocks"
                                    )}
                                    controlName={
                                        SUBMIT_BUTTON_HEIGHT
                                    }
                                    min={0}
                                    max={500}
                                    step={1}
                                />
                                <SelectControl
                                    label={__(
                                        "Width",
                                        "essential-blocks"
                                    )}
                                    value={btnWidthType}
                                    options={BTN_WIDTH_STYLE}
                                    onChange={(newBtnWidthType) =>
                                        setAttributes({
                                            btnWidthType: newBtnWidthType,
                                        })
                                    }
                                    __next40pxDefaultSize
                                    __nextHasNoMarginBottom
                                />
                                {btnWidthType === "custom" && (
                                    <ResponsiveRangeController
                                        baseLabel={__(
                                            "Width",
                                            "essential-blocks"
                                        )}
                                        controlName={
                                            SUBMIT_BUTTON_WIDTH
                                        }
                                        min={0}
                                        max={1200}
                                        step={1}
                                    />
                                )}
                                <TypographyDropdown
                                    baseLabel={__(
                                        "Typography",
                                        "essential-blocks"
                                    )}
                                    typographyPrefixConstant={
                                        typoPrefix_submit_btn
                                    }
                                />
                                <ToggleGroupControl

                                    value={btnHoverType}
                                    onChange={(value) =>
                                        setAttributes({
                                            btnHoverType: value,
                                        })
                                    }
                                    isBlock
__next40pxDefaultSize
__nextHasNoMarginBottom
                                >
                                    <ToggleGroupControlOption
                                        value="normal"
                                        label={__("NORMAL", "essential-blocks")}
                                    />
                                    <ToggleGroupControlOption
                                        value="hover"
                                        label={__("HOVER", "essential-blocks")}
                                    />
                                </ToggleGroupControl>
                                {btnHoverType === "normal" && (
                                    <>
                                        <ColorControl
                                            label={__(
                                                "Background Color",
                                                "essential-blocks"
                                            )}
                                            color={
                                                btnBackgroundColor
                                            }
                                            attributeName={'btnBackgroundColor'}
                                        />
                                        <ColorControl
                                            label={__(
                                                "Color",
                                                "essential-blocks"
                                            )}
                                            color={btnColor}
                                            attributeName={'btnColor'}
                                        />
                                    </>
                                )}
                                {btnHoverType === "hover" && (
                                    <>
                                        <ColorControl
                                            label={__(
                                                "Background Color",
                                                "essential-blocks"
                                            )}
                                            color={
                                                btnBackgroundHoverColor
                                            }
                                            attributeName={'btnBackgroundHoverColor'}
                                        />
                                        <ColorControl
                                            label={__(
                                                "Color",
                                                "essential-blocks"
                                            )}
                                            color={btnHoverColor}
                                            attributeName={'btnHoverColor'}
                                        />
                                    </>
                                )}
                                <Divider />
                                <ResponsiveDimensionsControl
                                    controlName={
                                        SUBMIT_BUTTON_PADDING
                                    }
                                    baseLabel={__(
                                        "Padding",
                                        "essential-blocks"
                                    )}
                                />
                                <ResponsiveDimensionsControl
                                    controlName={
                                        SUBMIT_BUTTON_MARGIN
                                    }
                                    baseLabel={__(
                                        "Margin",
                                        "essential-blocks"
                                    )}
                                />
                                <ResponsiveRangeController
                                    baseLabel={__(
                                        "Button Position",
                                        "essential-blocks"
                                    )}
                                    controlName={BUTTON_POSITION}
                                    min={-1000}
                                    max={1000}
                                    step={1}
                                />
                                <BaseControl __nextHasNoMarginBottom>
                                    <h3 className="eb-control-title">
                                        {__(
                                            "Border & Shadow",
                                            "essential-blocks"
                                        )}
                                    </h3>
                                </BaseControl>
                                <BorderShadowControl
                                    controlName={
                                        SUBMIT_BUTTON_BORDER
                                    }
                                />
                            </>
                        </InspectorPanel.PanelBody>
                        <InspectorPanel.PanelBody
                            title={__(
                                "Success Message",
                                "essential-blocks"
                            )}
                            initialOpen={false}
                        >
                            <ColorControl
                                label={__(
                                    "Background Color",
                                    "essential-blocks"
                                )}
                                color={successBackgroundColor}
                                attributeName={'successBackgroundColor'}
                            />
                            <ColorControl
                                label={__(
                                    "Color",
                                    "essential-blocks"
                                )}
                                color={successColor}
                                attributeName={'successColor'}
                            />
                            <TypographyDropdown
                                baseLabel={__(
                                    "Typography",
                                    "essential-blocks"
                                )}
                                typographyPrefixConstant={
                                    typoPrefix_success
                                }
                            />
                            <BorderShadowControl
                                controlName={SUCCESS_BORDER}
                                noShadow={true}
                            />
                        </InspectorPanel.PanelBody>
                        {showErrorMessage && (
                            <InspectorPanel.PanelBody
                                title={__(
                                    "Error Message",
                                    "essential-blocks"
                                )}
                                initialOpen={false}
                            >
                                <ColorControl
                                    label={__(
                                        "Color",
                                        "essential-blocks"
                                    )}
                                    color={errorColor}
                                    attributeName={'errorColor'}
                                />
                                <TypographyDropdown
                                    baseLabel={__(
                                        "Typography",
                                        "essential-blocks"
                                    )}
                                    typographyPrefixConstant={
                                        typoPrefix_error
                                    }
                                />
                                <ResponsiveDimensionsControl
                                    controlName={ERROR_PADDING}
                                    baseLabel={__(
                                        "Padding",
                                        "essential-blocks"
                                    )}
                                />
                                <ResponsiveDimensionsControl
                                    controlName={ERROR_MARGIN}
                                    baseLabel={__(
                                        "Margin",
                                        "essential-blocks"
                                    )}
                                />
                            </InspectorPanel.PanelBody>
                        )}
                    </>
                </InspectorPanel.Style>
            </InspectorPanel>
        </>
    );
};

export default Inspector;
