import GlDuoWorkflowPanel from '../duo_workflow_panel/duo_workflow_panel';
import GlButton from '../../../../../base/button/button';
import GlFormGroup from '../../../../../base/form/form_group/form_group';
import GlFormTextarea from '../../../../../base/form/form_textarea/form_textarea';
import GlFormInput from '../../../../../base/form/form_input/form_input';
import { translate } from '../../../../../../utils/i18n';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

/**
 * This component has been migrated to the Duo-UI library (https://gitlab.com/gitlab-org/duo-ui).
 *
 * Please use the corresponding component in Duo-UI going forward.
 * All future development and maintenance for Duo components should take place in Duo-UI.
 *
 * For more details, see the migration epic: https://gitlab.com/groups/gitlab-org/-/epics/15344 or reach out to the Duo-Chat team in #g_duo_chat.
 */
var script = {
  name: 'GlDuoWorkflowPrompt',
  components: {
    GlDuoWorkflowPanel,
    GlButton,
    GlFormGroup,
    GlFormInput,
    GlFormTextarea
  },
  props: {
    /**
     * The prompt the user has entered
     */
    prompt: {
      type: String,
      required: false,
      default: ''
    },
    /**
     * The image to run the workflow in
     */
    image: {
      type: String,
      required: false,
      default: ''
    },
    /**
     * The text for the title of the panel
     */
    title: {
      type: String,
      required: false,
      default: translate('GlDuoWorkflowPrompt.title', 'Goal')
    },
    /**
     * The summary of the ongoing workflow plan
     */
    summary: {
      type: String,
      required: false,
      default: ''
    },
    /**
     * Whether or not the panel is loading
     */
    loading: {
      type: Boolean,
      required: false,
      default: false
    },
    /**
     * The label of the prompt text area
     *
     * See `GlFormGroup` for text placement.
     */
    promptLabel: {
      type: String,
      required: false,
      default: translate('GlDuoWorkflowPrompt.promptLabel', 'Description')
    },
    /**
     * The label description of the prompt text area
     *
     * See `GlFormGroup` for text placement.
     */
    promptLabelDescription: {
      type: String,
      required: false,
      default: translate('GlDuoWorkflowPrompt.promptLabelDescription', 'What would you like to do and how.')
    },
    /**
     * The description of the prompt text area
     *
     * See `GlFormGroup` for text placement.
     */
    promptDescription: {
      type: String,
      required: false,
      default: translate('GlDuoWorkflowPrompt.promptDescription', 'Be specific and include any requirements.')
    },
    /**
     * The HTML ID of the textarea for the prompt
     */
    promptId: {
      type: String,
      required: false,
      default: 'duo-workflow-prompt'
    },
    /**
     * The label of the image input
     */
    imageLabel: {
      type: String,
      required: false,
      default: translate('GlDuoWorkflowPrompt.imageLabel', 'Image')
    },
    /**
     * The label description of the image input
     *
     * See `GlFormGroup` for text placement.
     */
    imageLabelDescription: {
      type: String,
      required: false,
      default: translate('GlDuoWorkflowPrompt.imageLabelDescription', 'The container image to run the workflow in.')
    },
    /**
     * The description of the image input
     *
     * See `GlFormGroup` for text placement.
     */
    imageDescription: {
      type: String,
      required: false,
      default: translate('GlDuoWorkflowPrompt.imageDescription', 'It should have any tools necessary for the workflow installed.')
    },
    /**
     * The ID of the image input
     */
    imageId: {
      type: String,
      required: false,
      default: 'duo-workflow-image'
    },
    /**
     * The text for the confirmation button. This button emits a `confirm` event.
     */
    confirmButtonText: {
      type: String,
      required: false,
      default: translate('GlDuoWorkflowPrompt.confirmButtonText', 'Generate plan')
    },
    /**
     * The text for the cancellation button. This button emits a `cancel` event.
     */
    cancelButtonText: {
      type: String,
      required: false,
      default: translate('GlDuoWorkflowPrompt.cancelButtonText', 'Cancel')
    },
    /**
     * The text used as the title and aria-label for the button when the collapse is collapsed
     *
     * See `GlDuoWorkflowPanel`
     */
    expandPanelButtonTitle: {
      type: String,
      required: false,
      default: ''
    },
    /**
     * The text used as the title and aria-label for the button when the collapse is expanded
     *
     * See `GlDuoWorkflowPanel`
     */
    collapsePanelButtonTitle: {
      type: String,
      required: false,
      default: ''
    }
  },
  methods: {
    emitChange(prompt) {
      /**
       * Notify listeners about prompt change
       * @param {string} prompt The newly entered prompt
       */
      this.$emit('update:prompt', prompt);
    },
    emitImage(image) {
      /**
       * Notify listeners about image change
       * @param {string} image The newly entered image
       */
      this.$emit('update:image', image);
    },
    clickConfirm(event) {
      /**
       * Notify listeners about prompt submission
       * @param {*} event A click event
       */
      this.$emit('confirm', event);
    },
    clickCancel(event) {
      /**
       * Notify listeners about prompt submission cancellation.
       * @param {*} event A click event
       */
      this.$emit('cancel', event);
    }
  }
};

/* script */
const __vue_script__ = script;

/* template */
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-duo-workflow-panel',{attrs:{"header-icon":"issue-type-objective","expand-panel-button-title":_vm.expandPanelButtonTitle,"collapse-panel-button-title":_vm.collapsePanelButtonTitle},scopedSlots:_vm._u([{key:"title",fn:function(){return [_vm._v(_vm._s(_vm.title))]},proxy:true},{key:"subtitle",fn:function(){return [_vm._v(_vm._s(_vm.summary))]},proxy:true},{key:"content",fn:function(){return [_c('gl-form-group',{attrs:{"label":_vm.promptLabel,"label-for":_vm.promptId,"label-description":_vm.promptLabelDescription,"description":_vm.promptDescription}},[_c('gl-form-textarea',{attrs:{"id":_vm.promptId,"value":_vm.prompt,"disable":_vm.loading,"no-resize":false},on:{"input":_vm.emitChange}})],1),_vm._v(" "),_c('gl-form-group',{attrs:{"label":_vm.imageLabel,"label-for":_vm.imageId,"label-description":_vm.imageLabelDescription,"description":_vm.imageDescription}},[_c('gl-form-input',{attrs:{"id":_vm.imageId,"value":_vm.image,"disable":_vm.loading},on:{"input":_vm.emitImage}})],1),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-gap-3"},[_c('gl-button',{attrs:{"variant":"confirm","data-test-id":"duo-workflow-prompt-confirm","loading":_vm.loading},on:{"click":_vm.clickConfirm}},[_vm._v(_vm._s(_vm.confirmButtonText))]),_vm._v(" "),_c('gl-button',{attrs:{"data-test-id":"duo-workflow-prompt-cancel"},on:{"click":_vm.clickCancel}},[_vm._v(_vm._s(_vm.cancelButtonText))])],1)]},proxy:true}])})};
var __vue_staticRenderFns__ = [];

  /* style */
  const __vue_inject_styles__ = undefined;
  /* scoped */
  const __vue_scope_id__ = undefined;
  /* module identifier */
  const __vue_module_identifier__ = undefined;
  /* functional template */
  const __vue_is_functional_template__ = false;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

  
  const __vue_component__ = __vue_normalize__(
    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
    __vue_inject_styles__,
    __vue_script__,
    __vue_scope_id__,
    __vue_is_functional_template__,
    __vue_module_identifier__,
    false,
    undefined,
    undefined,
    undefined
  );

export default __vue_component__;
