import CheckboxConfig from "@insite/shell/Components/Shell/StyleGuide/CheckboxConfig";
import ColorPickerConfig from "@insite/shell/Components/Shell/StyleGuide/ColorPickerConfig";
import ConfigMenu from "@insite/shell/Components/Shell/StyleGuide/ConfigMenu";
import ImagePickerConfig from "@insite/shell/Components/Shell/StyleGuide/ImagePickerConfig";
import RadioGroupConfig from "@insite/shell/Components/Shell/StyleGuide/RadioGroupConfig";
import SelectConfig from "@insite/shell/Components/Shell/StyleGuide/SelectConfig";
import { TS } from "@insite/shell/TS";
import get from "lodash/get";
import React from "react";

const fullWidthConfig = (prefix: string, title: string, needStyling: boolean, props: any) => {
    const isFullWidth = !!get(props.presetHelpers.theme, `${prefix}.isFullWidth`);
    const fullWidthStylingType = needStyling ? get(props.presetHelpers.theme, `${prefix}.fullWidthStylingType`) : "";
    return (
        <ConfigMenu title={title} insideForm={false}>
            <CheckboxConfig
                locationInTheme={`${prefix}.isFullWidth`}
                title={TS("Full Width")}
                {...props.presetHelpers}
            />
            {isFullWidth && needStyling && (
                <RadioGroupConfig
                    locationInTheme={`${prefix}.fullWidthStylingType`}
                    title={TS("Styling")}
                    options={{ solidColor: "Solid Color", image: "Image" }}
                    {...props.presetHelpers}
                />
            )}
            {isFullWidth && fullWidthStylingType === "solidColor" && needStyling && (
                <ColorPickerConfig
                    locationInTheme={`${prefix}.fullWidthColor`}
                    title={TS("Color")}
                    id={`${prefix}-full-width-color`}
                    {...props.presetHelpers}
                />
            )}
            {isFullWidth && fullWidthStylingType === "image" && needStyling && (
                <>
                    <ImagePickerConfig locationInTheme={`${prefix}.fullWidthImage`} {...props.presetHelpers} />
                    <SelectConfig
                        locationInTheme={`${prefix}.fullWidthImageFocalPoint`}
                        title={TS("Focal Point")}
                        {...props.presetHelpers}
                    >
                        <option value="topLeft">{TS("Top Left")}</option>
                        <option value="topCenter">{TS("Top Center")}</option>
                        <option value="topRight">{TS("Top Right")}</option>
                        <option value="centerLeft">{TS("Center Left")}</option>
                        <option value="center">{TS("Center")}</option>
                        <option value="centerRight">{TS("Center Right")}</option>
                        <option value="bottomLeft">{TS("Bottom Left")}</option>
                        <option value="bottomCenter">{TS("Bottom Center")}</option>
                        <option value="bottomRight">{TS("Bottom Right")}</option>
                    </SelectConfig>
                </>
            )}
        </ConfigMenu>
    );
};

const Header = (props: any) => {
    return fullWidthConfig("header", TS("Header"), true, props);
};

const Content = (props: any) => {
    return fullWidthConfig("content", TS("Content"), false, props);
};

const Footer = (props: any) => {
    return fullWidthConfig("footer", TS("Footer"), true, props);
};

export default function FullWidthConfig(props: any) {
    return (
        <>
            <Header {...props} />
            <Content {...props} />
            <Footer {...props} />
        </>
    );
}
