import { postStyleGuideTheme } from "@insite/client-framework/ThemeConfiguration";
import Accordion from "@insite/mobius/Accordion";
import Button, { ButtonIcon } from "@insite/mobius/Button";
import CheckboxGroup from "@insite/mobius/CheckboxGroup";
import Clickable from "@insite/mobius/Clickable";
import LoadingSpinner from "@insite/mobius/LoadingSpinner";
import Typography, { TypographyProps } from "@insite/mobius/Typography";
import get from "@insite/mobius/utilities/get";
import resolveColor from "@insite/mobius/utilities/resolveColor";
import ColorPicker from "@insite/shell/Components/Elements/ColorPicker";
import { RedoSrc } from "@insite/shell/Components/Icons/Redo";
import { UndoSrc } from "@insite/shell/Components/Icons/Undo";
import { SideBarStyle } from "@insite/shell/Components/Layout";
import ButtonConfig from "@insite/shell/Components/Shell/StyleGuide/ButtonConfig";
import CheckboxConfig from "@insite/shell/Components/Shell/StyleGuide/CheckboxConfig";
import CodeInjectionConfig from "@insite/shell/Components/Shell/StyleGuide/CodeInjectionConfig";
import ColorPickerConfig from "@insite/shell/Components/Shell/StyleGuide/ColorPickerConfig";
import ConfigMenu from "@insite/shell/Components/Shell/StyleGuide/ConfigMenu";
import ElementTypographyConfig from "@insite/shell/Components/Shell/StyleGuide/ElementTypographyConfig";
import FullWidthConfig from "@insite/shell/Components/Shell/StyleGuide/FullWidthConfig";
import HeaderConfig from "@insite/shell/Components/Shell/StyleGuide/HeaderConfig";
import { createSetNewValueInDraft } from "@insite/shell/Components/Shell/StyleGuide/Helpers";
import IconConfig from "@insite/shell/Components/Shell/StyleGuide/IconConfig";
import IconSelector from "@insite/shell/Components/Shell/StyleGuide/IconSelector";
import SelectConfig from "@insite/shell/Components/Shell/StyleGuide/SelectConfig";
import SideBarAccordionSection from "@insite/shell/Components/Shell/StyleGuide/SideBarAccordionSection";
import TextFieldConfig from "@insite/shell/Components/Shell/StyleGuide/TextFieldConfig";
import { createMergedTheme, Updater } from "@insite/shell/Components/Shell/StyleGuide/Types";
import TypographyConfig from "@insite/shell/Components/Shell/StyleGuide/TypographyConfig";
import { ShellThemeProps } from "@insite/shell/ShellTheme";
import { colorResultToString } from "@insite/shell/Store/ShellSelectors";
import ShellState from "@insite/shell/Store/ShellState";
import {
    cancelSave,
    loadTheme,
    redo,
    resetTheme,
    saveTheme,
    setTheme,
    undo,
} from "@insite/shell/Store/StyleGuide/StyleGuideActionCreators";
import { TS } from "@insite/shell/TS";
import * as React from "react";
import { ReactNode } from "react";
import { ColorResult } from "react-color";
import { connect, ResolveThunks } from "react-redux";
import styled, { css } from "styled-components";

const createColorPreset = (displayAs: string, name: string, currentValue: string, preventColorReset?: boolean) => ({
    displayAs,
    name,
    currentValue,
    update: createSetNewValueInDraft(`colors.${name}`),
    preventColorReset,
});

const mapStateToProps = (state: ShellState) => ({
    permissions: state.shellContext.permissions,
    advancedFeaturesEnabled: state.shellContext.settings?.settingsCollection?.websiteSettings?.advancedSpireCmsFeatures,
    ...state.styleGuide,
});

const mapDispatchToProps = {
    setTheme,
    saveTheme,
    loadTheme,
    cancelSave,
    undo,
    redo,
    resetTheme,
};

type Props = ReturnType<typeof mapStateToProps> & ResolveThunks<typeof mapDispatchToProps>;

