import CheckboxGroup from "@insite/mobius/CheckboxGroup";
import TextField from "@insite/mobius/TextField";
import { TypographyProps } from "@insite/mobius/Typography";
import get from "@insite/mobius/utilities/get";
import ColorPicker from "@insite/shell/Components/Elements/ColorPicker";
import CheckboxConfig from "@insite/shell/Components/Shell/StyleGuide/CheckboxConfig";
import ConfigMenu from "@insite/shell/Components/Shell/StyleGuide/ConfigMenu";
import DisabledInCodeTooltip from "@insite/shell/Components/Shell/StyleGuide/DisabledInCodeTooltip";
import { createSetParentIfUndefined } from "@insite/shell/Components/Shell/StyleGuide/Helpers";
import SelectConfig from "@insite/shell/Components/Shell/StyleGuide/SelectConfig";
import SideBarAccordionSection from "@insite/shell/Components/Shell/StyleGuide/SideBarAccordionSection";
import { configFormFieldStyles } from "@insite/shell/Components/Shell/StyleGuide/Styles";
import TextFieldConfig from "@insite/shell/Components/Shell/StyleGuide/TextFieldConfig";
import { PresetHelpers } from "@insite/shell/Components/Shell/StyleGuide/Types";
import { TS } from "@insite/shell/TS";
import * as React from "react";
import { css } from "styled-components";

const TypographyConfig: React.FunctionComponent<
    {
        title: string;
        idPrefix: string;
        insideForm?: boolean;
        variant?: "accordion" | "popover";
        locationInTheme: string;
        enableColorPresets: boolean;
        disabled?: boolean;
    } & PresetHelpers
> = ({ title, idPrefix, enableColorPresets, insideForm, variant, locationInTheme, disabled, ...presetHelpers }) => {
    const {
        update,
        postStyleGuideTheme,
        theme,
        tryMatchColorResultToPresetName,
        tryMatchColorStringToPresetValue,
        presetColors,
    } = presetHelpers;
    const ConfigWrapper = variant === "accordion" ? SideBarAccordionSection : ConfigMenu;
    const getCssProperties = createSetParentIfUndefined(locationInTheme);
    const codeOverrideProps = get(postStyleGuideTheme, locationInTheme) || {};
    const cssProperties: TypographyProps = get(theme, locationInTheme) || {};
    return (
        <ConfigWrapper title={title} insideForm={insideForm} inPopover>
            <ColorPicker
                isInPopover
                firstInput
                label={TS("Color")}
                id={`${idPrefix}-color`}
                color={
                    cssProperties.color && enableColorPresets
                        ? tryMatchColorStringToPresetValue(cssProperties.color)
                        : cssProperties.color
                }
                onChange={color =>
                    update(draft => {
                        getCssProperties(draft).color = tryMatchColorResultToPresetName(color);
                    })
                }
                disabled={!!codeOverrideProps.color || disabled}
                presetColors={enableColorPresets ? presetColors : undefined}
            />
            <TextFieldConfig
                title={TS("Font Weight")}
                locationInTheme={`${locationInTheme}.weight`}
                disabled={disabled}
                {...presetHelpers}
            />
            <CheckboxGroup
                css={css`
                    margin-top: 10px;
                `}
            >
                <CheckboxConfig
                    locationInTheme={`${locationInTheme}.italic`}
                    title={TS("Italic")}
                    disabled={disabled}
                    {...presetHelpers}
                />
                <CheckboxConfig
                    locationInTheme={`${locationInTheme}.underline`}
                    title={TS("Underline")}
                    disabled={disabled}
                    {...presetHelpers}
                />
            </CheckboxGroup>
            <TextField
                label={
                    codeOverrideProps.size ? (
                        <>
                            <span>{TS("Font Size ")}</span>
                            <DisabledInCodeTooltip />
                        </>
                    ) : (
                        TS("Font Size")
                    )
                }
                value={cssProperties.size}
                onChange={event =>
                    update(draft => {
                        getCssProperties(draft).size = event.currentTarget.value;
                    })
                }
                disabled={!!codeOverrideProps.size || disabled}
                {...configFormFieldStyles}
            />
            <TextField
                label={
                    codeOverrideProps.lineHeight ? (
                        <>
                            <span>{TS("Line Height ")}</span>
                            <DisabledInCodeTooltip />
                        </>
                    ) : (
                        TS("Line Height")
                    )
                }
                value={cssProperties.lineHeight}
                onChange={event =>
                    update(draft => {
                        getCssProperties(draft).lineHeight = event.currentTarget.value;
                    })
                }
                disabled={!!codeOverrideProps.lineHeight || disabled}
                {...configFormFieldStyles}
            />
            <SelectConfig
                title={TS("Text Transform")}
                locationInTheme={`${locationInTheme}.transform`}
                {...presetHelpers}
                disabled={disabled}
            >
                <option value="none">{TS("None")}</option>
                <option value="capitalize">{TS("Capitalize")}</option>
                <option value="uppercase">{TS("Uppercase")}</option>
                <option value="lowercase">{TS("Lowercase")}</option>
            </SelectConfig>
        </ConfigWrapper>
    );
};

export default TypographyConfig;
