/**
 * WordPress dependencies
 */
import { __ } from "@wordpress/i18n";
import { useEffect } from "@wordpress/element";
import { useBlockProps } from "@wordpress/block-editor";
import { select } from "@wordpress/data";

/**
 * Internal dependencies
 */

import SocialLinks from "./components/social-links";

const {
    //
    softMinifyCssStrings,
    generateBackgroundControlStyles,
    generateDimensionsControlStyles,
    generateBorderShadowStyles,
    generateResponsiveRangeStyles,
    duplicateBlockIdFix,
    generateTypographyStyles,
} = window.EBControls;

import classnames from "classnames";
import Inspector from "./inspector";

import {
    rangeIconSize,
    rangeIconDistance,
    rangeIconRowGap,
    sclDeviderPosRight,
    rangeIconMargin,
    rangeIconHeight,
    rangeIconWidth,
    rangeFloatingWidth,
    rangeFloatingHeight,
} from "./constants/rangeNames";

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

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

import { TITLE_TYPOGRAPHY } from "./constants/typographyPrefixConstants";

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

export default function Edit({
    attributes,
    setAttributes,
    isSelected,
    clientId,
    className,
}) {
    const {
        resOption,
        blockId,
        blockMeta,
        socialDetails,
        profilesOnly = [],
        iconsJustify,
        iconsVAlign,
        isIconsDevider,
        icnsDevideColor = "#cacaca",
        icnSepW = 1,
        icnSepH = 30,
        hvIcnColor,
        hvIcnBgc,
        icnEffect,
        textShadowColor,
        textHOffset,
        textVOffset,
        blurRadius,
        classHook,
        showTitle,
        iconShape,
        isFloating,
    } = attributes;

    //
    useEffect(() => {
        const newProfiles = socialDetails.map((profile) => ({
            ...profile,
            isExpanded: false,
        }));

        setAttributes({ socialDetails: newProfiles });

        if (socialDetails.length > 0) return;

        const newSclDtails = [
            {
                icon: "fab fa-facebook-f",
                iconText: __("Facebook", "essential-blocks"),
                isExpanded: false,
            },
            {
                icon: "fab fa-twitter",
                iconText: __("Twitter", "essential-blocks"),
                isExpanded: false,
            },
            {
                icon: "fab fa-linkedin-in",
                iconText: __("Linkedin", "essential-blocks"),
                isExpanded: false,
            },
            {
                icon: "fab fa-whatsapp",
                iconText: __("WhatsApp", "essential-blocks"),
                isExpanded: false,
            },
        ];

        setAttributes({ socialDetails: newSclDtails });
    }, []);

    //
    useEffect(() => {
        const profilesOnly = socialDetails.map(({ icon, link, iconText }) => ({
            icon,
            link,
            iconText,
        }));

        setAttributes({ profilesOnly });
    }, [socialDetails]);

    // this useEffect is for creating a unique blockId for each block's unique className
    useEffect(() => {
        const BLOCK_PREFIX = "eb-social-share";
        duplicateBlockIdFix({
            BLOCK_PREFIX,
            blockId,
            setAttributes,
            select,
            clientId,
        });
    }, []);

    const blockProps = useBlockProps({
        className: classnames(className, `eb-guten-block-main-parent-wrapper`),
    });

    //
    // styling codes start from here
    //

    const {
        rangeStylesDesktop: iconSizeDesktop,
        rangeStylesTab: iconSizeTab,
        rangeStylesMobile: iconSizeMobile,
    } = generateResponsiveRangeStyles({
        controlName: rangeIconSize,
        customUnit: "px",
        property: null,
        attributes,
    });

    const {
        rangeStylesDesktop: iconMarginDesktop,
        rangeStylesTab: iconMarginTab,
        rangeStylesMobile: iconMarginMobile,
    } = generateResponsiveRangeStyles({
        controlName: rangeIconMargin,
        customUnit: "px",
        property: null,
        attributes,
    });

    const {
        rangeStylesDesktop: iconHeightDesktop,
        rangeStylesTab: iconHeightTab,
        rangeStylesMobile: iconHeightMobile,
    } = generateResponsiveRangeStyles({
        controlName: rangeIconHeight,
        customUnit: "px",
        property: null,
        attributes,
    });

    const {
        rangeStylesDesktop: iconWidthDesktop,
        rangeStylesTab: iconWidthTab,
        rangeStylesMobile: iconWidthMobile,
    } = generateResponsiveRangeStyles({
        controlName: rangeIconWidth,
        customUnit: "px",
        property: null,
        attributes,
    });

    const {
        rangeStylesDesktop: floatingWidthDesktop,
        rangeStylesTab: floatingWidthTab,
        rangeStylesMobile: floatingWidthMobile,
    } = generateResponsiveRangeStyles({
        controlName: rangeFloatingWidth,
        customUnit: "px",
        property: null,
        attributes,
    });

    const {
        rangeStylesDesktop: floatingHeightDesktop,
        rangeStylesTab: floatingHeightTab,
        rangeStylesMobile: floatingHeightMobile,
    } = generateResponsiveRangeStyles({
        controlName: rangeFloatingHeight,
        customUnit: "px",
        property: null,
        attributes,
    });

    const {
        rangeStylesDesktop: iconSpaceDesktop,
        rangeStylesTab: iconSpaceTab,
        rangeStylesMobile: iconSpaceMobile,
    } = generateResponsiveRangeStyles({
        controlName: rangeIconDistance,
        customUnit: "px",
        property: "column-gap",
        attributes,
    });

    const {
        rangeStylesDesktop: iconRowGapDesktop,
        rangeStylesTab: iconRowGapTab,
        rangeStylesMobile: iconRowGapMobile,
    } = generateResponsiveRangeStyles({
        controlName: rangeIconRowGap,
        customUnit: "px",
        property: "row-gap",
        attributes,
    });

    const {
        rangeStylesDesktop: sSepPosRightDesktop,
        rangeStylesTab: sSepPosRightTab,
        rangeStylesMobile: sSepPosRightMobile,
    } = generateResponsiveRangeStyles({
        controlName: sclDeviderPosRight,
        property: "margin-right",
        attributes,
    });

    // styles related to generateResponsiveRangeStyles end

    // styles related to generateBackgroundControlStyles start ⬇

    const {
        backgroundStylesDesktop: wrpBackgroundStylesDesktop,
        hoverBackgroundStylesDesktop: wrpHoverBackgroundStylesDesktop,
        backgroundStylesTab: wrpBackgroundStylesTab,
        hoverBackgroundStylesTab: wrpHoverBackgroundStylesTab,
        backgroundStylesMobile: wrpBackgroundStylesMobile,
        hoverBackgroundStylesMobile: wrpHoverBackgroundStylesMobile,
        overlayStylesDesktop: wrpOverlayStylesDesktop,
        hoverOverlayStylesDesktop: wrpHoverOverlayStylesDesktop,
        overlayStylesTab: wrpOverlayStylesTab,
        hoverOverlayStylesTab: wrpHoverOverlayStylesTab,
        overlayStylesMobile: wrpOverlayStylesMobile,
        hoverOverlayStylesMobile: wrpHoverOverlayStylesMobile,
        bgTransitionStyle: wrpBgTransitionStyle,
        ovlTransitionStyle: wrpOvlTransitionStyle,
    } = generateBackgroundControlStyles({
        attributes,
        controlName: WrpBgConst,
    });

    // styles related to generateBackgroundControlStyles end

    // styles related to generateDimensionsControlStyles start ⬇
    // icon padding
    const {
        dimensionStylesDesktop: iconPaddingDesktop,
        dimensionStylesTab: iconPaddingTab,
        dimensionStylesMobile: iconPaddingMobile,
    } = generateDimensionsControlStyles({
        attributes,
        controlName: iconsPadding,
        styleFor: "padding",
    });

    const {
        dimensionStylesDesktop: wrpMarginDesktop,
        dimensionStylesTab: wrpMarginTab,
        dimensionStylesMobile: wrpMarginMobile,
    } = generateDimensionsControlStyles({
        attributes,
        controlName: tmbWrapMarginConst,
        styleFor: "margin",
    });

    const {
        dimensionStylesDesktop: wrpPaddingDesktop,
        dimensionStylesTab: wrpPaddingTab,
        dimensionStylesMobile: wrpPaddingMobile,
    } = generateDimensionsControlStyles({
        attributes,
        controlName: tmbWrapPaddingConst,
        styleFor: "padding",
    });

    // styles related to generateDimensionsControlStyles end

    // styles related to generateBorderShadowStyles start ⬇
    const {
        styesDesktop: wrpBdShdStyesDesktop,
        styesTab: wrpBdShdStyesTab,
        styesMobile: wrpBdShdStyesMobile,
        stylesHoverDesktop: wrpBdShdStylesHoverDesktop,
        stylesHoverTab: wrpBdShdStylesHoverTab,
        stylesHoverMobile: wrpBdShdStylesHoverMobile,
        transitionStyle: wrpBdShdTransitionStyle,
    } = generateBorderShadowStyles({
        controlName: WrpBdShadowConst,
        attributes,
        // noShadow: true,
        // noBorder: true,
    });

    const {
        styesDesktop: socialBdrShdwDesktop,
        styesTab: socialBdrShdwTab,
        styesMobile: socialBdrShdwMobile,
        stylesHoverDesktop: socialBdrShdwsHoverDesktop,
        stylesHoverTab: socialBdrShdwsHoverTab,
        stylesHoverMobile: socialBdrShdwsHoverMobile,
        transitionStyle: socialBdrShdwTransitionStyle,
    } = generateBorderShadowStyles({
        controlName: prefixSocialBdShadow,
        attributes,
        // noShadow: true,
        // noBorder: true,
    });

    const {
        typoStylesDesktop: titleTypographyDesktop,
        typoStylesTab: titleTypographyTab,
        typoStylesMobile: titleTypographyMobile,
    } = generateTypographyStyles({
        attributes,
        prefixConstant: TITLE_TYPOGRAPHY,
    });

    // styles related to generateBorderShadowStyles end

    const socialStyles = socialDetails.reduce(
        (acc, { backgroundColor, color, separatorColor }, i) => `
		${acc}

		${
            separatorColor
                ? `
				.${blockId}.eb-social-share-wrapper ul.eb-social-shares li:nth-child(${
                      i + 1
                  }) a .social-icon-v-line {
					background-color: ${separatorColor};
				}
				`
                : ""
        }

		${
            backgroundColor || color
                ? `
				.${blockId}.eb-social-share-wrapper ul.eb-social-shares li:nth-child(${
                      i + 1
                  }) a {
					${backgroundColor ? `background: ${backgroundColor};` : ""}
					${color ? `color: ${color};` : ""}
				}
				`
                : ""
        }
		`,
        ""
    );

    const wrapperStylesDesktop = `
	div.eb-social-share-wrapper ul {
		margin: 0;
		padding:0;
	}

	${
        isFloating
            ? `
	.eb-parent-wrapper.eb-parent-eb-social-share-qier2p8.eb_animation.eb__animated {
		animation-name: none !important;
		-webkit-animation-name: none !important;
	}
	`
            : ""
    }

	.${blockId}.eb-social-share-wrapper {
		position:relative;
		${!isFloating ? wrpBackgroundStylesDesktop : ""}
		${!isFloating ? wrpMarginDesktop : ""}
		${!isFloating ? wrpPaddingDesktop : ""}
		${!isFloating ? wrpBdShdStyesDesktop : ""}
		transition: ${wrpBgTransitionStyle}, ${wrpBdShdTransitionStyle};
	}

	.${blockId}.eb-social-share-wrapper:hover{

		${wrpHoverBackgroundStylesDesktop}
		${!isFloating ? wrpBdShdStylesHoverDesktop : ""}
	}

	.${blockId}.eb-social-share-wrapper:before{
		${wrpOverlayStylesDesktop}
		transition: ${wrpOvlTransitionStyle};

	}

	.${blockId}.eb-social-share-wrapper:hover:before{
		${wrpHoverOverlayStylesDesktop}

	}


	.${blockId}.eb-social-share-wrapper ul.eb-social-shares {
		list-style: none;
		flex-wrap: wrap;
		align-items: ${iconsVAlign || "center"};
		justify-content: ${iconsJustify};
		${iconSpaceDesktop}
		${iconRowGapDesktop}
		display: flex;
	}


	${socialStyles}


	${
        isIconsDevider
            ? `
		.${blockId}.eb-social-share-wrapper ul.eb-social-shares li{
			position:relative;
		}

		.${blockId}.eb-social-share-wrapper ul.eb-social-shares li + li:before {
			content: "";
			background-color: ${icnsDevideColor};
			height: ${icnSepH}px;
			width: ${icnSepW}px;
			position: absolute;
			top: 2px;
			right: 100%;
			${sSepPosRightDesktop}
		}

		`
            : ""
    }



	.${blockId}.eb-social-share-wrapper ul.eb-social-shares li a {
		box-sizing:border-box;
		text-decoration: none;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: ${iconMarginDesktop} 0;
		${
            textHOffset || textVOffset || blurRadius || textShadowColor
                ? `text-shadow: ${textHOffset || 0}px ${textVOffset || 0}px ${
                      blurRadius || 0
                  }px ${textShadowColor || "rgba(0,0,0,.5)"};`
                : ""
        }
		${iconShape !== "circular" ? iconPaddingDesktop : ""}
		${socialBdrShdwDesktop}
		transition: color 0.5s, background-color 0.5s, ${socialBdrShdwTransitionStyle};
		${
            iconShape === "circular" && iconHeightDesktop
                ? `height: ${iconHeightDesktop};`
                : ""
        }
		${
            iconShape === "circular" && iconWidthDesktop
                ? `width: ${iconWidthDesktop};`
                : ""
        }
		${showTitle ? titleTypographyDesktop : `font-size: ${iconSizeDesktop};`}
	}

	.${blockId}.eb-social-share-wrapper.eb-social-share-floating ul.eb-social-shares {
		display: inline-block;
		position: fixed;
		left: 0;
		top: 35%;
		transform: translate(0, -50px);
		overflow: auto;
		-ms-overflow-style: none;  /* IE and Edge */
  		scrollbar-width: none;  /* Firefox */
		max-height: ${
            typeof floatingHeightDesktop === "string" &&
            floatingHeightDesktop.length !== 0
                ? floatingHeightDesktop
                : "200px"
        };
		${isFloating ? wrpBackgroundStylesDesktop : ""}
		${isFloating ? wrpBdShdStyesDesktop : ""}
	}

	ul.eb-social-shares::-webkit-scrollbar {
		display: none;
	}

	.${blockId}.eb-social-share-wrapper.eb-social-share-floating ul.eb-social-shares .eb-social-share-text {
		width: 0;
		overflow: hidden;
		white-space: nowrap;
		transition: all 0.4s;
	}

	.${blockId}.eb-social-share-wrapper.eb-social-share-floating ul.eb-social-shares li a .eb-social-share-icon {
		width: ${iconSizeDesktop};
		text-align: center;
	}

    ${
        !showTitle
            ? `.${blockId}.eb-social-share-wrapper ul.eb-social-shares li a .eb-social-share-icon {
		width: ${iconSizeDesktop};
        height: ${iconSizeDesktop};
		text-align: center;
	}`
            : ""
    }

	.${blockId}.eb-social-share-wrapper.eb-social-share-floating ul.eb-social-shares li a {
		display: inline-flex;
	}

	.${blockId}.eb-social-share-wrapper.eb-social-share-floating ul.eb-social-shares li a.eb-slide-out .eb-social-share-text {
		width: ${
            typeof floatingWidthDesktop === "string" &&
            floatingWidthDesktop.length !== 0
                ? floatingWidthDesktop
                : "100px"
        };
	}

	.${blockId}.eb-social-share-wrapper ul.eb-social-shares li:hover a {
		background:${hvIcnBgc};
		color:${hvIcnColor};
		${socialBdrShdwsHoverDesktop}
	}

	.${blockId}.eb-social-share-wrapper ul.eb-social-shares li span.eb-social-share-text:before {
		content: "";
		width: 1px;
		height: 20px;
		background-color: #fff;
		opacity: .5;
		display: inline-block;
		vertical-align: middle;
		margin: 0 10px;
	}

	.${blockId}.eb-social-share-wrapper.eb-social-share-floating.eb-social-share-circular ul.eb-social-shares li a.eb-slide-out {
		height: unset;
		width: unset;
		border-radius: ${iconHeightDesktop}
	}

	.${blockId}.eb-social-share-wrapper.eb-social-share-floating.eb-social-share-circular ul.eb-social-shares li a.eb-slide-out i {
		height: ${iconHeightDesktop};
		width: ${iconWidthDesktop};
		display: flex;
		align-items: center;
		justify-content: center;
	}
`;

    const wrapperStylesTab = `

	.${blockId}.eb-social-share-wrapper {
		${wrpBackgroundStylesTab}
		${wrpMarginTab}
		${wrpPaddingTab}
		${wrpBdShdStyesTab}
	}

	.${blockId}.eb-social-share-wrapper:hover{
		${wrpHoverBackgroundStylesTab}
		${wrpBdShdStylesHoverTab}

	}

	.${blockId}.eb-social-share-wrapper:before{
		${wrpOverlayStylesTab}

	}

	.${blockId}.eb-social-share-wrapper:hover:before{
		${wrpHoverOverlayStylesTab}

	}

	.${blockId}.eb-social-share-wrapper ul.eb-social-shares {
		${iconSpaceTab}
		${iconRowGapTab}
	}

	${
        isIconsDevider
            ? `
			.${blockId}.eb-social-share-wrapper ul.eb-social-shares li + li:before {
				${sSepPosRightTab}
			}
			`
            : ""
    }

	.${blockId}.eb-social-share-wrapper.eb-social-share-floating ul.eb-social-shares {
		max-height: ${
            typeof floatingHeightTab === "string" &&
            floatingHeightTab.length !== 0
                ? floatingHeightTab
                : "200px"
        };
		${isFloating ? wrpBackgroundStylesTab : ""}
		${isFloating ? wrpBdShdStyesTab : ""}
	}

	.${blockId}.eb-social-share-wrapper.eb-social-share-floating ul.eb-social-shares li a.eb-slide-out .eb-social-share-text {
		width: ${
            typeof floatingWidthTab === "string" &&
            floatingWidthTab.length !== 0
                ? floatingWidthTab
                : "100px"
        };
	}

	.${blockId}.eb-social-share-wrapper ul.eb-social-shares li a {
		${showTitle ? titleTypographyTab : `font-size: ${iconSizeTab};`}
		${iconShape !== "circular" ? iconPaddingTab : ""}
		${socialBdrShdwTab}
		margin: ${iconMarginTab} 0;
		${iconShape === "circular" && iconHeightTab ? `height: ${iconHeightTab};` : ""}
		${iconShape === "circular" && iconWidthTab ? `width: ${iconWidthTab};` : ""}
	}

	.${blockId}.eb-social-share-wrapper ul.eb-social-shares li:hover a {
		${socialBdrShdwsHoverTab}
	}

    ${
        !showTitle
            ? `.${blockId}.eb-social-share-wrapper ul.eb-social-shares li a .eb-social-share-icon {
		width: ${iconSizeTab};
        height: ${iconSizeTab};
		text-align: center;
	}`
            : ""
    }

	`;

    const wrapperStylesMobile = `
	.${blockId}.eb-social-share-wrapper {
		${wrpBackgroundStylesMobile}
		${wrpMarginMobile}
		${wrpPaddingMobile}
		${wrpBdShdStyesMobile}
	}

	.${blockId}.eb-social-share-wrapper:hover{
		${wrpHoverBackgroundStylesMobile}
		${wrpBdShdStylesHoverMobile}

	}

	.${blockId}.eb-social-share-wrapper:before{
		${wrpOverlayStylesMobile}

	}

	.${blockId}.eb-social-share-wrapper:hover:before{
		${wrpHoverOverlayStylesMobile}

	}

	.${blockId}.eb-social-share-wrapper ul.eb-social-shares {
		${iconSpaceMobile}
		${iconRowGapMobile}
	}


	${
        isIconsDevider
            ? `
			.${blockId}.eb-social-share-wrapper ul.eb-social-shares li + li:before {
				${sSepPosRightMobile}
			}
			`
            : ""
    }

	.${blockId}.eb-social-share-wrapper.eb-social-share-floating ul.eb-social-shares {
		max-height: ${
            typeof floatingHeightMobile === "string" &&
            floatingHeightMobile.length !== 0
                ? floatingHeightMobile
                : "200px"
        };
		${isFloating ? wrpBackgroundStylesMobile : ""}
		${isFloating ? wrpBdShdStyesMobile : ""}
	}

	.${blockId}.eb-social-share-wrapper.eb-social-share-floating ul.eb-social-shares li a.eb-slide-out .eb-social-share-text {
		width: ${
            typeof floatingWidthMobile === "string" &&
            floatingWidthMobile.length !== 0
                ? floatingWidthMobile
                : "100px"
        };
	}

	.${blockId}.eb-social-share-wrapper ul.eb-social-shares li a {
		${showTitle ? titleTypographyMobile : `font-size: ${iconSizeMobile};`}
		${iconShape !== "circular" ? iconPaddingMobile : ""}
		${socialBdrShdwMobile}
		margin: ${iconMarginMobile} 0;
		${
            iconShape === "circular" && iconHeightMobile
                ? `height: ${iconHeightMobile};`
                : ""
        }
		${
            iconShape === "circular" && iconWidthMobile
                ? `width: ${iconWidthMobile};`
                : ""
        }
	}


	.${blockId}.eb-social-share-wrapper ul.eb-social-shares li:hover a {
		${socialBdrShdwsHoverMobile}
	}

    ${
        !showTitle
            ? `.${blockId}.eb-social-share-wrapper ul.eb-social-shares li a .eb-social-share-icon {
		width: ${iconSizeMobile};
        height: ${iconSizeMobile};
		text-align: center;
	}`
            : ""
    }

	`;

    // all css styles for large screen width (desktop/laptop) in strings ⬇
    const desktopAllStyles = softMinifyCssStrings(`
		${wrapperStylesDesktop}
	`);

    // all css styles for Tab in strings ⬇
    const tabAllStyles = softMinifyCssStrings(`
		${wrapperStylesTab}
	`);

    // all css styles for Mobile in strings ⬇
    const mobileAllStyles = softMinifyCssStrings(`
		${wrapperStylesMobile}
	`);

    //
    // styling codes End here
    //

    // Set All Style in "blockMeta" Attribute
    useEffect(() => {
        const styleObject = {
            desktop: desktopAllStyles,
            tab: tabAllStyles,
            mobile: mobileAllStyles,
        };
        if (JSON.stringify(blockMeta) != JSON.stringify(styleObject)) {
            setAttributes({ blockMeta: styleObject });
        }
    }, [attributes]);

    return (
        <>
            {isSelected && (
                <Inspector
                    attributes={attributes}
                    setAttributes={setAttributes}
                />
            )}
            <div {...blockProps}>
                <style>
                    {`
				${desktopAllStyles}

				/* mimmikcssStart */

				${resOption === "Tablet" ? tabAllStyles : " "}
				${resOption === "Mobile" ? tabAllStyles + mobileAllStyles : " "}

				/* mimmikcssEnd */

				@media all and (max-width: 1024px) {

					/* tabcssStart */
					${softMinifyCssStrings(tabAllStyles)}
					/* tabcssEnd */

				}

				@media all and (max-width: 767px) {

					/* mobcssStart */
					${softMinifyCssStrings(mobileAllStyles)}
					/* mobcssEnd */

				}
				`}
                </style>

                <div
                    className={`eb-parent-wrapper eb-parent-${blockId} ${classHook}`}
                >
                    <div
                        className={`${blockId} eb-social-share-wrapper${
                            isFloating ? " eb-social-share-floating" : ""
                        }${
                            isFloating && "circular" == iconShape
                                ? " eb-social-share-circular"
                                : ""
                        }`}
                    >
                        <SocialLinks
                            profilesOnly={profilesOnly}
                            icnEffect={icnEffect}
                            showTitle={showTitle}
                        />
                    </div>
                </div>
            </div>
        </>
    );
}