"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.UITranslationInput = void 0;
const react_1 = __importStar(require("react"));
const UIInput_1 = require("../UIInput");
const Icons_1 = require("../Icons");
const UITranslationButton_1 = require("./UITranslationButton");
const UITranslationButton_types_1 = require("./UITranslationButton.types");
const UITranslationUtils_1 = require("./UITranslationUtils");
const defaults_1 = require("./defaults");
const UIFormattedText_1 = require("./UIFormattedText");
/**
 * Method returns suggestion object with message and tooltip based on passed translation button props.
 *
 * @param props Properties of translation input component.
 * @returns Translation suggestion object.
 */
const getTranslationSuggestion = (props) => {
    const { value = '', allowedPatterns, entries, strings = defaults_1.defaultTranslationInputStrings, namingConvention = UITranslationButton_types_1.TranslationKeyGenerator.CamelCase, defaultPattern, i18nPrefix, allowedI18nPrefixes } = props;
    const i18nKey = (0, UITranslationUtils_1.extractI18nKey)(value, allowedPatterns, allowedI18nPrefixes || [i18nPrefix]);
    let message = '';
    let tooltip = '';
    let suggest;
    if (i18nKey) {
        // There is already i18n binding as value
        const entry = (0, UITranslationUtils_1.getTranslationByKey)(entries, i18nKey);
        if (entry) {
            tooltip = strings.i18nEntryExistsTooltip;
            suggest = {
                entry,
                type: UITranslationButton_types_1.SuggestValueType.Existing,
                icon: Icons_1.UiIcons.WorldArrow
            };
        }
        else {
            message = strings.i18nKeyMissingDescription;
            tooltip = strings.i18nKeyMissingTooltip;
            suggest = {
                entry: {
                    key: {
                        value: i18nKey
                    },
                    value: {
                        value: i18nKey
                    }
                },
                type: UITranslationButton_types_1.SuggestValueType.New,
                icon: Icons_1.UiIcons.WorldWarning
            };
        }
    }
    else {
        // Use generation format passed from outside or use default as 'Standard';
        const existingEntry = (0, UITranslationUtils_1.getTranslationByText)(entries, value);
        if (existingEntry) {
            message = strings.i18nReplaceWithExistingDescription;
            tooltip = strings.i18nReplaceWithExistingTooltip;
            suggest = {
                entry: existingEntry,
                type: UITranslationButton_types_1.SuggestValueType.Update
            };
        }
        else {
            message = strings.i18nValueMissingDescription;
            tooltip = strings.i18nValueMissingTooltip;
            const key = (0, UITranslationUtils_1.generateI18nKey)(value, namingConvention, entries);
            suggest = {
                entry: {
                    key: {
                        value: key
                    },
                    value: {
                        value
                    }
                },
                type: UITranslationButton_types_1.SuggestValueType.New
            };
        }
    }
    // I18n string to apply for input value
    suggest.i18n = (0, UITranslationUtils_1.applyI18nPattern)(suggest.entry.key.value, defaultPattern, i18nPrefix);
    // Format message to show in callout
    const messageValues = {
        key: suggest.entry.key.value,
        value: suggest.entry.value.value,
        i18n: suggest.i18n
    };
    tooltip = (0, UIFormattedText_1.formatText)(tooltip, messageValues);
    return {
        message: (react_1.default.createElement(UIFormattedText_1.UIFormattedText, { values: messageValues, className: "ui-translatable__message__text" }, message)),
        tooltip,
        suggest
    };
};
/**
 * Generates the CSS class names for the translation input component.
 *
 * @param props - Component props containing styling options.
 * @returns A string containing the computed class names.
 */
const getClassNames = (props) => {
    const { className, invertedCalloutTheme } = props;
    let classNames = ' ui-translatable__input';
    // Custom external classes
    if (className) {
        classNames += ` ${className}`;
    }
    if (invertedCalloutTheme) {
        classNames += ` ui-translatable--inverted`;
    }
    return classNames;
};
/**
 * Component to render translation input with button to provide helper callout with i18n generation option.
 *
 * @param props Component properties.
 * @returns Component to render translation input.
 */
const UITranslationInput = (props) => {
    const { id, onChange, value, allowedPatterns, defaultPattern, entries, busy, i18nPrefix, allowedI18nPrefixes, namingConvention, onCreateNewEntry, onShowExistingEntry, disabled, strings, invertedCalloutTheme } = props;
    const suggestion = getTranslationSuggestion(props);
    const classNames = getClassNames(props);
    const onUpdateValue = (0, react_1.useCallback)((newValue) => {
        onChange?.({}, newValue);
    }, [onChange]);
    // Generate DOM id for i18n button
    let buttonId = `${id}-i18n`;
    let title = props.title;
    if (suggestion.suggest?.type === UITranslationButton_types_1.SuggestValueType.Existing && strings?.i18nEntryExistsInputTooltip) {
        // Change DOM id with additional suffix
        buttonId += '-navigate';
        if (!title) {
            title = (0, UIFormattedText_1.formatText)(strings.i18nEntryExistsInputTooltip, {
                value: value || '',
                translation: suggestion.suggest.entry.value.value
            });
        }
    }
    const onRenderSuffix = (0, react_1.useCallback)(() => {
        return (react_1.default.createElement(UITranslationButton_1.UITranslationButton, { id: buttonId, value: value, busy: busy, onCreateNewEntry: onCreateNewEntry, onShowExistingEntry: onShowExistingEntry, onUpdateValue: onUpdateValue, disabled: disabled, strings: strings, suggestion: suggestion, invertedCalloutTheme: invertedCalloutTheme }));
    }, [
        value,
        allowedPatterns,
        defaultPattern,
        entries,
        busy,
        disabled,
        i18nPrefix,
        allowedI18nPrefixes,
        namingConvention,
        onCreateNewEntry,
        onShowExistingEntry,
        onUpdateValue
    ]);
    const onRenderInput = (0, react_1.useCallback)((props, defaultRender) => {
        if (defaultRender) {
            return (react_1.default.createElement("div", { className: "ui-translatable__field", title: title }, defaultRender({ ...props, title: undefined })));
        }
        return null;
    }, [title]);
    return (react_1.default.createElement(UIInput_1.UITextInput, { ...props, onRenderSuffix: value?.trim() ? onRenderSuffix : undefined, className: classNames, onRenderInput: onRenderInput }));
};
exports.UITranslationInput = UITranslationInput;
exports.UITranslationInput.defaultProps = {
    strings: defaults_1.defaultTranslationInputStrings
};
//# sourceMappingURL=UITranslationInput.js.map