const ConnectableStyleGuideEditor: React.FunctionComponent<Props> = props => {
    const { setTheme, saveTheme, loadTheme, cancelSave, undo, redo, resetTheme } = props;
    React.useEffect(() => {
        if (props.theme) {
            return;
        }
        loadTheme();
    }, []);

    if (!props.theme) {
        return (
            <>
                <SideBarStyle
                    css={css`
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    `}
                >
                    <LoadingSpinner />
                </SideBarStyle>
            </>
        );
    }

    const codeOverridden = (path: string) => !!get(postStyleGuideTheme, path);

    // Being from redux, the theme is frozen.
    // `ThemeProvider` wants to write the `translate` property, which is root-level, so a shallow clone allows this.
    const shallowClonedTheme = { ...props.theme };
    const theme = createMergedTheme(shallowClonedTheme);

    const update = (update: Updater) => setTheme(shallowClonedTheme, update);

    const exitButtonProps = { color: "common.backgroundContrast", typographyProps: { weight: 400 } };
    const { colors } = theme;
    const exitLinks =
        props.history.length !== 1 ? (
            <ActionBar>
                <Button onClick={() => saveTheme(shallowClonedTheme)}>Save</Button>
                <Button {...exitButtonProps} buttonType="solid" onClick={() => cancelSave()}>
                    Cancel
                </Button>
                <Button
                    {...exitButtonProps}
                    buttonType="solid"
                    sizeVariant="small"
                    onClick={() => undo()}
                    disabled={props.historyIndex === 0}
                >
                    <ButtonIcon src={UndoSrc} />
                </Button>
                <Button
                    {...exitButtonProps}
                    buttonType="solid"
                    sizeVariant="small"
                    onClick={() => redo()}
                    disabled={props.historyIndex === props.history.length - 1}
                >
                    <ButtonIcon src={RedoSrc} />
                </Button>
            </ActionBar>
        ) : null;

    const presets = [
        createColorPreset(TS("Primary"), "primary.main", colors.primary.main),
        createColorPreset(TS("Primary Contrast"), "primary.contrast", colors.primary.contrast),
        createColorPreset(TS("Secondary"), "secondary.main", colors.secondary.main),
        createColorPreset(TS("Secondary Contrast"), "secondary.contrast", colors.secondary.contrast),
        createColorPreset(TS("Success"), "success.main", colors.success.main),
        createColorPreset(TS("Success Contrast"), "success.contrast", colors.success.contrast),
        createColorPreset(TS("Danger"), "danger.main", colors.danger.main),
        createColorPreset(TS("Danger Contrast"), "danger.contrast", colors.danger.contrast),
        createColorPreset(TS("Warning"), "warning.main", colors.warning.main),
        createColorPreset(TS("Warning Contrast"), "warning.contrast", colors.warning.contrast),
        createColorPreset(TS("Info"), "info.main", colors.info.main),
        createColorPreset(TS("Info Contrast"), "info.contrast", colors.info.contrast),
        createColorPreset(TS("Background"), "common.background", colors.common.background),
        createColorPreset(TS("Background Contrast"), "common.backgroundContrast", colors.common.backgroundContrast),
        createColorPreset(TS("Accent"), "common.accent", colors.common.accent),
        createColorPreset(TS("Accent Contrast"), "common.accentContrast", colors.common.accentContrast),
        createColorPreset(TS("Border"), "common.border", colors.common.border),
        createColorPreset(TS("Disabled"), "common.disabled", colors.common.disabled),
        createColorPreset(TS("Text Main"), "text.main", colors.text.main),
        createColorPreset(TS("Text Accent"), "text.accent", colors.text.accent),
        createColorPreset(TS("Text Disabled"), "text.disabled", colors.text.disabled),
        createColorPreset(TS("Text Link"), "text.link", colors.text.link, true),
    ];

    const presetColors: string[] = [];
    const presetValuesByName: { [color: string]: string | undefined } = {};
    const presetNamesByColor: { [color: string]: string | undefined } = {};

    for (const preset of presets) {
        if (presetColors.indexOf(preset.currentValue) < 0) {
            presetColors.push(preset.currentValue);
        }
        presetValuesByName[preset.name] = preset.currentValue;
        presetNamesByColor[preset.currentValue] = preset.name;
    }

    const tryMatchColorResultToPresetName = (color: ColorResult) => {
        const colorAsString = colorResultToString(color);
        if (!colorAsString) {
            return undefined;
        }
        return presetNamesByColor[colorAsString] || colorAsString;
    };

    const tryMatchColorStringToPresetValue = (color: string | undefined) => {
        if (!color) {
            return color;
        }

        const preset = presetValuesByName[color];
        return preset || resolveColor(color, theme);
    };

    const presetHelpers = {
        update,
        tryMatchColorStringToPresetValue,
        tryMatchColorResultToPresetName,
        presetColors,
        postStyleGuideTheme,
        theme,
    };

    const disableEditGlobalStyleGuide = !props.permissions?.canEditGlobalStyleGuide;

    const selectConfig = (title: string, locationInTheme: string, children: ReactNode) => {
        return (
            <SelectConfig
                title={title}
                locationInTheme={locationInTheme}
                {...presetHelpers}
                disabled={disableEditGlobalStyleGuide}
            >
                {children}
            </SelectConfig>
        );
    };

    const buttonConfig = (title: string, idPrefix: string, locationInTheme: string, disableTypography?: boolean) => {
        return (
            <ButtonConfig
                title={title}
                idPrefix={idPrefix}
                locationInTheme={locationInTheme}
                disableTypography={disableTypography}
                insideForm
                {...presetHelpers}
                disabled={disableEditGlobalStyleGuide}
            />
        );
    };

    const typographyConfig = (title: string, idPrefix: string, locationInTheme: string) => {
        return (
            <TypographyConfig
                title={title}
                idPrefix={idPrefix}
                locationInTheme={locationInTheme}
                enableColorPresets
                insideForm
                {...presetHelpers}
                disabled={disableEditGlobalStyleGuide}
            />
        );
    };

    const iconConfig = (idPrefix: string, locationInTheme: string, otherProps?: object) => {
        return (
            <IconConfig
                idPrefix={idPrefix}
                locationInTheme={locationInTheme}
                insideForm
                {...presetHelpers}
                disabled={disableEditGlobalStyleGuide}
                {...otherProps}
            />
        );
    };

    return (
        <>
            {exitLinks}
            <SideBarStyle>
                <form spellCheck={false} onSubmit={event => event.preventDefault()}>
                    <Typography {...sectionTitleProps}>{TS("Site Colors")}</Typography>
                    {presets.map(preset => (
                        <ColorPickerWrapper key={preset.name}>
                            <ColorPicker
                                label={preset.displayAs}
                                id={preset.name}
                                color={preset.currentValue}
                                disabled={codeOverridden(`colors.${preset.name}`) || disableEditGlobalStyleGuide}
                                preventColorReset={preset.preventColorReset}
                                onChange={color => update(draft => preset.update(draft, colorResultToString(color)))}
                            />
                        </ColorPickerWrapper>
                    ))}
                    <Typography {...sectionTitleProps}>{TS("Site Typography")}</Typography>
                    <Accordion headingLevel={3}>
                        <ElementTypographyConfig
                            element="body"
                            elementDisplayName={TS("Body")}
                            {...presetHelpers}
                            disabled={disableEditGlobalStyleGuide}
                        />
                        <ElementTypographyConfig
                            element="p"
                            elementDisplayName={TS("Paragraph (<p>)")}
                            {...presetHelpers}
                            disabled={disableEditGlobalStyleGuide}
                        />
                        <ElementTypographyConfig
                            element="h1"
                            {...presetHelpers}
                            disabled={disableEditGlobalStyleGuide}
                        />
                        <ElementTypographyConfig
                            element="h2"
                            {...presetHelpers}
                            disabled={disableEditGlobalStyleGuide}
                        />
                        <ElementTypographyConfig
                            element="h3"
                            {...presetHelpers}
                            disabled={disableEditGlobalStyleGuide}
                        />
                        <ElementTypographyConfig
                            element="h4"
                            {...presetHelpers}
                            disabled={disableEditGlobalStyleGuide}
                        />
                        <ElementTypographyConfig
                            element="h5"
                            {...presetHelpers}
                            disabled={disableEditGlobalStyleGuide}
                        />
                        <ElementTypographyConfig
                            element="h6"
                            {...presetHelpers}
                            disabled={disableEditGlobalStyleGuide}
                        />
                        <ElementTypographyConfig
                            element="legend"
                            elementDisplayName={TS("Legend")}
                            {...presetHelpers}
                            disabled={disableEditGlobalStyleGuide}
                        />
                        <ElementTypographyConfig
                            element="headerPrimary"
                            elementDisplayName={TS("Header Primary")}
                            {...presetHelpers}
                            disabled={disableEditGlobalStyleGuide}
                        />
                        <ElementTypographyConfig
                            element="headerSecondary"
                            elementDisplayName={TS("Header Secondary")}
                            {...presetHelpers}
                            disabled={disableEditGlobalStyleGuide}
                        />
                        <ElementTypographyConfig
                            element="headerTertiary"
                            elementDisplayName={TS("Header Tertiary")}
                            {...presetHelpers}
                            disabled={disableEditGlobalStyleGuide}
                        />
                        <ConfigMenu title={TS("Link")}>
                            <ColorPickerConfig
                                isInPopover
                                locationInTheme="link.defaultProps.color"
                                title={TS("Color")}
                                id="link-color"
                                {...presetHelpers}
                                preventColorReset
                            />
                            {selectConfig(
                                "Hover Mode",
                                "link.defaultProps.hoverMode",
                                <>
                                    <option value="" hidden disabled></option>
                                    <option value="darken">{TS("Darken")}</option>
                                    <option value="lighten">{TS("Lighten")}</option>
                                </>,
                            )}
                            {iconConfig("link", "link.defaultProps.icon.iconProps", {
                                disableSource: true,
                                variant: "accordion",
                            })}
                        </ConfigMenu>
                    </Accordion>
                    <Typography {...sectionTitleProps}>{TS("Site Configurations")}</Typography>
                    <Accordion headingLevel={3}>
                        <SideBarAccordionSection title={TS("Accordion")}>
                            {typographyConfig(
                                TS("Header Text"),
                                "accordion",
                                "accordion.sectionDefaultProps.titleTypographyProps",
                            )}
                            {iconConfig("accordion", "accordion.sectionDefaultProps.toggleIconProps")}
                        </SideBarAccordionSection>
                        <SideBarAccordionSection title={TS("Breadcrumb")}>
                            {typographyConfig(
                                TS("Breadcrumb Typography"),
                                "breadcrumb",
                                "breadcrumbs.defaultProps.typographyProps",
                            )}
                        </SideBarAccordionSection>
                        <SideBarAccordionSection title={TS("Button")}>
                            {buttonConfig(TS("Primary Button"), "primary-button", "button.primary")}
                            {buttonConfig(TS("Secondary Button"), "secondary-button", "button.secondary")}
                            {buttonConfig(TS("Tertiary Button"), "tertiary-button", "button.tertiary")}
                        </SideBarAccordionSection>
                        <SideBarAccordionSection title={TS("Form Field Options")}>
                            {selectConfig(
                                TS("Border"),
                                "formField.defaultProps.border",
                                <>
                                    <option value="" hidden disabled></option>
                                    <option value="underline">{TS("Underline")}</option>
                                    <option value="rectangle">{TS("Rectangle")}</option>
                                    <option value="rounded">{TS("Rounded")}</option>
                                </>,
                            )}
                            {selectConfig(
                                TS("Size Variant"),
                                "formField.defaultProps.sizeVariant",
                                <>
                                    <option value="" hidden disabled></option>
                                    <option value="default">{TS("Default")}</option>
                                    <option value="small">{TS("Small")}</option>
                                </>,
                            )}
                            {typographyConfig(TS("Error Text"), "error-text", "formField.defaultProps.errorProps")}
                            {typographyConfig(TS("Label Text"), "label-text", "formField.defaultProps.labelProps")}
                            {typographyConfig(TS("Hint Text"), "hint-text", "formField.defaultProps.hintProps")}
                        </SideBarAccordionSection>
                        <SideBarAccordionSection title={TS("Field Set Options")}>
                            <ColorPickerConfig
                                firstInput
                                locationInTheme="fieldSet.defaultProps.color"
                                title={TS("Color")}
                                id="field-set-options-color"
                                {...presetHelpers}
                            />
                            {selectConfig(
                                TS("Size Variant"),
                                "fieldSet.defaultProps.sizeVariant",
                                <>
                                    <option value="" hidden disabled></option>
                                    <option value="default">{TS("Default")}</option>
                                    <option value="small">{TS("Small")}</option>
                                </>,
                            )}
                            {typographyConfig(
                                TS("Group Label Text Properties"),
                                "group-label-text-properties",
                                "fieldSet.groupDefaultProps.labelProps",
                            )}
                            {typographyConfig(
                                TS("Item Label Text Properties"),
                                "item-label-text-properties",
                                "fieldSet.defaultProps.typographyProps",
                            )}
                        </SideBarAccordionSection>
                        <SideBarAccordionSection title={TS("Checkbox")}>
                            <IconSelector
                                title={TS("Icon")}
                                disabled={disableEditGlobalStyleGuide}
                                locationInTheme="checkbox.defaultProps.iconProps"
                                {...presetHelpers}
                            />
                            <IconSelector
                                title={TS("Indeterminate Icon")}
                                disabled={disableEditGlobalStyleGuide}
                                locationInTheme="checkbox.defaultProps.indeterminateIconProps"
                                {...presetHelpers}
                            />
                            <ColorPickerConfig
                                firstInput
                                locationInTheme="checkbox.defaultProps.indeterminateColor"
                                title={TS("Indeterminate Color")}
                                id="indeterminate-color"
                                {...presetHelpers}
                            />
                        </SideBarAccordionSection>
                        {props.advancedFeaturesEnabled && (
                            <SideBarAccordionSection title={TS("Code Injection")}>
                                <CodeInjectionConfig presetHelpers={presetHelpers} />
                            </SideBarAccordionSection>
                        )}
                        <SideBarAccordionSection title={TS("Date Picker")}>
                            <TextFieldConfig
                                title={TS("Format")}
                                hint={
                                    <Clickable
                                        href="https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table"
                                        target="_blank"
                                    >
                                        {TS("Format Reference")}
                                    </Clickable>
                                }
                                locationInTheme="datePicker.defaultProps.format"
                                disabled={disableEditGlobalStyleGuide}
                                {...presetHelpers}
                            />
                            {selectConfig(
                                TS("Calendar Type"),
                                "datePicker.defaultProps.dateTimePickerProps.calendarType",
                                <>
                                    <option value="" hidden disabled></option>
                                    <option value="ISO 8601">{TS("ISO 8601")}</option>
                                    <option value="US">{TS("US")}</option>
                                    <option value="Arabic">{TS("Arabic")}</option>
                                    <option value="Hebrew">{TS("Hebrew")}</option>
                                </>,
                            )}
                            <CheckboxGroup
                                css={css`
                                    margin-top: 10px;
                                `}
                            >
                                <CheckboxConfig
                                    locationInTheme="datePicker.defaultProps.dateTimePickerProps.showLeadingZeros"
                                    title={TS("Show Leading Zeros")}
                                    disabled={disableEditGlobalStyleGuide}
                                    {...presetHelpers}
                                />
                                <CheckboxConfig
                                    locationInTheme="datePicker.defaultProps.dateTimePickerProps.showFixedNumberOfWeeks"
                                    title={TS("Show Fixed Number of Weeks")}
                                    disabled={disableEditGlobalStyleGuide}
                                    {...presetHelpers}
                                />
                                <CheckboxConfig
                                    locationInTheme="datePicker.defaultProps.dateTimePickerProps.showNeighboringMonth"
                                    title={TS("Show Neighboring Month")}
                                    disabled={disableEditGlobalStyleGuide}
                                    {...presetHelpers}
                                />
                            </CheckboxGroup>
                            <TextFieldConfig
                                title={TS("Year Placeholder")}
                                locationInTheme="datePicker.defaultProps.placeholders.yearPlaceholder"
                                disabled={disableEditGlobalStyleGuide}
                                {...presetHelpers}
                            />
                            <TextFieldConfig
                                title={TS("Month Placeholder")}
                                locationInTheme="datePicker.defaultProps.placeholders.monthPlaceholder"
                                disabled={disableEditGlobalStyleGuide}
                                {...presetHelpers}
                            />
                            <TextFieldConfig
                                title={TS("Day Placeholder")}
                                locationInTheme="datePicker.defaultProps.placeholders.dayPlaceholder"
                                disabled={disableEditGlobalStyleGuide}
                                {...presetHelpers}
                            />
                            {iconConfig("datepicker-calendar", "datePicker.defaultProps.calendarIconProps", {
                                title: TS("Calendar Icon Configuration"),
                            })}
                            {iconConfig("datepicker-clear", "datePicker.defaultProps.clearIconProps", {
                                title: TS("Clear Icon Configuration"),
                            })}
                        </SideBarAccordionSection>
                        <SideBarAccordionSection title={TS("File Upload")}>
                            {buttonConfig(
                                TS("Button Props"),
                                "file-upload-button",
                                "fileUpload.defaultProps.buttonProps",
                            )}
                            {iconConfig("file-upload", "fileUpload.defaultProps.iconProps")}
                        </SideBarAccordionSection>
                        <SideBarAccordionSection title={TS("Full Width")}>
                            <FullWidthConfig presetHelpers={presetHelpers} />
                        </SideBarAccordionSection>
                        <SideBarAccordionSection title={TS("Header")}>
                            <HeaderConfig {...presetHelpers} />
                        </SideBarAccordionSection>
                        <SideBarAccordionSection title={TS("Overlay")}>
                            <CheckboxConfig
                                locationInTheme="signIn.useOverlay"
                                title={TS("Sign In")}
                                {...presetHelpers}
                            />
                            <CheckboxConfig
                                locationInTheme="storePickup.useOverlay"
                                title={TS("Store Pickup")}
                                {...presetHelpers}
                            />
                            <CheckboxConfig
                                locationInTheme="addressBook.useOverlay"
                                title={TS("Address Book")}
                                {...presetHelpers}
                            />
                        </SideBarAccordionSection>
                        <SideBarAccordionSection title={TS("Spinner")}>
                            <ColorPickerConfig
                                firstInput
                                locationInTheme="loadingSpinner.defaultProps.color"
                                title={TS("Color")}
                                id="spinner-color"
                                {...presetHelpers}
                            />
                        </SideBarAccordionSection>
                        <SideBarAccordionSection title={TS("Swatch")}>
                            {selectConfig(
                                TS("Swatch Type"),
                                "swatch.borderType",
                                <>
                                    <option value="" hidden disabled></option>
                                    <option value="square">{TS("Square")}</option>
                                    <option value="roundedSquare">{TS("Rounded Square")}</option>
                                    <option value="round">{TS("Round")}</option>
                                </>,
                            )}
                        </SideBarAccordionSection>
                        <SideBarAccordionSection title={TS("Overflow Menu")}>
                            {buttonConfig(
                                TS("Primary Button"),
                                "overflow-button",
                                "overflowMenu.defaultProps.buttonProps",
                                true,
                            )}
                            {iconConfig("overflow-icon", "overflowMenu.defaultProps.iconProps")}
                        </SideBarAccordionSection>
                        <SideBarAccordionSection title={TS("Pagination")}>
                            {selectConfig(
                                TS("Current Page Variant"),
                                "pagination.defaultProps.currentPageButtonVariant",
                                <>
                                    <option value="" hidden disabled></option>
                                    <option value="primary">{TS("Primary")}</option>
                                    <option value="secondary">{TS("Secondary")}</option>
                                    <option value="tertiary">{TS("Tertiary")}</option>
                                </>,
                            )}
                            {buttonConfig(
                                TS("Other Buttons"),
                                "pagination-button",
                                "pagination.defaultProps.buttonProps",
                            )}
                        </SideBarAccordionSection>
                        <SideBarAccordionSection title={TS("Tag")}>
                            <ColorPickerConfig
                                firstInput
                                locationInTheme="tag.defaultProps.color"
                                title={TS("Color")}
                                id="tag-color"
                                {...presetHelpers}
                            />
                            {iconConfig("tag", "tag.defaultProps.iconProps")}
                            {typographyConfig(
                                TS("Typography"),
                                "tag-text-properties",
                                "tag.defaultProps.typographyProps",
                            )}
                        </SideBarAccordionSection>
                        <SideBarAccordionSection title={TS("Tooltip")}>
                            {iconConfig("tooltip", "tooltip.defaultProps.iconProps")}
                            {typographyConfig(
                                TS("Typography"),
                                "tooltip-text-properties",
                                "tooltip.defaultProps.typographyProps",
                            )}
                        </SideBarAccordionSection>
                    </Accordion>
                </form>
                <ResetButton disabled={disableEditGlobalStyleGuide} onClick={() => resetTheme()}>
                    {TS("Reset Styles to Default")}
                    <Typography variant="p" as="span">
                        {TS("This can be undone.")}
                    </Typography>
                </ResetButton>
            </SideBarStyle>
        </>
    );
};

