import { Dictionary } from "@insite/client-framework/Common/Types";
import Radio from "@insite/mobius/Radio";
import RadioGroup from "@insite/mobius/RadioGroup/RadioGroup";
import DisabledInCodeTooltip from "@insite/shell/Components/Shell/StyleGuide/DisabledInCodeTooltip";
import { createSetNewValueInDraft } from "@insite/shell/Components/Shell/StyleGuide/Helpers";
import { PresetHelpers } from "@insite/shell/Components/Shell/StyleGuide/Types";
import get from "lodash/get";
import React from "react";

type Props = {
    locationInTheme: string;
    title: string;
    disabled?: boolean;
    options: Dictionary<string>;
} & PresetHelpers;

const RadioGroupConfig = ({ locationInTheme, theme, title, update, postStyleGuideTheme, disabled, options }: Props) => {
    const changeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
        return update(draft => createSetNewValueInDraft(locationInTheme)(draft, event.target.value));
    };

    const codeOverridden = !!get(postStyleGuideTheme, locationInTheme);
    const finallyDisabled = codeOverridden || disabled;
    return (
        <RadioGroup
            label={
                <>
                    {title} {codeOverridden && <DisabledInCodeTooltip />}
                </>
            }
            labelProps={{ weight: "normal", size: "1rem" }}
            horizontal={true}
            value={get(theme, locationInTheme) || ""}
            onChangeHandler={changeHandler}
            disabled={finallyDisabled}
        >
            {Object.keys(options).map(o => (
                <Radio key={o} value={o} disabled={finallyDisabled}>
                    {options[o]}
                </Radio>
            ))}
        </RadioGroup>
    );
};

export default RadioGroupConfig;
