/**
 * WordPress dependencies
 */
import { __ } from "@wordpress/i18n";
import { InspectorControls } from "@wordpress/block-editor";
import {
    PanelBody,
    SelectControl,
    ToggleControl,
    Button,
    ButtonGroup,
    BaseControl,
    TabPanel,
    TextControl,
    PanelRow,
} from "@wordpress/components";

/**
 * Internal depencencies
 */

import objAttributes from "./attributes";

import {
    WRAPPER_BG,
    WRAPPER_MARGIN,
    WRAPPER_PADDING,
    WRAPPER_BORDER_SHADOW,
    IMAGE_WIDTH,
    IMAGE_HEIGHT,
    SIZE_UNIT_TYPES,
    IMAGE_BORDER_SHADOW,
    CAPTION_MARGIN,
    CAPTION_PADDING,
    CAPTION_TYPOGRAPHY,
    CAPTION_WIDTH,
    STYLES,
    TEXT_ALIGN,
    HORIZONTAL_ALIGN,
    VERTICAL_ALIGN,
    UNIT_TYPES,
    CAPTION_STYLES,
    VERTICAL_ALIGN_CAP_2,
    HOVER_EFFECT,
    FIT_STYLES,
    TEXT_ALIGNMENT,
    IMAGE_ALIGN,
    IMAGE_ALIGNMENT,
    SOURCE
} from "./constants";

const {
    ResponsiveDimensionsControl,
    TypographyDropdown,
    BorderShadowControl,
    ResponsiveRangeController,
    BackgroundControl,
    ColorControl,
    EbImageSizeSelector,
    AdvancedControls,
    DynamicInputControl,
    ResponsiveAlignControl,
} = window.EBControls;

