/**
 * WordPress dependencies
 */
import { __ } from "@wordpress/i18n";
import { useEffect } from "@wordpress/element";
import {
    PanelBody,
    SelectControl,
    ToggleControl,
    RangeControl,
    BaseControl,
    TextControl,
    __experimentalToggleGroupControl as ToggleGroupControl,
    __experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from "@wordpress/components";

/**
 * Internal dependencies
 */

import {
    ResponsiveRangeController,
    ColorControl,
    BorderShadowControl,
    SortControl,
    ResetControl,
    EBIconPicker,
    InspectorPanel,
    EBTextControl
} from "@essential-blocks/controls";

import objAttributes from "./attributes";

import {
    rangeIconSize,
    rangeIconPadding,
    rangeIconDistance,
    rangeIconRowGap,
    sclDeviderPosRight,
} from "./constants/rangeNames";

import {
    tmbWrapMarginConst,
    tmbWrapPaddingConst,
} from "./constants/dimensionsConstants";

import { WrpBgConst } from "./constants/backgroundsConstants";

import {
    WrpBdShadowConst,
    prefixSocialBdShadow,
} from "./constants/borderShadowConstants";

import { IconsHzAligns, HOVER_EFFECT, ICON_SHAPE } from "./constants";

function Inspector({ attributes, setAttributes }) {
    const {
        resOption,
        socialDetails,
        iconsJustify,
        isIconsDevider,
        icnsDevideColor,
        icnSepW,
        icnSepH,
        hvIcnColor,
        hvIcnBgc,
        icnEffect,
        iconShape,
        textShadowColor,
        textHOffset,
        textVOffset,
        blurRadius,
        showLinkNewTab
    } = attributes;

    //
    useEffect(() => {
        const newSclDtails = socialDetails.map((item) => ({
            ...item,
            isExpanded: false,
        }));
        setAttributes({ socialDetails: newSclDtails });
    }, []);

    const onShapeChange = (value) => {
        switch (value) {
            case "rounded":
                setAttributes({
                    iconShape: value,
                    sclBdSd_Rds_Bottom: "10",
                    sclBdSd_Rds_Left: "10",
                    sclBdSd_Rds_Right: "10",
                    sclBdSd_Rds_Top: "10",
                    sclBdSd_Rds_Unit: "px",
                    sclBdSd_Rds_isLinked: true,
                });
                break;

            case "circular":
                setAttributes({
                    iconShape: value,
                    sclBdSd_Rds_Bottom: "50",
                    sclBdSd_Rds_Left: "50",
                    sclBdSd_Rds_Right: "50",
                    sclBdSd_Rds_Top: "50",
                    sclBdSd_Rds_Unit: "%",
                    sclBdSd_Rds_isLinked: true,
                });
                break;

            case "square":
                setAttributes({
                    iconShape: value,
                    sclBdSd_Rds_Bottom: undefined,
                    sclBdSd_Rds_Left: undefined,
                    sclBdSd_Rds_Right: undefined,
                    sclBdSd_Rds_Top: undefined,
                    sclBdSd_Rds_Unit: "px",
                    sclBdSd_Rds_isLinked: true,
                });
                break;

            default:
                break;
        }
    };

    const ucFirst = (string) =>
        string
            .split("_")
            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
            .join(" ");

    const onSocialProfileAdd = () => {
        const socialDetails = [
            ...attributes.socialDetails,
            {
                title: "Behance",
                icon: "fab fa-behance",
                color: "",
                bgColor: "",
                link: "",
                linkOpenNewTab: false,
                isExpanded: false,
            },
        ];

        setAttributes({ socialDetails });
    };

    const getSocialDetailsComponents = () => {
        const onProfileChange = (key, value, position) => {
            const newSocialDetail = { ...attributes.socialDetails[position] };
            const newSocialDetails = [...attributes.socialDetails];
            newSocialDetails[position] = newSocialDetail;

            if (Array.isArray(key)) {
                key.map((item, index) => {
                    newSocialDetails[position][item] = value[index];
                });
            } else {
                newSocialDetails[position][key] = value;
            }

            setAttributes({ socialDetails: newSocialDetails });
        };

        return attributes.socialDetails.map((each, i) => (
            <div key={i}>
                <EBIconPicker
                    title={__("Social Media", "essential-blocks")}
                    value={each.icon || null}
                    onChange={(value) => onProfileChange('icon', value, i)}
                />
                <EBTextControl
                    label={__("Title", "essential-blocks")}
                    value={each.title}
                    onChange={(value) => onProfileChange('title', value, i)}
                    enableAi={true}
                />
                <ColorControl
                    label={__("Icon Color", "essential-blocks")}
                    color={each.color}
                    onChange={(value) => onProfileChange('color', value, i)}
                />
                <ColorControl
                    label={__("Icon Background", "essential-blocks")}
                    color={each.bgColor}
                    onChange={(value) => onProfileChange('bgColor', value, i)}
                />
                <EBTextControl
                    label={__("URL", "essential-blocks")}
                    fieldType="url"
                    value={each.link}
                    onChange={(value) => onProfileChange('link', value, i)}
                    placeholder="https://example.com"
                    help={__(
                        "Enter a valid URL.",
                        "essential-blocks"
                    )}
                    showValidation={true}
                    enableSecurity={true}
                />
                {showLinkNewTab && (
                    <ToggleControl
                        label={__("Open in New Tab", "essential-blocks")}
                        checked={each.linkOpenNewTab}
                        onChange={(value) => onProfileChange('linkOpenNewTab', value, i)}
                        __nextHasNoMarginBottom
                    />
                )}
            </div>
        ))
    }

    return (
        <InspectorPanel advancedControlProps={{
            marginPrefix: tmbWrapMarginConst,
            paddingPrefix: tmbWrapPaddingConst,
            backgroundPrefix: WrpBgConst,
            borderPrefix: WrpBdShadowConst,
            hasMargin: true
        }}>

            <InspectorPanel.General>
                <InspectorPanel.PanelBody
                    title={__("Social Profiles", "essential-blocks")}
                    initialOpen={true}
                >
                    <>
                        <ToggleControl
                            label={__("Show link in new tab", "essential-blocks")}
                            checked={showLinkNewTab}
                            onChange={() =>
                                setAttributes({
                                    showLinkNewTab: !showLinkNewTab,
                                    socialDetails: [...socialDetails]
                                })
                            }
                            __nextHasNoMarginBottom
                        />
                        <SortControl
                            items={socialDetails.map((each, i) => ({ ...each, label: ucFirst((each.icon || " ").replace(/^fa[bsr] fa-|^dashicons-/i, "")) }))}
                            labelKey={'label'}
                            onSortEnd={socialDetails => setAttributes({ socialDetails })}
                            onDeleteItem={index => {
                                setAttributes({ socialDetails: attributes.socialDetails.filter((each, i) => i !== index) })
                            }}
                            hasSettings={true}
                            settingsComponents={getSocialDetailsComponents()}
                            hasAddButton={true}
                            onAddItem={onSocialProfileAdd}
                            addButtonText={__(
                                "Add Social Profile",
                                "essential-blocks"
                            )}
                        />
                    </>
                </InspectorPanel.PanelBody>
            </InspectorPanel.General>
            <InspectorPanel.Style>
                <>
                    <InspectorPanel.PanelBody
                        title={__("Icons Styles", "essential-blocks")}
                        initialOpen={true}
                    >
                        <ToggleGroupControl
                            label={__("Icon Shape", "essential-blocks")}

                            value={iconShape}
                            onChange={(value) => onShapeChange(value)}
                            isBlock
                            __next40pxDefaultSize
                            __nextHasNoMarginBottom
                        >
                            {ICON_SHAPE.map((item, index) => (
                                <ToggleGroupControlOption
                                    key={index}
                                    value={item.value}
                                    label={item.label}
                                />
                            ))}
                        </ToggleGroupControl>

                        <BaseControl
                            id="eb-team-icons-alignments"
                            label="Social Icons Horizontal Alignments"
                            __nextHasNoMarginBottom
                        >
                            <SelectControl
                                // label={__("Icons Horizontal Alignment", "essential-blocks")}
                                value={iconsJustify}
                                options={IconsHzAligns}
                                onChange={(iconsJustify) =>
                                    setAttributes({ iconsJustify })
                                }
                                __next40pxDefaultSize
                                __nextHasNoMarginBottom
                            />
                        </BaseControl>

                        <ResponsiveRangeController
                            noUnits
                            baseLabel={__("Size", "essential-blocks")}
                            controlName={rangeIconSize}
                            min={5}
                            max={300}
                            step={1}
                        />

                        <ResponsiveRangeController
                            noUnits
                            baseLabel={__("Padding", "essential-blocks")}
                            controlName={rangeIconPadding}
                            min={0}
                            max={6}
                            step={0.1}
                        />

                        <ResponsiveRangeController
                            noUnits
                            baseLabel={__("Spacing", "essential-blocks")}
                            controlName={rangeIconDistance}
                            min={0}
                            max={100}
                            step={1}
                        />

                        <ResponsiveRangeController
                            noUnits
                            baseLabel={__("Rows Gap", "essential-blocks")}
                            controlName={rangeIconRowGap}
                            min={0}
                            max={100}
                            step={1}
                        />

                        <label
                            style={{
                                display: "block",
                                margin: "-20px 0 20px",
                            }}
                        >
                            <i>
                                N.B. 'Rows Gap' is used when you have multiple rows of
                                social profiles. Normally in case of only one row, it's
                                not needed
                            </i>
                        </label>

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

                        {isIconsDevider && (
                            <>
                                <ColorControl
                                    label={__("Color", "essential-blocks")}
                                    color={icnsDevideColor}
                                    attributeName={'icnsDevideColor'}
                                />

                                <RangeControl
                                    label={__("Width", "essential-blocks")}
                                    value={icnSepW}
                                    onChange={(icnSepW) => setAttributes({ icnSepW })}
                                    step={1}
                                    min={1}
                                    max={50}
                                    __nextHasNoMarginBottom
                                    __next40pxDefaultSize
                                />

                                <RangeControl
                                    label={__("Height", "essential-blocks")}
                                    value={icnSepH}
                                    onChange={(icnSepH) => setAttributes({ icnSepH })}
                                    step={1}
                                    min={1}
                                    max={300}
                                    __nextHasNoMarginBottom
                                    __next40pxDefaultSize
                                />

                                <ResponsiveRangeController
                                    baseLabel={__(
                                        "Position From Right",
                                        "essential-blocks"
                                    )}
                                    controlName={sclDeviderPosRight}
                                    min={0}
                                    max={80}
                                    step={1}
                                />
                            </>
                        )}

                        <ColorControl
                            label={__("Hover Color", "essential-blocks")}
                            color={hvIcnColor}
                            attributeName={'hvIcnColor'}
                        />

                        <ColorControl
                            label={__("Hover Background", "essential-blocks")}
                            color={hvIcnBgc}
                            attributeName={'hvIcnBgc'}
                        />

                        <SelectControl
                            label={__("Icon Hover Effect", "essential-blocks")}
                            value={icnEffect}
                            options={HOVER_EFFECT}
                            // onChange={(preset) => setAttributes({ preset })}
                            onChange={(icnEffect) => {
                                setAttributes({ icnEffect });
                            }}
                            __next40pxDefaultSize
                            __nextHasNoMarginBottom
                        />
                    </InspectorPanel.PanelBody>

                    <InspectorPanel.PanelBody
                        title={__("Icons Border & Box-Shadow")}
                        initialOpen={false}
                    >
                        <BorderShadowControl
                            controlName={prefixSocialBdShadow}
                        // noShadow
                        // noBorder
                        />
                    </InspectorPanel.PanelBody>
                    <InspectorPanel.PanelBody
                        title={__("Icons Shadow", "essential-blocks")}
                        initialOpen={false}
                    >
                        <ColorControl
                            label={__("Shadow Color", "essential-blocks")}
                            color={textShadowColor}
                            attributeName={'textShadowColor'}
                        />

                        <ResetControl
                            onReset={() => setAttributes({ textHOffset: undefined })}
                        >
                            <RangeControl
                                label={__("Horizontal Offset", "essential-blocks")}
                                value={textHOffset}
                                onChange={(newValue) =>
                                    setAttributes({ textHOffset: newValue })
                                }
                                min={0}
                                max={100}
                                __nextHasNoMarginBottom
                                __next40pxDefaultSize
                            />
                        </ResetControl>

                        <ResetControl
                            onReset={() => setAttributes({ textVOffset: undefined })}
                        >
                            <RangeControl
                                label={__("Vertical Offset", "essential-blocks")}
                                value={textVOffset}
                                onChange={(newValue) =>
                                    setAttributes({ textVOffset: newValue })
                                }
                                min={0}
                                max={100}
                                __nextHasNoMarginBottom
                                __next40pxDefaultSize
                            />
                        </ResetControl>

                        <ResetControl
                            onReset={() => setAttributes({ blurRadius: undefined })}
                        >
                            <RangeControl
                                label={__("Blur Radius", "essential-blocks")}
                                value={blurRadius}
                                onChange={(newValue) =>
                                    setAttributes({ blurRadius: newValue })
                                }
                                min={0}
                                max={100}
                                __nextHasNoMarginBottom
                                __next40pxDefaultSize
                            />
                        </ResetControl>
                    </InspectorPanel.PanelBody>
                </>
            </InspectorPanel.Style>
        </InspectorPanel>

    );
}
export default Inspector;
