const TTYG_DEFAULT_TITLE = 'menu.ttyg.label';
const CONFIGURE_TEMPERATURE_INFO = 'guide.step_plugin.configure-temperature.info';

/**
 * @name configure-temperature
 * @memberof module:Interactive Guide
 *
 * @description
 * This step guides the user to configure the sampling temperature setting for the TTYG agent.
 * It highlights the sampling temperature control element and provides instructions on how to set it.
 *
 * Configure sampling temperature<br>
 * <img src="resources/guides/ttyg/configure-temperature.png" style="height:200px; border: solid; border-width:1px"/><br>
 *
 * This step can be configured using the common options defined in [Options](#.Options). Additionally it supports:
 *
 * @property {number} options.temperature - The temperature value to set, typically between 0 and 2.
 *
 * @example
 * ```JSON
 * {
 *  "guideBlockName": "configure-temperature",
 *  "options": {
 *    "temperature": 0.7
 *  }
 * }
 * ```
 */
const step = {
  guideBlockName: 'configure-temperature',
  getSteps: function(options, pluginService) {
    const GuideUtils = pluginService.GuideUtils;
    const translate = pluginService.translate;

    const elementSelector = GuideUtils.getGuideElementSelector('temperature-control');
    const inputSelector = GuideUtils.getGuideElementSelector('temperature-control-input');

    return {
      guideBlockName: 'focus-element',
      options: {
        url: 'ttyg',
        elementSelector,
        placement: 'bottom',
        class: 'configure-temperature',
        content: translate(this.translationBundle, CONFIGURE_TEMPERATURE_INFO, {temperature: options.temperature}),
        onNextValidate: () => Promise.resolve(GuideUtils.validateTextInput(inputSelector, options.temperature)),
        ...(options.title ?? {title: translate(this.translationBundle, TTYG_DEFAULT_TITLE)}),
        ...options
      }
    };
  },
  translationBundle: {
    en: {
      [TTYG_DEFAULT_TITLE]: 'Talk to Your Graph',
      [CONFIGURE_TEMPERATURE_INFO]: 'Sets the sampling temperature of the agent. Lower values result in more consistent, repetitive responses generated by the agent and higher values result in a wider variety of responses. This takes a value between 0 and 2, but values higher than 1 may result in unreliable and unpredictable answers and are not recommended.<br>Set slider to <b>{{temperature}}</b>'
    },
    fr: {
      [TTYG_DEFAULT_TITLE]: 'Parlez à votre graphe',
      [CONFIGURE_TEMPERATURE_INFO]: 'Définit la température d\'échantillonnage de l\'agent. Des valeurs plus faibles donnent des réponses plus cohérentes et répétitives générées par l\'agent et des valeurs plus élevées donnent une plus grande variété de réponses. Cela prend une valeur entre 0 et 2, mais des valeurs supérieures à 1 peuvent donner des réponses peu fiables et imprévisibles et ne sont pas recommandées.<br>Réglez le curseur sur <b>{{temperature}}</b>'
    }
  }
};

export function register(registry) {
  registry.add('guide.step', step);
}