function Inspector(props) {
    const { attributes, setAttributes } = props;
    const {
        resOption,
        displayCaption,
        captionColor,
        captionBGColor,
        horizontalAlign,
        verticalAlign,
        verticalAlignCap2,
        textAlign,
        stylePreset,
        enableLink,
        openInNewTab,
        imageLink,
        captionStyle,
        hoverEffect,
        complexStyle,
        autoFit,
        imageSize,
        fitStyles,
        autoHeight,
        imgSource
    } = attributes;

    const changImgSource = (selected) => {
        switch (selected) {
            case "site-logo":
                setAttributes({
                    imgSource: selected,
                    displayCaption: false,
                    enableLink: true,
                    widthRange: 120,
                    widthUnit: "px",
                    imgBorderShadowborderStyle: "none",
                    imgBorderShadowRds_Bottom: "0",
                    imgBorderShadowRds_Left: "0",
                    imgBorderShadowRds_Right: "0",
                    imgBorderShadowRds_Top: "0",
                    hoverEffect: 'no-effect',
                });
                break;
            case "featured-img":
                setAttributes({
                    imgSource: selected,
                    displayCaption: false,
                    enableLink: true,
                    widthRange: '',
                    imgBorderShadowborderStyle: "solid",
                    imgBorderShadowRds_Bottom: "15",
                    imgBorderShadowRds_Left: "15",
                    imgBorderShadowRds_Right: "15",
                    imgBorderShadowRds_Top: "15",
                    hoverEffect: 'no-effect',
                });
                break;
            case "custom":
                setAttributes({
                    imgSource: selected,
                    displayCaption: true,
                    enableLink: false,
                    widthRange: '',
                    imgBorderShadowborderStyle: "solid",
                    imgBorderShadowRds_Bottom: "15",
                    imgBorderShadowRds_Left: "15",
                    imgBorderShadowRds_Right: "15",
                    imgBorderShadowRds_Top: "15",
                    hoverEffect: 'zoom-in',
                });
                break;
            default:
                return false;
        }
    };

    const changeStyle = (selected) => {
        setAttributes({ stylePreset: selected });
        const complexLayouts = ["octagon", "rhombus", "triangle"];
        if (complexLayouts.includes(selected)) {
            setAttributes({
                complexStyle: true,
            });
        } else {
            setAttributes({
                complexStyle: false,
            });
        }

        //
        switch (selected) {
            case "rounded":
                setAttributes({
                    imgBorderShadowRds_Bottom: "15",
                    imgBorderShadowRds_Top: "15",
                    imgBorderShadowRds_Left: "15",
                    imgBorderShadowRds_Right: "15",
                    imgBorderShadowRds_Unit: "px",
                });
                break;
            case "square":
                setAttributes({
                    imgBorderShadowRds_Bottom: "0",
                    imgBorderShadowRds_Top: "0",
                    imgBorderShadowRds_Left: "0",
                    imgBorderShadowRds_Right: "0",
                    imgBorderShadowRds_Unit: "px",
                });
                break;
            case "circle":
                setAttributes({
                    imgBorderShadowRds_Bottom: "50",
                    imgBorderShadowRds_Top: "50",
                    imgBorderShadowRds_Left: "50",
                    imgBorderShadowRds_Right: "50",
                    imgBorderShadowRds_Unit: "%",
                });
                break;
            default:
                return false;
        }
    };

    const changCaptionStyle = (selected) => {
        switch (selected) {
            case "caption-style-1":
                setAttributes({
                    captionStyle: selected,
                    captionColor: "#ffffff",
                });
                break;
            case "caption-style-2":
                setAttributes({
                    captionStyle: selected,
                    captionColor: "#000000",
                });
                break;
            default:
                setAttributes({
                    captionStyle: selected,
                });
        }
    };

    const resRequiredProps = {
        setAttributes,
        resOption,
        attributes,
        objAttributes,
    };

    return (
        <InspectorControls key="controls">
            <div className="eb-panel-control">
                <TabPanel
                    className="eb-parent-tab-panel"
                    activeClass="active-tab"
                    // onSelect={onSelect}
                    tabs={[
                        {
                            name: "general",
                            title: "General",
                            className: "eb-tab general",
                        },
                        {
                            name: "styles",
                            title: "Style",
                            className: "eb-tab styles",
                        },
                        {
                            name: "advance",
                            title: "Advanced",
                            className: "eb-tab advance",
                        },
                    ]}
                >
                    {(tab) => (
                        <div className={"eb-tab-controls" + tab.name}>
                            {tab.name === "general" && (
                                <>
                                    <PanelBody title={__("General", "essential-blocks")} initialOpen={true}>
                                        <SelectControl
                                            label={__("Source", "essential-blocks")}
                                            value={imgSource}
                                            options={SOURCE}
                                            onChange={(imgSource) => changImgSource(imgSource)}
                                        />
                                        {imgSource !== 'site-logo' && (
                                            <SelectControl
                                                label={__("Styles", "essential-blocks")}
                                                description={__("Border won't work", "essential-blocks")}
                                                value={stylePreset}
                                                options={STYLES}
                                                onChange={(stylePreset) => changeStyle(stylePreset)}
                                            />
                                        )}

                                        {stylePreset === "circle" && (
                                            <PanelRow>
                                                <em>
                                                    {__("Please use equal 'Height' &#38; 'Width' for perfect Circle shape.", "essential-blocks")}
                                                </em>
                                            </PanelRow>
                                        )}

                                        {imgSource === 'custom' && (
                                            <ToggleControl
                                                label={__("Display Caption", "essential-blocks")}
                                                checked={displayCaption}
                                                onChange={() =>
                                                    setAttributes({
                                                        displayCaption: !displayCaption,
                                                    })
                                                }
                                            />
                                        )}

                                        {displayCaption && (
                                            <SelectControl
                                                label={__("Caption Styles", "essential-blocks")}
                                                value={captionStyle}
                                                options={CAPTION_STYLES}
                                                onChange={(captionStyle) => changCaptionStyle(captionStyle)}
                                            />
                                        )}

                                        {imgSource !== 'site-logo' && (
                                            <EbImageSizeSelector
                                                attrName={"imageSize"}
                                                resRequiredProps={resRequiredProps}
                                                label={__("Image Size", "essential-blocks")}
                                            />
                                        )}

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

                                        <ToggleControl
                                            label={__(
                                                "Auto Height",
                                                "essential-blocks"
                                            )}
                                            checked={autoHeight}
                                            onChange={(autoHeight) =>
                                                setAttributes({ autoHeight })
                                            }
                                        />
                                        {!autoHeight && (
                                            <ResponsiveRangeController
                                                baseLabel={__(
                                                    "Height",
                                                    "essential-blocks"
                                                )}
                                                controlName={IMAGE_HEIGHT}
                                                resRequiredProps={
                                                    resRequiredProps
                                                }
                                                min={0}
                                                max={1000}
                                                step={1}
                                                units={SIZE_UNIT_TYPES}
                                            />
                                        )}

                                        <ToggleControl
                                            label={__("Auto Fit Image?", "essential-blocks")}
                                            checked={autoFit}
                                            onChange={(autoFit) => setAttributes({ autoFit })}
                                        />

                                        {imgSource !== 'site-logo' && autoFit && (
                                            <SelectControl
                                                label={__("Image Fit Options", "essential-blocks")}
                                                value={fitStyles}
                                                options={FIT_STYLES}
                                                onChange={(fitStyles) => setAttributes({ fitStyles })}
                                            />
                                        )}

                                        <ToggleControl
                                            label={__("Enable Link?", "essential-blocks")}
                                            checked={enableLink}
                                            onChange={(enableLink) => setAttributes({ enableLink })}
                                        />

                                        {imgSource === 'custom' && enableLink && (
                                            <>
                                                <DynamicInputControl
                                                    label={__(
                                                        "Link",
                                                        "essential-blocks"
                                                    )}
                                                    attrName="imageLink"
                                                    inputValue={imageLink}
                                                    setAttributes={
                                                        setAttributes
                                                    }
                                                    onChange={(link) =>
                                                        setAttributes({
                                                            imageLink: link,
                                                        })
                                                    }
                                                />
                                            </>
                                        )}
                                        {enableLink && (
                                            <ToggleControl
                                                label={__("Open in New Tab", "essential-blocks")}
                                                checked={openInNewTab}
                                                onChange={(openInNewTab) =>
                                                    setAttributes({
                                                        openInNewTab,
                                                    })
                                                }
                                            />
                                        )}

                                        <SelectControl
                                            label={__("Hover Effect", "essential-blocks")}
                                            value={hoverEffect}
                                            options={HOVER_EFFECT}
                                            onChange={(hoverEffect) => setAttributes({ hoverEffect })}
                                        />
                                    </PanelBody>
                                </>
                            )}

                            {tab.name === "styles" && (
                                <>
                                    <PanelBody title={__("Image Settings", "essential-blocks")}>
                                        <ResponsiveAlignControl
                                            baseLabel={__("Image Align", "essential-blocks")}
                                            controlName={IMAGE_ALIGNMENT}
                                            resRequiredProps={resRequiredProps}
                                            options={IMAGE_ALIGN}
                                            resOption={resOption}
                                        />

                                        {!complexStyle && (
                                            <>
                                                <BaseControl>
                                                    <h3 className="eb-control-title">
                                                        {__("Border", "essential-blocks")}
                                                    </h3>
                                                </BaseControl>
                                                <BorderShadowControl
                                                    controlName={IMAGE_BORDER_SHADOW}
                                                    resRequiredProps={resRequiredProps}
                                                // noShadow
                                                // noBorder
                                                />
                                            </>
                                        )}
                                        {complexStyle && (
                                            <PanelRow>
                                                <em>{__("Border Style doesn't support for '{stylePreset} style'.", "essential-blocks")}</em>
                                            </PanelRow>
                                        )}
                                    </PanelBody>

                                    {displayCaption && (
                                        <PanelBody title={__("Caption Styles", "essential-blocks")}>
                                            <ColorControl
                                                label={__("Text Color", "essential-blocks")}
                                                color={captionColor}
                                                onChange={(newColor) =>
                                                    setAttributes({
                                                        captionColor: newColor,
                                                    })
                                                }
                                            />

                                            {displayCaption && captionStyle != "caption-style-2" && (
                                                <ColorControl
                                                    label={__("Background Color", "essential-blocks")}
                                                    color={captionBGColor}
                                                    onChange={(backgroundColor) =>
                                                        setAttributes({
                                                            captionBGColor: backgroundColor,
                                                        })
                                                    }
                                                    isGradient={true}
                                                />
                                            )}

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

                                            <ResponsiveRangeController
                                                baseLabel={__("Width", "essential-blocks")}
                                                controlName={CAPTION_WIDTH}
                                                resRequiredProps={resRequiredProps}
                                                units={UNIT_TYPES}
                                                min={0}
                                                max={300}
                                                step={1}
                                            />

                                            {displayCaption && (
                                                <>
                                                    <ResponsiveAlignControl
                                                        baseLabel={__("Text Align", "essential-blocks")}
                                                        controlName={TEXT_ALIGNMENT}
                                                        resRequiredProps={resRequiredProps}
                                                        options={TEXT_ALIGN}
                                                        resOption={resOption}
                                                    />

                                                    {captionStyle === "caption-style-1" && (
                                                        <>
                                                            <BaseControl
                                                                label={__("Horizontal Align", "essential-blocks")}
                                                            >
                                                                <ButtonGroup>
                                                                    {HORIZONTAL_ALIGN.map((item) => (
                                                                        <Button
                                                                            // isLarge
                                                                            isPrimary={horizontalAlign === item.value}
                                                                            isSecondary={horizontalAlign !== item.value}
                                                                            onClick={() =>
                                                                                setAttributes({
                                                                                    horizontalAlign: item.value,
                                                                                })
                                                                            }
                                                                        >
                                                                            {item.label}
                                                                        </Button>
                                                                    ))}
                                                                </ButtonGroup>
                                                            </BaseControl>

                                                            <BaseControl
                                                                label={__("Vertical Align", "essential-blocks")}
                                                            >
                                                                <ButtonGroup>
                                                                    {VERTICAL_ALIGN.map((item) => (
                                                                        <Button
                                                                            // isLarge
                                                                            isPrimary={verticalAlign === item.value}
                                                                            isSecondary={verticalAlign !== item.value}
                                                                            onClick={() =>
                                                                                setAttributes({
                                                                                    verticalAlign: item.value,
                                                                                })
                                                                            }
                                                                        >
                                                                            {item.label}
                                                                        </Button>
                                                                    ))}
                                                                </ButtonGroup>
                                                            </BaseControl>
                                                        </>
                                                    )}

                                                    {captionStyle === "caption-style-2" && (
                                                        <BaseControl label={__("Vertical Align", "essential-blocks")}>
                                                            <ButtonGroup>
                                                                {VERTICAL_ALIGN_CAP_2.map((item) => (
                                                                    <Button
                                                                        // isLarge
                                                                        isPrimary={verticalAlignCap2 === item.value}
                                                                        isSecondary={verticalAlignCap2 !== item.value}
                                                                        onClick={() =>
                                                                            setAttributes({
                                                                                verticalAlignCap2: item.value,
                                                                            })
                                                                        }
                                                                    >
                                                                        {item.label}
                                                                    </Button>
                                                                ))}
                                                            </ButtonGroup>
                                                        </BaseControl>
                                                    )}

                                                    <ResponsiveDimensionsControl
                                                        resRequiredProps={resRequiredProps}
                                                        controlName={CAPTION_MARGIN}
                                                        baseLabel={__("Margin", "essential-blocks")}
                                                    />

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

                            {tab.name === "advance" && (
                                <>
                                    <PanelBody>
                                        <ResponsiveDimensionsControl
                                            resRequiredProps={resRequiredProps}
                                            controlName={WRAPPER_MARGIN}
                                            baseLabel={__("Margin", "essential-blocks")}
                                        />
                                        <ResponsiveDimensionsControl
                                            resRequiredProps={resRequiredProps}
                                            controlName={WRAPPER_PADDING}
                                            baseLabel={__("Padding", "essential-blocks")}
                                        />
                                    </PanelBody>
                                    <PanelBody title={__("Background", "essential-blocks")} initialOpen={false}>
                                        <BackgroundControl
                                            controlName={WRAPPER_BG}
                                            resRequiredProps={resRequiredProps}
                                            noOverlay
                                        />
                                    </PanelBody>
                                    <PanelBody title={__("Border & Shadow", "essential-blocks")} initialOpen={false}>
                                        <BorderShadowControl
                                            controlName={WRAPPER_BORDER_SHADOW}
                                            resRequiredProps={resRequiredProps}
                                        // noShadow
                                        // noBorder
                                        />
                                    </PanelBody>

                                    <AdvancedControls attributes={attributes} setAttributes={setAttributes} />
                                </>
                            )}
                        </div>
                    )}
                </TabPanel>
            </div>
        </InspectorControls>
    );
}

export default Inspector;