const ColorPickerWrapper = styled.div`
    padding: 5px 35px;
    &:hover {
        background-color: #d4e0fd;
    }
`;

const ResetButton = styled.button`
    height: 35px;
    display: block;
    border: 1px solid ${(props: ShellThemeProps) => props.theme.colors.primary.main};
    border-radius: 4px;
    background: transparent;
    color: ${(props: ShellThemeProps) => props.theme.colors.text.main};
    font-family: ${(props: ShellThemeProps) => props.theme.typography.body.fontFamily};
    font-weight: bold;
    font-size: 14px;
    padding-left: 15px;
    padding-right: 15px;
    text-transform: uppercase;
    margin: 42px auto 85vh auto;
    cursor: pointer;
    > span {
        text-transform: none;
    }
`;

const ActionBar = styled.div`
    position: absolute;
    top: 0;
    width: 100%;
    background: ${(props: ShellThemeProps) => props.theme.colors.common.backgroundContrast};
    padding: 12px 10px 12px 34px;
    display: flex;
    justify-content: space-between;
    z-index: 1300;
    button:disabled {
        background: ${(props: ShellThemeProps) => props.theme.colors.common.backgroundContrast};
        border-color: ${(props: ShellThemeProps) => props.theme.colors.common.backgroundContrast};
        ${ButtonIcon} {
            color: ${(props: ShellThemeProps) => props.theme.colors.common.disabled};
        }
    }
`;

const sectionTitleProps: TypographyProps = {
    as: "h2",
    variant: "h5",
    transform: "uppercase",
    css: css`
        margin: 20px 0 0;
        padding: 0 35px;
    `,
};

const StyleGuideEditor = connect(mapStateToProps, mapDispatchToProps)(ConnectableStyleGuideEditor);

export default StyleGuideEditor;
