"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.themeWithKnobs = void 0;
const react_1 = __importDefault(require("react"));
const addon_knobs_1 = require("@storybook/addon-knobs");
const hsluv_1 = require("hsluv");
const __1 = require("..");
var Group;
(function (Group) {
    Group["TextField"] = "Text field";
    Group["Select"] = "Select";
    Group["Breadcrumb"] = "Breadcrumb";
    Group["HeadingLevel1"] = "Heading level 1";
    Group["HeadingLevel2"] = "Heading level 2";
    Group["HeadingLevel3"] = "Heading level 3";
    Group["Checkbox"] = "Checkbox";
    Group["PrimaryButton"] = "Primary button";
    Group["SecondaryButton"] = "Secondary button";
    Group["FormLayout"] = "Form layout";
    Group["Tag"] = "Tag";
    Group["Tooltip"] = "Tooltip";
    Group["Banner"] = "Banner";
    Group["OptionList"] = "Option list";
    Group["Style"] = "Style";
    Group["Color"] = "Color";
    Group["Typography"] = "Typography";
    Group["Thumbnail"] = "Thumbnail";
    Group["Link"] = "Link";
    Group["ReviewBlock"] = "Review block";
})(Group || (Group = {}));
var Label;
(function (Label) {
    Label["Border"] = "Border";
    Label["BorderRadius"] = "Border radius";
    Label["LabelPosition"] = "Label position";
    Label["Style"] = "Style";
    Label["TypographyStyle"] = "Typography style";
    Label["ErrorIndentation"] = "Error indentation";
    Label["BlockPadding"] = "Block padding";
    Label["InlinePadding"] = "Inline padding";
    Label["LoadingStyle"] = "Loading style";
    Label["BadgeColor"] = "Badge color";
    Label["ColorHovered"] = "Color hovered";
    Label["TransitionDuration"] = "Transition duration";
    Label["Spacing"] = "Spacing";
})(Label || (Label = {}));
var Breadcrumb;
(function (Breadcrumb) {
    Breadcrumb["ChevronIconSeparator"] = "Chevron icon separator";
    Breadcrumb["NumberStyle"] = "Number style";
})(Breadcrumb || (Breadcrumb = {}));
const SIMPLE_BORDER_RADIUS_OPTIONS = optionify(['none', 'base']);
const BORDER_RADIUS_OPTIONS = optionify([
    'none',
    'tight',
    'base',
    'fullyRounded',
]);
const SIMPLE_BORDER_OPTIONS = optionify(['full', 'none']);
const BORDER_OPTIONS = optionify(['full', 'blockEnd', 'none']);
const LABEL_POSITION_OPTIONS = optionify(['inside', 'outside']);
const NUMBER_STYLE_OPTIONS = optionify([
    'none',
    'decimal',
    'decimalLeadingZero',
]);
const BUTTON_STYLE_OPTIONS = optionify(['fill', 'inverse', 'plain']);
const STYLE_OPTIONS = optionify(['style1']);
const SIZE_OPTIONS = optionify([
    'base',
    'extraSmall',
    'small',
    'medium',
    'large',
    'extraLarge',
    'extraExtraLarge',
]);
const LETTER_CASE_OPTIONS = optionify(['none', 'title', 'upper', 'lower']);
const FONT_OPTIONS = optionify(['primary', 'secondary']);
const WEIGHT_OPTIONS = optionify(['base', 'bold']);
const LINE_SIZE_OPTIONS = optionify(['base', 'small']);
const KERNING_OPTIONS = optionify(['base', 'loose', 'xloose']);
const DECORATION_OPTIONS = optionify(['none', 'underline']);
const SPACING_OPTIONS = optionify([
    'none',
    'extraTight',
    'tight',
    'base',
    'loose',
    'extraLoose',
]);
const LOADING_STYLE_OPTIONS = optionify(['spinner', 'progressBar']);
const ERROR_INDENTATION_OPTIONS = optionify(['none', 'toText']);
const OPACITY_OPTIONS = optionify(['translucent', 'opaque']);
const TEXT_ALIGNMENT_OPTIONS = optionify(['start', 'center']);
const OPTION_LIST_BORDER_OPTIONS = optionify(['full', 'none', 'inner']);
const BORDER_STYLE_OPTIONS = optionify(['base', 'dotted']);
const UNDEFINED = '';
const FONT_WEIGHT_OPTIONS = optionify([
    '100',
    '200',
    '300',
    '400',
    '500',
    '600',
    '700',
    '800',
    '900',
]);
const BADGE_COLOR_OPTIONS = optionify(['subdued', 'primary']);
const COLOR_STYLE_OPTIONS = optionify(['color1', 'color2']);
const TRANSITION_DURATION_OPTIONS = optionify([
    'none',
    'fast',
    'base',
    'slow',
    'slower',
    'slowest',
]);
const DIVIDER_OPTIONS = optionify(['toContainerEdge']);
function themeWithKnobs(...picks) {
    return (storyFn) => <ThemeWithKnobs pick={picks}>{storyFn()}</ThemeWithKnobs>;
}
exports.themeWithKnobs = themeWithKnobs;
function ThemeWithKnobs({ pick = [], children }) {
    const textFields = {
        border: undefined,
        labelPosition: undefined,
        errorIndentation: undefined,
    };
    const stepper = {
        separator: true,
    };
    const selects = {
        border: undefined,
        labelPosition: undefined,
        errorIndentation: undefined,
        disclosureIconSeparator: true,
    };
    const buyerJourney = {
        spacing: undefined,
        chevronIconSeparator: true,
        numberStyle: undefined,
        typographyStyle: undefined,
    };
    const headingLevel1 = { typographyStyle: undefined };
    const headingLevel2 = { typographyStyle: undefined };
    const headingLevel3 = { typographyStyle: undefined };
    const checkbox = {
        borderRadius: undefined,
        errorIndentation: undefined,
    };
    const primaryButton = {
        style: undefined,
        border: undefined,
        borderRadius: undefined,
        blockPadding: undefined,
        inlinePadding: undefined,
        typographyStyle: undefined,
        loadingStyle: undefined,
    };
    const secondaryButton = {
        style: undefined,
        border: undefined,
        borderRadius: undefined,
        blockPadding: undefined,
        inlinePadding: undefined,
        typographyStyle: undefined,
        loadingStyle: undefined,
    };
    const formLayout = {
        spacing: undefined,
    };
    const tag = {
        borderRadius: undefined,
    };
    const tooltip = {
        borderRadius: undefined,
        opacity: undefined,
        textAlignment: undefined,
    };
    const banner = {
        border: undefined,
        borderRadius: undefined,
    };
    const thumbnail = {
        aspectRatio: 1,
        border: undefined,
        badgeBackground: undefined,
    };
    const optionList = {
        border: undefined,
        borderRadius: undefined,
        borderStyle: undefined,
        spacing: undefined,
        blockPadding: undefined,
        inlinePadding: undefined,
        typographyStyle: undefined,
    };
    const reviewBlock = {
        borderRadius: undefined,
        border: undefined,
        spacing: undefined,
        inlinePadding: undefined,
        blockPadding: undefined,
        divider: undefined,
    };
    const link = {
        transitionDuration: undefined,
        colorHovered: undefined,
        typographyStyle: undefined,
    };
    if (pick.includes('textFields')) {
        textFields.border = addon_knobs_1.select(Label.Border, BORDER_OPTIONS, textFields.border, Group.TextField);
        textFields.labelPosition = addon_knobs_1.select(Label.LabelPosition, LABEL_POSITION_OPTIONS, textFields.labelPosition, Group.TextField);
        textFields.errorIndentation = addon_knobs_1.select(Label.ErrorIndentation, ERROR_INDENTATION_OPTIONS, textFields.errorIndentation, Group.TextField);
    }
    if (pick.includes('stepper')) {
        stepper.separator = addon_knobs_1.boolean('Separator', stepper.separator, 'Stepper');
    }
    if (pick.includes('select')) {
        selects.border = addon_knobs_1.select(Label.Border, BORDER_OPTIONS, selects.border, Group.Select);
        selects.labelPosition = addon_knobs_1.select(Label.LabelPosition, LABEL_POSITION_OPTIONS, selects.labelPosition, Group.Select);
        selects.errorIndentation = addon_knobs_1.select(Label.ErrorIndentation, ERROR_INDENTATION_OPTIONS, selects.errorIndentation, Group.Select);
        selects.disclosureIconSeparator = addon_knobs_1.boolean('Separator', selects.disclosureIconSeparator, Group.Select);
    }
    if (pick.includes('buyerJourney')) {
        buyerJourney.spacing = addon_knobs_1.select(Label.Spacing, SPACING_OPTIONS, buyerJourney.spacing, Group.Breadcrumb);
        buyerJourney.chevronIconSeparator = addon_knobs_1.boolean(Breadcrumb.ChevronIconSeparator, buyerJourney.chevronIconSeparator, Group.Breadcrumb);
        buyerJourney.numberStyle = addon_knobs_1.select(Breadcrumb.NumberStyle, NUMBER_STYLE_OPTIONS, buyerJourney.numberStyle, Group.Breadcrumb);
        buyerJourney.typographyStyle = addon_knobs_1.select(Label.Style, STYLE_OPTIONS, buyerJourney.typographyStyle, Group.Breadcrumb);
    }
    if (pick.includes('checkbox')) {
        checkbox.borderRadius = addon_knobs_1.select(Label.BorderRadius, SIMPLE_BORDER_RADIUS_OPTIONS, checkbox.borderRadius, Group.Checkbox);
        checkbox.errorIndentation = addon_knobs_1.select(Label.ErrorIndentation, ERROR_INDENTATION_OPTIONS, checkbox.errorIndentation, Group.Checkbox);
    }
    if (pick.includes('banner')) {
        banner.border = addon_knobs_1.select(Label.Border, SIMPLE_BORDER_OPTIONS, banner.border, Group.Banner);
        banner.borderRadius = addon_knobs_1.select(Label.BorderRadius, BORDER_RADIUS_OPTIONS, banner.borderRadius, Group.Banner);
    }
    if (pick.includes('thumbnail')) {
        thumbnail.aspectRatio = addon_knobs_1.number('Aspect ratio', 1, { min: 0 }, Group.Thumbnail);
        thumbnail.border = addon_knobs_1.select(Label.Border, SIMPLE_BORDER_OPTIONS, thumbnail.border, Group.Thumbnail);
        thumbnail.badgeBackground = addon_knobs_1.select(Label.BadgeColor, BADGE_COLOR_OPTIONS, thumbnail.badgeBackground, Group.Thumbnail);
    }
    if (pick.includes('optionList')) {
        optionList.borderRadius = addon_knobs_1.select(Label.BorderRadius, BORDER_RADIUS_OPTIONS, optionList.borderRadius, Group.OptionList);
        optionList.border = addon_knobs_1.select(Label.Border, OPTION_LIST_BORDER_OPTIONS, optionList.border, Group.OptionList);
        optionList.borderStyle = addon_knobs_1.select('Border style', BORDER_STYLE_OPTIONS, optionList.borderStyle, Group.OptionList);
        optionList.spacing = addon_knobs_1.select(Label.Spacing, optionify(['none', 'tight', 'base']), optionList.spacing, Group.OptionList);
        optionList.blockPadding = addon_knobs_1.select(Label.BlockPadding, SPACING_OPTIONS, optionList.blockPadding, Group.OptionList);
        optionList.inlinePadding = addon_knobs_1.select(Label.InlinePadding, SPACING_OPTIONS, optionList.inlinePadding, Group.OptionList);
        optionList.typographyStyle = addon_knobs_1.select(Label.Style, STYLE_OPTIONS, optionList.typographyStyle, Group.OptionList);
    }
    if (pick.includes('reviewBlock')) {
        reviewBlock.borderRadius = addon_knobs_1.select(Label.BorderRadius, BORDER_RADIUS_OPTIONS, reviewBlock.borderRadius, Group.ReviewBlock);
        reviewBlock.border = addon_knobs_1.select(Label.Border, OPTION_LIST_BORDER_OPTIONS, reviewBlock.border, Group.ReviewBlock);
        reviewBlock.spacing = addon_knobs_1.select(Label.Spacing, optionify(['none', 'tight', 'base']), reviewBlock.spacing, Group.ReviewBlock);
        reviewBlock.blockPadding = addon_knobs_1.select(Label.BlockPadding, SPACING_OPTIONS, reviewBlock.blockPadding, Group.ReviewBlock);
        reviewBlock.inlinePadding = addon_knobs_1.select(Label.InlinePadding, SPACING_OPTIONS, reviewBlock.inlinePadding, Group.ReviewBlock);
        reviewBlock.divider = addon_knobs_1.select('Divider', DIVIDER_OPTIONS, reviewBlock.divider, Group.ReviewBlock);
    }
    if (pick.includes('headingLevel1')) {
        headingLevel1.typographyStyle = addon_knobs_1.select(Label.Style, STYLE_OPTIONS, headingLevel1.typographyStyle, Group.HeadingLevel1);
    }
    if (pick.includes('headingLevel2')) {
        headingLevel2.typographyStyle = addon_knobs_1.select(Label.Style, STYLE_OPTIONS, headingLevel2.typographyStyle, Group.HeadingLevel2);
    }
    if (pick.includes('headingLevel3')) {
        headingLevel3.typographyStyle = addon_knobs_1.select(Label.Style, STYLE_OPTIONS, headingLevel3.typographyStyle, Group.HeadingLevel3);
    }
    if (pick.includes('primaryButton')) {
        primaryButton.style = addon_knobs_1.select(Label.Style, BUTTON_STYLE_OPTIONS, primaryButton.style, Group.PrimaryButton);
        primaryButton.style = addon_knobs_1.select(Label.Border, BORDER_OPTIONS, primaryButton.border, Group.PrimaryButton);
        primaryButton.style = addon_knobs_1.select(Label.BorderRadius, BORDER_RADIUS_OPTIONS, primaryButton.borderRadius, Group.PrimaryButton);
        primaryButton.blockPadding = addon_knobs_1.select(Label.BlockPadding, SPACING_OPTIONS, primaryButton.blockPadding, Group.PrimaryButton);
        primaryButton.inlinePadding = addon_knobs_1.select(Label.InlinePadding, SPACING_OPTIONS, primaryButton.inlinePadding, Group.PrimaryButton);
        primaryButton.typographyStyle = addon_knobs_1.select(Label.TypographyStyle, STYLE_OPTIONS, primaryButton.typographyStyle, Group.PrimaryButton);
        primaryButton.loadingStyle = addon_knobs_1.select(Label.LoadingStyle, LOADING_STYLE_OPTIONS, primaryButton.loadingStyle, Group.PrimaryButton);
    }
    if (pick.includes('secondaryButton')) {
        secondaryButton.style = addon_knobs_1.select(Label.Style, BUTTON_STYLE_OPTIONS, secondaryButton.style, Group.SecondaryButton);
        secondaryButton.style = addon_knobs_1.select(Label.Border, BORDER_OPTIONS, secondaryButton.border, Group.SecondaryButton);
        secondaryButton.style = addon_knobs_1.select(Label.BorderRadius, BORDER_RADIUS_OPTIONS, secondaryButton.borderRadius, Group.SecondaryButton);
        secondaryButton.blockPadding = addon_knobs_1.select(Label.BlockPadding, SPACING_OPTIONS, secondaryButton.blockPadding, Group.SecondaryButton);
        secondaryButton.inlinePadding = addon_knobs_1.select(Label.InlinePadding, SPACING_OPTIONS, secondaryButton.inlinePadding, Group.SecondaryButton);
        secondaryButton.typographyStyle = addon_knobs_1.select(Label.TypographyStyle, STYLE_OPTIONS, secondaryButton.typographyStyle, Group.SecondaryButton);
        secondaryButton.loadingStyle = addon_knobs_1.select(Label.LoadingStyle, LOADING_STYLE_OPTIONS, secondaryButton.loadingStyle, Group.SecondaryButton);
    }
    if (pick.includes('formLayout')) {
        formLayout.spacing = addon_knobs_1.select('Spacing', SPACING_OPTIONS, formLayout.spacing, Group.FormLayout);
    }
    if (pick.includes('tag')) {
        tag.borderRadius = addon_knobs_1.select(Label.BorderRadius, BORDER_RADIUS_OPTIONS, tag.borderRadius, Group.Tag);
    }
    if (pick.includes('tooltip')) {
        tooltip.borderRadius = addon_knobs_1.select(Label.BorderRadius, BORDER_RADIUS_OPTIONS, tooltip.borderRadius, Group.Tooltip);
        tooltip.opacity = addon_knobs_1.select('Opacity', OPACITY_OPTIONS, tooltip.opacity, Group.Tooltip);
        tooltip.textAlignment = addon_knobs_1.select('Text alignment', TEXT_ALIGNMENT_OPTIONS, tooltip.textAlignment, Group.Tooltip);
    }
    if (pick.includes('link')) {
        link.transitionDuration = addon_knobs_1.select(Label.TransitionDuration, TRANSITION_DURATION_OPTIONS, link.transitionDuration, Group.Link);
        link.colorHovered = addon_knobs_1.select(Label.ColorHovered, COLOR_STYLE_OPTIONS, link.colorHovered, Group.Link);
    }
    const theme = __1.createTheme({
        textFields,
        stepper,
        select: selects,
        buyerJourney,
        headingLevel1,
        headingLevel2,
        headingLevel3,
        checkbox,
        primaryButton,
        secondaryButton,
        formLayout,
        tag,
        tooltip,
        banner,
        thumbnail,
        optionList,
        reviewBlock,
        link,
        typographyStyle1: {
            size: addon_knobs_1.select(`Size`, SIZE_OPTIONS, undefined, Group.Style),
            letterCase: addon_knobs_1.select(`Letter case`, LETTER_CASE_OPTIONS, undefined, Group.Style),
            fonts: addon_knobs_1.select(`Font`, FONT_OPTIONS, undefined, Group.Style),
            weight: addon_knobs_1.select(`Weight`, WEIGHT_OPTIONS, undefined, Group.Style),
            lineSize: addon_knobs_1.select(`Line size`, LINE_SIZE_OPTIONS, undefined, Group.Style),
            kerning: addon_knobs_1.select(`Kerning`, KERNING_OPTIONS, undefined, Group.Style),
            decoration: addon_knobs_1.select(`Decoration`, DECORATION_OPTIONS, undefined, Group.Style),
        },
        typographyScale: {
            base: addon_knobs_1.number('Base size', 14, {}, Group.Typography),
            ratio: addon_knobs_1.number('Scale ratio', 1.285, { step: 0.001 }, Group.Typography),
        },
        typographyPrimary: {
            fonts: addon_knobs_1.text('Primary font stack', "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif", Group.Typography),
            weightBase: addon_knobs_1.select('Primary font - base weight', FONT_WEIGHT_OPTIONS, undefined, Group.Typography),
            weightBold: addon_knobs_1.select('Primary font - bold weight', FONT_WEIGHT_OPTIONS, undefined, Group.Typography),
        },
        typographySecondary: {
            fonts: addon_knobs_1.text('Secondary font stack', "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif", Group.Typography),
            weightBase: addon_knobs_1.select('Secondary font - base weight', FONT_WEIGHT_OPTIONS, undefined, Group.Typography),
            weightBold: addon_knobs_1.select('Secondary font - bold weight', FONT_WEIGHT_OPTIONS, undefined, Group.Typography),
        },
        colors: {
            canvas: hsluvColorGroup('Canvas'),
            surfacePrimary: hsluvColorGroup('Surface primary'),
            surfaceSecondary: hsluvColorGroup('Surface secondary'),
            surfaceTertiary: hsluvColorGroup('Surface tertiary'),
            primaryAction: hsluvColorGroup('Primary action'),
            secondaryAction: hsluvColorGroup('Secondary action'),
            tertiaryAction: hsluvColorGroup('Tertiary action'),
            interactive: hsluvColorGroup('Interactive'),
            info: hsluvColorGroup('Info'),
            success: hsluvColorGroup('Success'),
            warning: hsluvColorGroup('Warning'),
            critical: hsluvColorGroup('Critical'),
            color1: hsluvColorGroup('Color 1'),
            color2: hsluvColorGroup('Color 2'),
        },
    });
    return <__1.Theme theme={theme}>{children}</__1.Theme>;
}
function optionify(array) {
    return array.reduce((acc, value) => (Object.assign(Object.assign({}, acc), { [value]: value })), {
        ' ': undefined,
    });
}
function toHsluv(str) {
    if (str === UNDEFINED)
        return undefined;
    const rgb = str
        .slice(5, -1)
        .split(',')
        .slice(0, 3)
        .map(Number)
        .map((num) => num / 255);
    return hsluv_1.rgbToHsluv(rgb);
}
function hsluvColor(name) {
    return toHsluv(addon_knobs_1.color(name, UNDEFINED, Group.Color));
}
function hsluvColorGroup(name) {
    return {
        background: hsluvColor(`${name} background`),
        foreground: hsluvColor(`${name} foreground`),
        accent: hsluvColor(`${name} accent`),
    };
}