/**
 * WordPress dependencies
 */
import { __ } from "@wordpress/i18n";
import { useEffect, useState, useRef } from "@wordpress/element";
import { select, useSelect } from "@wordpress/data";
import {
    PanelBody,
    SelectControl,
    ToggleControl,
    Button,
    RangeControl,
    BaseControl,
    ButtonGroup,
    TabPanel,
    TextControl,
    TextareaControl,
    PanelRow,
    __experimentalDivider as Divider,
} from "@wordpress/components";

import {
    BackgroundControl,
    BorderShadowControl,
    ColorControl,
    ResponsiveRangeController,
    ResponsiveDimensionsControl,
    TypographyDropdown,
    ProSelectControl,
    EBIconPicker,
    useBlockDefaults,
    withBlockContext
} from "@essential-blocks/controls";

import {
    WRAPPER_BG,
    WRAPPER_MARGIN,
    WRAPPER_PADDING,
    WRAPPER_BORDER_SHADOW,
    FORM_TYPE,
    NOTIFICATION_TYPE,
    INTEGRATIONS,
    CONFIRMATION_TYPE,
    NORMAL_HOVER,
    NORMAL_CHECKED,
    ROWS_GAP,
    BTN_PADDING,
    LABEL_MARGIN,
    BTN_BORDER,
    FIELDS_BORDER,
    FIELDS_PADDING,
    SUCCESS_PADDING,
    SUCCESS_BORDER,
    ERROR_PADDING,
    ERROR_BORDER,
    RADIO_SIZE,
    RADIO_SPACING,
    CHECKBOX_SIZE,
    CHECKBOX_SPACING,
    BUTTON_WIDTH,
    CONTENTS_ALIGNMENTS,
    FIXED_WIDTH,
    ICON_POSITION,
    ICON_SIZE,
    ICON_SPACE,
    MESSAGE_TYPE,
    TEMPLATES,
    SUBSCRIPTION_TEMPLATES,
    FORM_WIDTH,
    FORM_CUSTOM_WIDTH,
    BUTTON_STYLE,
    VERTICAL_ALIGN,
    BTN_VERTICAL_POSITION,
    BTN_HORIZONTAL_POSITION,
    INLINE_FORM_WIDTH,
    INPUT_ICON_SIZE,
    BTN_TOP_SPECING,
    FORM_STYLES,
    INPUT_WIDTH,
    SIZE_UNIT_TYPES,
} from "@essential-blocks/blocks/form/src/constants";

import {
    LABEL_TYPOGRAPHY,
    BTN_TEXT,
    FIELDS_TEXT,
    SUCCESS_TYPO,
    ERROR_TYPO,
    RADIO_TEXT,
    CHECKBOX_TEXT,
    FIELDS_TEXT_VALIDATION,
} from "@essential-blocks/blocks/form/src/constants/typographyPrefixConstants";

import objAttributes from "@essential-blocks/blocks/form/src/attributes";

function Form(props) {
    const { blockDefaults, setBlockDefaults, name, deviceType, handleBlockDefault } = props;


    const [formSettings, setFormSettings] = useState({});


    const {
        blockId,
        resOption,
        formId,
        formTitle,
        formType,
        template,
        integrations,
        mailBody,
        notificationType,
        confirmationType,
        successMessage,
        errorMessage,
        validationErrorMessage,
        labelColor,
        buttonType,
        btnColor,
        btnHvColor,
        btnBgColor,
        btnBgHvColor,
        formWidth,
        formAlign,

        fieldsColor,
        fieldsPlaceholderColor,
        fieldsBgColor,

        messageType,
        messageAlign,
        successColor,
        successBgColor,
        errorColor,
        errorBgColor,

        radioType,
        radioColor,
        radioBgColor,
        radioBrColor,
        radioBrCheckedColor,
        radioBorder,
        checkboxType,
        checkboxColor,
        checkboxBgColor,
        checkboxBrColor,
        checkboxBrCheckedColor,
        checkboxBorder,
        dateBgColor,
        dateSelectedColor,
        fieldsValidationBorderColor,
        fieldsValidationColor,
        requiredColor,

        buttonAlign,
        buttonText,
        buttonWidth,
        btnAddIcon,
        icon,
        iconPosition,
        labelAlign,
        validationAlign,
        fieldAlign,
        formLayout,
        btnVerticalAlign,
        showInputIcon,
        showLabel,
        inputIconColor,
        formStyle,
    } = blockDefaults;
    const isDefaultSet = useBlockDefaults(name, blockDefaults, setBlockDefaults, objAttributes)

    return (
        <>
            {isDefaultSet && (
                <div className="eb-panel-control">
                    <>
                        <PanelBody
                            title={__(
                                "General",
                                "essential-blocks"
                            )}
                            initialOpen={true}
                        >
                            <TextControl
                                label={__(
                                    "Form Title",
                                    "essential-blocks"
                                )}
                                value={formTitle}
                                type="string"
                                help={__(
                                    "Use Title to recognize in Form Response",
                                    "essential-blocks"
                                )}
                                onChange={(value) =>
                                    handleBlockDefault({
                                        formTitle: value,
                                    })
                                }
                                __next40pxDefaultSize
                                __nextHasNoMarginBottom
                            />
                            <ToggleControl
                                label={__(
                                    "Show Field Labels?",
                                    "essential-blocks"
                                )}
                                checked={showLabel}
                                onChange={() =>
                                    handleBlockDefault({
                                        showLabel: !showLabel,
                                    })
                                }
                                __nextHasNoMarginBottom
                            />
                            <ToggleControl
                                label={__(
                                    "Show Field Icons?",
                                    "essential-blocks"
                                )}
                                checked={showInputIcon}
                                onChange={() =>
                                    handleBlockDefault({
                                        showInputIcon: !showInputIcon,
                                    })
                                }
                                __nextHasNoMarginBottom
                            />

                            {/* {applyFilters(
                                "eb_form_block_control_after_form_type",
                                "",
                                attributes,
                                handleBlockDefault
                            )} */}
                        </PanelBody>
                        <PanelBody
                            title={__(
                                "Form Settings",
                                "essential-blocks"
                            )}
                            initialOpen={true}
                        >
                            <ProSelectControl
                                label={__(
                                    "Notification Type",
                                    "essential-blocks"
                                )}
                                value={notificationType}
                                options={NOTIFICATION_TYPE}
                                onChange={(selected) =>
                                    handleBlockDefault({
                                        notificationType: selected,
                                    })
                                }
                            />
                            {/* <DynamicInputControl
                                            label="Email To"
                                           attrName="mailTo"
                                            inputValue={mailTo}
                                            handleBlockDefault={handleBlockDefault}
                                            onChange={(text) => handleBlockDefault({ mailTo: text })}
                                            help={__("Use , to seperate emails", "essential-blocks")}
                                        />
                                        <DynamicInputControl
                                            label="Email Cc"
                                           attrName="mailCc"
                                            inputValue={mailCc}
                                            handleBlockDefault={handleBlockDefault}
                                            onChange={(text) => handleBlockDefault({ mailCc: text })}
                                            help={__("Use , to seperate emails", "essential-blocks")}
                                        />
                                        <DynamicInputControl
                                            label="Email Bcc"
                                           attrName="mailBcc"
                                            inputValue={mailBcc}
                                            handleBlockDefault={handleBlockDefault}
                                            onChange={(text) => handleBlockDefault({ mailBcc: text })}
                                            help={__("Use , to seperate emails", "essential-blocks")}
                                        />
                                        <DynamicInputControl
                                            label="Email Subject"
                                           attrName="mailSubject"
                                            inputValue={mailSubject}
                                            handleBlockDefault={handleBlockDefault}
                                            onChange={(text) => handleBlockDefault({ mailSubject: text })}
                                        />
                                        <TextareaControl
                                            label="Email Body"
                                            help="Write your email body here"
                                            value={mailBody}
                                            rows={5}
                                            onChange={(text) => handleBlockDefault({ mailBody: text })}
                                            __nextHasNoMarginBottom
                                        /> */}
                            <TextControl
                                label={__(
                                    "Email To",
                                    "essential-blocks"
                                )}
                                value={formSettings.mailTo}
                                placeholder={
                                    select("core")?.getSite()
                                        ?.email ||
                                    __(
                                        "Default is to Admin Email",
                                        "essential-blocks"
                                    )
                                }
                                onChange={(text) =>
                                    setFormSettings({
                                        ...formSettings,
                                        mailTo: text,
                                    })
                                }
                                help={__(
                                    "Use commas to separate emails",
                                    "essential-blocks"
                                )}
                                __next40pxDefaultSize
                                __nextHasNoMarginBottom
                            />
                            <TextControl
                                label={__(
                                    "Email Cc (Optional)",
                                    "essential-blocks"
                                )}
                                placeholder={__(
                                    "Recipient Email Address",
                                    "essential-blocks"
                                )}
                                value={formSettings.mailCc}
                                onChange={(text) =>
                                    setFormSettings({
                                        ...formSettings,
                                        mailCc: text,
                                    })
                                }
                                help={__(
                                    "Use commas to separate emails",
                                    "essential-blocks"
                                )}
                                __next40pxDefaultSize
                                __nextHasNoMarginBottom
                            />
                            <TextControl
                                label={__(
                                    "Email Bcc (Optional)",
                                    "essential-blocks"
                                )}
                                value={formSettings.mailBcc}
                                placeholder={__(
                                    "Recipient Email Address",
                                    "essential-blocks"
                                )}
                                onChange={(text) =>
                                    setFormSettings({
                                        ...formSettings,
                                        mailBcc: text,
                                    })
                                }
                                help={__(
                                    "Use commas to separate emails",
                                    "essential-blocks"
                                )}
                                __next40pxDefaultSize
                                __nextHasNoMarginBottom
                            />
                            <TextControl
                                label={__(
                                    "Email Subject",
                                    "essential-blocks"
                                )}
                                attrName="mailSubject"
                                value={formSettings.mailSubject}
                                placeholder={
                                    "New Form Submission [" +
                                    select("core")?.getSite()?.url +
                                    "]"
                                }
                                onChange={(text) =>
                                    setFormSettings({
                                        ...formSettings,
                                        mailSubject: text,
                                    })
                                }
                                __next40pxDefaultSize
                                __nextHasNoMarginBottom
                            />

                            {/* <TextareaControl
                                            label="Email Body"
                                            help="Write your email body here"
                                            value={mailBody}
                                            rows={5}
                                            onChange={(text) =>
                                                handleBlockDefault({
                                                    mailBody: text,
                                                })
                                            }
                                            __nextHasNoMarginBottom
                                        /> */}
                        </PanelBody>
                        <PanelBody
                            title={__(
                                "Confirmation Settings",
                                "essential-blocks"
                            )}
                            initialOpen={true}
                        >
                            <ProSelectControl
                                label={__(
                                    "Confirmation Type",
                                    "essential-blocks"
                                )}
                                value={confirmationType}
                                options={CONFIRMATION_TYPE}
                                onChange={(selected) =>
                                    handleBlockDefault({
                                        confirmationType: selected,
                                    })
                                }
                            />
                            {/* {applyFilters(
                                "eb_form_block_control_after_confirmation_type",
                                "",
                                attributes,
                                handleBlockDefault
                            )} */}

                            {confirmationType === "message" && (
                                <>
                                    <TextareaControl
                                        label="Success Message"
                                        // help="Write your email body here"
                                        value={successMessage}
                                        rows={3}
                                        onChange={(text) =>
                                            handleBlockDefault({
                                                successMessage: text,
                                            })
                                        }
                                        __nextHasNoMarginBottom
                                    />
                                    <TextareaControl
                                        label="Default Error Message"
                                        // help="Write your email body here"
                                        value={errorMessage}
                                        rows={3}
                                        onChange={(text) =>
                                            handleBlockDefault({
                                                errorMessage: text,
                                            })
                                        }
                                        __nextHasNoMarginBottom
                                    />
                                </>
                            )}
                            <TextareaControl
                                label="Validation Error Message"
                                // help="Write your email body here"
                                value={validationErrorMessage}
                                rows={3}
                                onChange={(text) =>
                                    handleBlockDefault({
                                        validationErrorMessage: text,
                                    })
                                }
                                __nextHasNoMarginBottom
                            />
                        </PanelBody>

                        <PanelBody
                            title={__("Button", "essential-blocks")}
                            initialOpen={false}
                        >
                            <>
                                <ProSelectControl
                                    label={__(
                                        "Button Type",
                                        "essential-blocks"
                                    )}
                                    value={formLayout}
                                    options={BUTTON_STYLE}
                                    onChange={(selected) =>
                                        handleFormStyle(selected)
                                    }
                                />

                                {formLayout == "inline" && (
                                    <>
                                        <ResponsiveRangeController
                                            baseLabel={__(
                                                "Fields Width (%)",
                                                "essential-blocks"
                                            )}
                                            controlName={
                                                INLINE_FORM_WIDTH
                                            }
                                            min={1}
                                            max={100}
                                            step={1}
                                            noUnits
                                        />
                                    </>
                                )}

                                <TextControl
                                    label={__(
                                        "Text",
                                        "essential-blocks"
                                    )}
                                    value={buttonText}
                                    onChange={(buttonText) =>
                                        handleBlockDefault({
                                            buttonText,
                                        })
                                    }
                                    __next40pxDefaultSize
                                    __nextHasNoMarginBottom
                                />
                                <ToggleControl
                                    label={__(
                                        "Add icon",
                                        "essential-blocks"
                                    )}
                                    checked={btnAddIcon}
                                    onChange={() =>
                                        handleBlockDefault({
                                            btnAddIcon: !btnAddIcon,
                                        })
                                    }
                                    __nextHasNoMarginBottom
                                />
                                {btnAddIcon && (
                                    <>
                                        <EBIconPicker
                                            value={icon}
                                            onChange={(icon) =>
                                                handleBlockDefault({
                                                    icon
                                                })
                                            }
                                        />
                                    </>
                                )}
                            </>
                        </PanelBody>
                    </>

                    <>
                        <PanelBody
                            title={__("Form", "essential-blocks")}
                            initialOpen={true}
                        >
                            <ResponsiveRangeController
                                baseLabel={__(
                                    "Fields Gap (PX)",
                                    "essential-blocks"
                                )}
                                controlName={ROWS_GAP}
                                min={0}
                                max={100}
                                step={1}
                                noUnits
                            />
                            <BaseControl
                                label={__(
                                    "Width",
                                    "essential-blocks"
                                )}
                                __nextHasNoMarginBottom
                            >
                                <ButtonGroup id="eb-button-group-alignment">
                                    {FORM_WIDTH.map(
                                        (item, index) => (
                                            <Button
                                                key={index}
                                                isPrimary={
                                                    formWidth ===
                                                    item.value
                                                }
                                                isSecondary={
                                                    formWidth !==
                                                    item.value
                                                }
                                                onClick={() =>
                                                    handleBlockDefault({
                                                        formWidth:
                                                            item.value,
                                                    })
                                                }
                                            >
                                                {item.label}
                                            </Button>
                                        )
                                    )}
                                </ButtonGroup>
                            </BaseControl>

                            {formWidth === "fixed" && (
                                <>
                                    <ResponsiveRangeController
                                        baseLabel={__(
                                            "Fixed Width",
                                            "essential-blocks"
                                        )}
                                        controlName={
                                            FORM_CUSTOM_WIDTH
                                        }
                                        min={200}
                                        max={2000}
                                        step={10}
                                    />

                                    <BaseControl
                                        label={__(
                                            "Alignment",
                                            "essential-blocks"
                                        )}
                                        __nextHasNoMarginBottom
                                    >
                                        <ButtonGroup id="eb-button-group-alignment">
                                            {CONTENTS_ALIGNMENTS.map(
                                                (item, index) => (
                                                    <Button
                                                        key={index}
                                                        isPrimary={
                                                            formAlign ===
                                                            item.value
                                                        }
                                                        isSecondary={
                                                            formAlign !==
                                                            item.value
                                                        }
                                                        onClick={() =>
                                                            handleBlockDefault(
                                                                {
                                                                    formAlign:
                                                                        item.value,
                                                                }
                                                            )
                                                        }
                                                    >
                                                        {item.label}
                                                    </Button>
                                                )
                                            )}
                                        </ButtonGroup>
                                    </BaseControl>
                                </>
                            )}
                        </PanelBody>
                        {showLabel && (
                            <PanelBody
                                title={__(
                                    "Labels",
                                    "essential-blocks"
                                )}
                                initialOpen={false}
                            >
                                <TypographyDropdown
                                    baseLabel={__(
                                        "Typography",
                                        "essential-blocks"
                                    )}
                                    typographyPrefixConstant={
                                        LABEL_TYPOGRAPHY
                                    }
                                />
                                <ColorControl
                                    label={__(
                                        "Color",
                                        "essential-blocks"
                                    )}
                                    color={labelColor}
                                    onChange={(labelColor) =>
                                        handleBlockDefault({
                                            labelColor,
                                        })
                                    }
                                />
                                <ColorControl
                                    label={__(
                                        "Requied Color",
                                        "essential-blocks"
                                    )}
                                    color={requiredColor}
                                    onChange={(requiredColor) =>
                                        handleBlockDefault({
                                            requiredColor,
                                        })
                                    }
                                />
                                <BaseControl
                                    label={__(
                                        "Alignment",
                                        "essential-blocks"
                                    )}
                                    __nextHasNoMarginBottom
                                >
                                    <ButtonGroup id="eb-button-group-alignment">
                                        {CONTENTS_ALIGNMENTS.map(
                                            (item, index) => (
                                                <Button
                                                    key={index}
                                                    isPrimary={
                                                        labelAlign ===
                                                        item.value
                                                    }
                                                    isSecondary={
                                                        labelAlign !==
                                                        item.value
                                                    }
                                                    onClick={() =>
                                                        handleBlockDefault(
                                                            {
                                                                labelAlign:
                                                                    item.value,
                                                            }
                                                        )
                                                    }
                                                >
                                                    {item.label}
                                                </Button>
                                            )
                                        )}
                                    </ButtonGroup>
                                </BaseControl>
                                <ResponsiveDimensionsControl
                                    controlName={LABEL_MARGIN}
                                    baseLabel={__(
                                        "Margin",
                                        "essential-blocks"
                                    )}
                                />
                            </PanelBody>
                        )}
                        {showInputIcon && (
                            <>
                                <PanelBody
                                    title={__(
                                        "Fields Icon",
                                        "essential-blocks"
                                    )}
                                    initialOpen={false}
                                >
                                    <ColorControl
                                        label={__(
                                            "Color",
                                            "essential-blocks"
                                        )}
                                        color={inputIconColor}
                                        onChange={(
                                            inputIconColor
                                        ) =>
                                            handleBlockDefault({
                                                inputIconColor,
                                            })
                                        }
                                    />
                                    <ResponsiveRangeController
                                        baseLabel={__(
                                            "Size (PX)",
                                            "essential-blocks"
                                        )}
                                        controlName={
                                            INPUT_ICON_SIZE
                                        }
                                        min={1}
                                        max={100}
                                        step={1}
                                        noUnits
                                    />
                                </PanelBody>
                            </>
                        )}

                        <PanelBody
                            title={__(
                                "Input Fields",
                                "essential-blocks"
                            )}
                            initialOpen={false}
                        >
                            <>
                                <TypographyDropdown
                                    baseLabel={__(
                                        "Typography",
                                        "essential-blocks"
                                    )}
                                    typographyPrefixConstant={
                                        FIELDS_TEXT
                                    }
                                />

                                <ColorControl
                                    label={__(
                                        "Color",
                                        "essential-blocks"
                                    )}
                                    color={fieldsColor}
                                    onChange={(fieldsColor) =>
                                        handleBlockDefault({
                                            fieldsColor,
                                        })
                                    }
                                />
                                <ColorControl
                                    label={__(
                                        "Placeholder Color",
                                        "essential-blocks"
                                    )}
                                    color={fieldsPlaceholderColor}
                                    onChange={(
                                        fieldsPlaceholderColor
                                    ) =>
                                        handleBlockDefault({
                                            fieldsPlaceholderColor,
                                        })
                                    }
                                />
                                <ColorControl
                                    label={__(
                                        "Background",
                                        "essential-blocks"
                                    )}
                                    color={fieldsBgColor}
                                    onChange={(fieldsBgColor) =>
                                        handleBlockDefault({
                                            fieldsBgColor,
                                        })
                                    }
                                />

                                <ResponsiveRangeController
                                    baseLabel={__(
                                        "Width (%)",
                                        "essential-blocks"
                                    )}
                                    controlName={INPUT_WIDTH}
                                    min={1}
                                    max={100}
                                    step={1}
                                    units={SIZE_UNIT_TYPES}
                                />

                                <BaseControl
                                    label={__(
                                        "Alignment",
                                        "essential-blocks"
                                    )}
                                    __nextHasNoMarginBottom
                                >
                                    <ButtonGroup id="eb-button-group-alignment">
                                        {CONTENTS_ALIGNMENTS.map(
                                            (item, index) => (
                                                <Button
                                                    key={index}
                                                    isPrimary={
                                                        fieldAlign ===
                                                        item.value
                                                    }
                                                    isSecondary={
                                                        fieldAlign !==
                                                        item.value
                                                    }
                                                    onClick={() =>
                                                        handleBlockDefault(
                                                            {
                                                                fieldAlign:
                                                                    item.value,
                                                            }
                                                        )
                                                    }
                                                >
                                                    {item.label}
                                                </Button>
                                            )
                                        )}
                                    </ButtonGroup>
                                </BaseControl>
                                <ResponsiveDimensionsControl
                                    controlName={FIELDS_PADDING}
                                    baseLabel={__(
                                        "Padding",
                                        "essential-blocks"
                                    )}
                                />

                                <PanelBody
                                    title={__(
                                        "Border",
                                        "essential-blocks"
                                    )}
                                    initialOpen={false}
                                >
                                    <BorderShadowControl
                                        controlName={FIELDS_BORDER}
                                    />
                                </PanelBody>
                            </>
                        </PanelBody>
                        <PanelBody
                            title={__(
                                "Checkbox Fields",
                                "essential-blocks"
                            )}
                            initialOpen={false}
                        >
                            <>
                                <TypographyDropdown
                                    baseLabel={__(
                                        "Typography",
                                        "essential-blocks"
                                    )}
                                    typographyPrefixConstant={
                                        CHECKBOX_TEXT
                                    }
                                />

                                <ColorControl
                                    label={__(
                                        "Color",
                                        "essential-blocks"
                                    )}
                                    color={checkboxColor}
                                    onChange={(checkboxColor) =>
                                        handleBlockDefault({
                                            checkboxColor,
                                        })
                                    }
                                />
                                <ColorControl
                                    label={__(
                                        "Background",
                                        "essential-blocks"
                                    )}
                                    color={checkboxBgColor}
                                    onChange={(checkboxBgColor) =>
                                        handleBlockDefault({
                                            checkboxBgColor,
                                        })
                                    }
                                />
                                <ResponsiveRangeController
                                    baseLabel={__(
                                        "Size (PX)",
                                        "essential-blocks"
                                    )}
                                    controlName={CHECKBOX_SIZE}
                                    min={1}
                                    max={100}
                                    step={1}
                                    noUnits
                                />
                                <RangeControl
                                    label={__(
                                        "Border Width",
                                        "essential-blocks"
                                    )}
                                    value={checkboxBorder}
                                    onChange={(checkboxBorder) =>
                                        handleBlockDefault({
                                            checkboxBorder,
                                        })
                                    }
                                    min={1}
                                    max={5}
                                    step={1}
                                    allowReset={true}
                                    __nextHasNoMarginBottom
                                    __next40pxDefaultSize
                                />

                                <ButtonGroup className="eb-inspector-btn-group">
                                    {NORMAL_CHECKED.map(
                                        (item, index) => (
                                            <Button
                                                key={index}
                                                isPrimary={
                                                    checkboxType ===
                                                    item.value
                                                }
                                                isSecondary={
                                                    checkboxType !==
                                                    item.value
                                                }
                                                onClick={() =>
                                                    handleBlockDefault({
                                                        checkboxType:
                                                            item.value,
                                                    })
                                                }
                                            >
                                                {item.label}
                                            </Button>
                                        )
                                    )}
                                </ButtonGroup>

                                {checkboxType === "normal" && (
                                    <>
                                        <ColorControl
                                            label={__(
                                                "Border Color",
                                                "essential-blocks"
                                            )}
                                            color={checkboxBrColor}
                                            onChange={(
                                                checkboxBrColor
                                            ) =>
                                                handleBlockDefault({
                                                    checkboxBrColor,
                                                })
                                            }
                                        />
                                    </>
                                )}
                                {checkboxType === "checked" && (
                                    <>
                                        <ColorControl
                                            label={__(
                                                "Border Color",
                                                "essential-blocks"
                                            )}
                                            color={
                                                checkboxBrCheckedColor
                                            }
                                            onChange={(
                                                checkboxBrCheckedColor
                                            ) =>
                                                handleBlockDefault({
                                                    checkboxBrCheckedColor,
                                                })
                                            }
                                        />
                                    </>
                                )}

                                <ResponsiveRangeController
                                    baseLabel={__(
                                        "Spacing (PX)",
                                        "essential-blocks"
                                    )}
                                    controlName={CHECKBOX_SPACING}
                                    min={1}
                                    max={100}
                                    step={1}
                                    noUnits
                                />
                            </>
                        </PanelBody>
                        <PanelBody
                            title={__(
                                "Radio Fields",
                                "essential-blocks"
                            )}
                            initialOpen={false}
                        >
                            <>
                                <TypographyDropdown
                                    baseLabel={__(
                                        "Typography",
                                        "essential-blocks"
                                    )}
                                    typographyPrefixConstant={
                                        RADIO_TEXT
                                    }
                                />

                                <ColorControl
                                    label={__(
                                        "Color",
                                        "essential-blocks"
                                    )}
                                    color={radioColor}
                                    onChange={(radioColor) =>
                                        handleBlockDefault({
                                            radioColor,
                                        })
                                    }
                                />
                                <ColorControl
                                    label={__(
                                        "Background",
                                        "essential-blocks"
                                    )}
                                    color={radioBgColor}
                                    onChange={(radioBgColor) =>
                                        handleBlockDefault({
                                            radioBgColor,
                                        })
                                    }
                                />
                                <ResponsiveRangeController
                                    baseLabel={__(
                                        "Size (PX)",
                                        "essential-blocks"
                                    )}
                                    controlName={RADIO_SIZE}
                                    min={1}
                                    max={100}
                                    step={1}
                                    noUnits
                                />
                                <RangeControl
                                    label={__(
                                        "Border Width",
                                        "essential-blocks"
                                    )}
                                    value={radioBorder}
                                    onChange={(radioBorder) =>
                                        handleBlockDefault({
                                            radioBorder,
                                        })
                                    }
                                    min={1}
                                    max={5}
                                    step={1}
                                    allowReset={true}
                                    __nextHasNoMarginBottom
                                    __next40pxDefaultSize
                                />

                                <ButtonGroup className="eb-inspector-btn-group">
                                    {NORMAL_CHECKED.map(
                                        (item, index) => (
                                            <Button
                                                key={index}
                                                isPrimary={
                                                    radioType ===
                                                    item.value
                                                }
                                                isSecondary={
                                                    radioType !==
                                                    item.value
                                                }
                                                onClick={() =>
                                                    handleBlockDefault({
                                                        radioType:
                                                            item.value,
                                                    })
                                                }
                                            >
                                                {item.label}
                                            </Button>
                                        )
                                    )}
                                </ButtonGroup>

                                {radioType === "normal" && (
                                    <>
                                        <ColorControl
                                            label={__(
                                                "Border Color",
                                                "essential-blocks"
                                            )}
                                            color={radioBrColor}
                                            onChange={(
                                                radioBrColor
                                            ) =>
                                                handleBlockDefault({
                                                    radioBrColor,
                                                })
                                            }
                                        />
                                    </>
                                )}
                                {radioType === "checked" && (
                                    <>
                                        <ColorControl
                                            label={__(
                                                "Border Color",
                                                "essential-blocks"
                                            )}
                                            color={
                                                radioBrCheckedColor
                                            }
                                            onChange={(
                                                radioBrCheckedColor
                                            ) =>
                                                handleBlockDefault({
                                                    radioBrCheckedColor,
                                                })
                                            }
                                        />
                                    </>
                                )}

                                <ResponsiveRangeController
                                    baseLabel={__(
                                        "Spacing (PX)",
                                        "essential-blocks"
                                    )}
                                    controlName={RADIO_SPACING}
                                    min={1}
                                    max={100}
                                    step={1}
                                    noUnits
                                />
                            </>
                        </PanelBody>
                        <PanelBody
                            title={__(
                                "Date Fields",
                                "essential-blocks"
                            )}
                            initialOpen={false}
                        >
                            <>
                                <ColorControl
                                    label={__(
                                        "Selected Color",
                                        "essential-blocks"
                                    )}
                                    color={dateSelectedColor}
                                    onChange={(dateSelectedColor) =>
                                        handleBlockDefault({
                                            dateSelectedColor,
                                        })
                                    }
                                />
                                <ColorControl
                                    label={__(
                                        "Selected Background",
                                        "essential-blocks"
                                    )}
                                    color={dateBgColor}
                                    onChange={(dateBgColor) =>
                                        handleBlockDefault({
                                            dateBgColor,
                                        })
                                    }
                                />
                            </>
                        </PanelBody>
                        <PanelBody
                            title={__("Button", "essential-blocks")}
                            initialOpen={false}
                        >
                            <BaseControl
                                label={__(
                                    "Alignment",
                                    "essential-blocks"
                                )}
                                __nextHasNoMarginBottom
                            >
                                <ButtonGroup id="eb-button-group-alignment">
                                    {CONTENTS_ALIGNMENTS.map(
                                        (item, index) => (
                                            <Button
                                                key={index}
                                                isPrimary={
                                                    buttonAlign ===
                                                    item.value
                                                }
                                                isSecondary={
                                                    buttonAlign !==
                                                    item.value
                                                }
                                                onClick={() =>
                                                    handleBlockDefault({
                                                        buttonAlign:
                                                            item.value,
                                                    })
                                                }
                                            >
                                                {item.label}
                                            </Button>
                                        )
                                    )}
                                </ButtonGroup>
                            </BaseControl>
                            {formLayout == "inline" && (
                                <>
                                    <BaseControl
                                        label={__(
                                            "Vertical Align",
                                            "essential-blocks"
                                        )}
                                        __nextHasNoMarginBottom
                                    >
                                        <ButtonGroup>
                                            {VERTICAL_ALIGN.map(
                                                (item) => (
                                                    <Button
                                                        // isLarge
                                                        isPrimary={
                                                            btnVerticalAlign ===
                                                            item.value
                                                        }
                                                        isSecondary={
                                                            btnVerticalAlign !==
                                                            item.value
                                                        }
                                                        onClick={() =>
                                                            handleBlockDefault(
                                                                {
                                                                    btnVerticalAlign:
                                                                        item.value,
                                                                }
                                                            )
                                                        }
                                                    >
                                                        {item.label}
                                                    </Button>
                                                )
                                            )}
                                        </ButtonGroup>
                                    </BaseControl>

                                    <Divider />

                                    <ResponsiveRangeController
                                        baseLabel={__(
                                            "Vertical Position",
                                            "essential-blocks"
                                        )}
                                        controlName={
                                            BTN_VERTICAL_POSITION
                                        }
                                        min={-500}
                                        max={500}
                                        step={1}
                                    />
                                    <ResponsiveRangeController
                                        baseLabel={__(
                                            "Horizontal Position",
                                            "essential-blocks"
                                        )}
                                        controlName={
                                            BTN_HORIZONTAL_POSITION
                                        }
                                        min={0}
                                        max={500}
                                        step={1}
                                    />
                                </>
                            )}
                            <BaseControl
                                label={__(
                                    "Width",
                                    "essential-blocks"
                                )}
                                __nextHasNoMarginBottom
                            >
                                <ButtonGroup id="eb-button-group-alignment">
                                    {BUTTON_WIDTH.map(
                                        (item, index) => (
                                            <Button
                                                key={index}
                                                isPrimary={
                                                    buttonWidth ===
                                                    item.value
                                                }
                                                isSecondary={
                                                    buttonWidth !==
                                                    item.value
                                                }
                                                onClick={() =>
                                                    handleBlockDefault({
                                                        buttonWidth:
                                                            item.value,
                                                    })
                                                }
                                            >
                                                {item.label}
                                            </Button>
                                        )
                                    )}
                                </ButtonGroup>
                            </BaseControl>
                            {buttonWidth === "fixed" && (
                                <ResponsiveRangeController
                                    baseLabel={__(
                                        "Fixed Width",
                                        "essential-blocks"
                                    )}
                                    controlName={FIXED_WIDTH}
                                    min={100}
                                    max={900}
                                    step={1}
                                />
                            )}

                            <>
                                <TypographyDropdown
                                    baseLabel={__(
                                        "Typography",
                                        "essential-blocks"
                                    )}
                                    typographyPrefixConstant={
                                        BTN_TEXT
                                    }
                                />
                                <ButtonGroup className="eb-inspector-btn-group">
                                    {NORMAL_HOVER.map(
                                        (item, index) => (
                                            <Button
                                                key={index}
                                                isPrimary={
                                                    buttonType ===
                                                    item.value
                                                }
                                                isSecondary={
                                                    buttonType !==
                                                    item.value
                                                }
                                                onClick={() =>
                                                    handleBlockDefault({
                                                        buttonType:
                                                            item.value,
                                                    })
                                                }
                                            >
                                                {item.label}
                                            </Button>
                                        )
                                    )}
                                </ButtonGroup>

                                {buttonType === "normal" && (
                                    <>
                                        <ColorControl
                                            label={__(
                                                "Color",
                                                "essential-blocks"
                                            )}
                                            color={btnColor}
                                            onChange={(btnColor) =>
                                                handleBlockDefault({
                                                    btnColor,
                                                })
                                            }
                                        />
                                        <ColorControl
                                            label={__(
                                                "Background",
                                                "essential-blocks"
                                            )}
                                            color={btnBgColor}
                                            onChange={(
                                                btnBgColor
                                            ) =>
                                                handleBlockDefault({
                                                    btnBgColor,
                                                })
                                            }
                                        />
                                    </>
                                )}

                                {buttonType === "hover" && (
                                    <>
                                        <ColorControl
                                            label={__(
                                                "Color",
                                                "essential-blocks"
                                            )}
                                            color={btnHvColor}
                                            onChange={(
                                                btnHvColor
                                            ) =>
                                                handleBlockDefault({
                                                    btnHvColor,
                                                })
                                            }
                                        />
                                        <ColorControl
                                            label={__(
                                                "Background",
                                                "essential-blocks"
                                            )}
                                            color={btnBgHvColor}
                                            onChange={(
                                                btnBgHvColor
                                            ) =>
                                                handleBlockDefault({
                                                    btnBgHvColor,
                                                })
                                            }
                                        />
                                    </>
                                )}

                                <ResponsiveDimensionsControl
                                    controlName={BTN_PADDING}
                                    baseLabel={__(
                                        "Padding",
                                        "essential-blocks"
                                    )}
                                />

                                {formLayout == "block" && (
                                    <ResponsiveRangeController
                                        baseLabel={__(
                                            "Margin Top (PX)",
                                            "essential-blocks"
                                        )}
                                        controlName={
                                            BTN_TOP_SPECING
                                        }
                                        min={0}
                                        max={500}
                                        step={1}
                                        noUnits
                                    />
                                )}

                                <PanelBody
                                    title={__(
                                        "Border",
                                        "essential-blocks"
                                    )}
                                    initialOpen={false}
                                >
                                    <BorderShadowControl
                                        controlName={BTN_BORDER}
                                    />
                                </PanelBody>
                            </>

                            {btnAddIcon && (
                                <>
                                    <Divider />
                                    <BaseControl
                                        label={__(
                                            "Icon Postion",
                                            "essential-blocks"
                                        )}
                                        __nextHasNoMarginBottom
                                    >
                                        <ButtonGroup id="eb-button-group-alignment">
                                            {ICON_POSITION.map(
                                                (item, index) => (
                                                    <Button
                                                        key={index}
                                                        isPrimary={
                                                            iconPosition ===
                                                            item.value
                                                        }
                                                        isSecondary={
                                                            iconPosition !==
                                                            item.value
                                                        }
                                                        onClick={() =>
                                                            handleBlockDefault(
                                                                {
                                                                    iconPosition:
                                                                        item.value,
                                                                }
                                                            )
                                                        }
                                                    >
                                                        {item.label}
                                                    </Button>
                                                )
                                            )}
                                        </ButtonGroup>
                                    </BaseControl>
                                    <ResponsiveRangeController
                                        baseLabel={__(
                                            "Size",
                                            "essential-blocks"
                                        )}
                                        controlName={ICON_SIZE}
                                        noUnits={true}
                                    />
                                    <ResponsiveRangeController
                                        baseLabel={__(
                                            "Gap",
                                            "essential-blocks"
                                        )}
                                        controlName={ICON_SPACE}
                                        noUnits={true}
                                    />
                                </>
                            )}
                        </PanelBody>
                        <PanelBody
                            title={__(
                                "Validation",
                                "essential-blocks"
                            )}
                            initialOpen={false}
                        >
                            <TypographyDropdown
                                baseLabel={__(
                                    "Typography",
                                    "essential-blocks"
                                )}
                                typographyPrefixConstant={
                                    FIELDS_TEXT_VALIDATION
                                }
                            />

                            <ColorControl
                                label={__(
                                    "Color",
                                    "essential-blocks"
                                )}
                                color={fieldsValidationColor}
                                onChange={(fieldsValidationColor) =>
                                    handleBlockDefault({
                                        fieldsValidationColor,
                                    })
                                }
                            />
                            <ColorControl
                                label={__(
                                    "Fields Border Color",
                                    "essential-blocks"
                                )}
                                color={fieldsValidationBorderColor}
                                onChange={(
                                    fieldsValidationBorderColor
                                ) =>
                                    handleBlockDefault({
                                        fieldsValidationBorderColor,
                                    })
                                }
                            />
                            <BaseControl
                                label={__(
                                    "Alignment",
                                    "essential-blocks"
                                )}
                                __nextHasNoMarginBottom
                            >
                                <ButtonGroup id="eb-button-group-alignment">
                                    {CONTENTS_ALIGNMENTS.map(
                                        (item, index) => (
                                            <Button
                                                key={index}
                                                isPrimary={
                                                    validationAlign ===
                                                    item.value
                                                }
                                                isSecondary={
                                                    validationAlign !==
                                                    item.value
                                                }
                                                onClick={() =>
                                                    handleBlockDefault({
                                                        validationAlign:
                                                            item.value,
                                                    })
                                                }
                                            >
                                                {item.label}
                                            </Button>
                                        )
                                    )}
                                </ButtonGroup>
                            </BaseControl>
                        </PanelBody>
                        <PanelBody
                            title={__(
                                "Message",
                                "essential-blocks"
                            )}
                            initialOpen={false}
                        >
                            <BaseControl
                                label={__(
                                    "Alignment",
                                    "essential-blocks"
                                )}
                                __nextHasNoMarginBottom
                            >
                                <ButtonGroup id="eb-button-group-alignment">
                                    {CONTENTS_ALIGNMENTS.map(
                                        (item, index) => (
                                            <Button
                                                key={index}
                                                isPrimary={
                                                    messageAlign ===
                                                    item.value
                                                }
                                                isSecondary={
                                                    messageAlign !==
                                                    item.value
                                                }
                                                onClick={() =>
                                                    handleBlockDefault({
                                                        messageAlign:
                                                            item.value,
                                                    })
                                                }
                                            >
                                                {item.label}
                                            </Button>
                                        )
                                    )}
                                </ButtonGroup>
                            </BaseControl>
                            <ButtonGroup className="eb-inspector-btn-group">
                                {MESSAGE_TYPE.map((item, index) => (
                                    <Button
                                        key={index}
                                        isPrimary={
                                            messageType ===
                                            item.value
                                        }
                                        isSecondary={
                                            messageType !==
                                            item.value
                                        }
                                        onClick={() =>
                                            handleBlockDefault({
                                                messageType:
                                                    item.value,
                                            })
                                        }
                                    >
                                        {item.label}
                                    </Button>
                                ))}
                            </ButtonGroup>
                            {messageType == "success" && (
                                <>
                                    <TypographyDropdown
                                        baseLabel={__(
                                            "Typography",
                                            "essential-blocks"
                                        )}
                                        typographyPrefixConstant={
                                            SUCCESS_TYPO
                                        }
                                    />

                                    <ColorControl
                                        label={__(
                                            "Color",
                                            "essential-blocks"
                                        )}
                                        color={successColor}
                                        onChange={(successColor) =>
                                            handleBlockDefault({
                                                successColor,
                                            })
                                        }
                                    />
                                    <ColorControl
                                        label={__(
                                            "Background",
                                            "essential-blocks"
                                        )}
                                        color={successBgColor}
                                        onChange={(
                                            successBgColor
                                        ) =>
                                            handleBlockDefault({
                                                successBgColor,
                                            })
                                        }
                                    />
                                    <ResponsiveDimensionsControl
                                        controlName={
                                            SUCCESS_PADDING
                                        }
                                        baseLabel={__(
                                            "Padding",
                                            "essential-blocks"
                                        )}
                                    />

                                    <PanelBody
                                        title={__(
                                            "Border",
                                            "essential-blocks"
                                        )}
                                        initialOpen={false}
                                    >
                                        <BorderShadowControl
                                            controlName={
                                                SUCCESS_BORDER
                                            }
                                        />
                                    </PanelBody>
                                </>
                            )}

                            {messageType == "error" && (
                                <>
                                    <TypographyDropdown
                                        baseLabel={__(
                                            "Typography",
                                            "essential-blocks"
                                        )}
                                        typographyPrefixConstant={
                                            ERROR_TYPO
                                        }
                                    />

                                    <ColorControl
                                        label={__(
                                            "Color",
                                            "essential-blocks"
                                        )}
                                        color={errorColor}
                                        onChange={(errorColor) =>
                                            handleBlockDefault({
                                                errorColor,
                                            })
                                        }
                                    />
                                    <ColorControl
                                        label={__(
                                            "Background",
                                            "essential-blocks"
                                        )}
                                        color={errorBgColor}
                                        onChange={(errorBgColor) =>
                                            handleBlockDefault({
                                                errorBgColor,
                                            })
                                        }
                                    />

                                    <ResponsiveDimensionsControl
                                        controlName={ERROR_PADDING}
                                        baseLabel={__(
                                            "Padding",
                                            "essential-blocks"
                                        )}
                                    />

                                    <PanelBody
                                        title={__(
                                            "Border",
                                            "essential-blocks"
                                        )}
                                        initialOpen={false}
                                    >
                                        <BorderShadowControl
                                            controlName={
                                                ERROR_BORDER
                                            }
                                        />
                                    </PanelBody>
                                </>
                            )}
                        </PanelBody>
                    </>
                    {/* Advance */}
                    <PanelBody
                        title={__(
                            "Wrapper Margin & Padding",
                            "essential-blocks"
                        )}
                        initialOpen={false}
                    >
                        <ResponsiveDimensionsControl
                            controlName={WRAPPER_MARGIN}
                            baseLabel="Margin"
                        />
                        <ResponsiveDimensionsControl
                            controlName={WRAPPER_PADDING}
                            baseLabel="Padding"
                        />
                    </PanelBody>
                    <PanelBody
                        title={__("Wrapper Background ", "essential-blocks")}
                        initialOpen={false}
                    >
                        <BackgroundControl
                            controlName={WRAPPER_BG}
                        />
                    </PanelBody>
                    <PanelBody
                        title={__("Wrapper Border & Shadow")}
                        initialOpen={false}
                    >
                        <BorderShadowControl
                            controlName={WRAPPER_BORDER_SHADOW}
                        />
                    </PanelBody>
                </div>
            )}
        </>
    );
}

export default withBlockContext(objAttributes)(Form);
