<script>
import { GlForm, GlFormGroup, GlFormInput, GlFormTextarea } from '@gitlab/ui';
import MarkdownField from '~/vue_shared/components/markdown/field.vue';
import { s__, __ } from '~/locale';

export default {
  components: {
    GlForm,
    GlFormGroup,
    GlFormInput,
    GlFormTextarea,
    MarkdownField,
  },
  props: {
    markdownDocsPath: {
      type: String,
      required: true,
    },
    markdownPreviewPath: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      isSubmitting: false,
      form: {
        vulnerabilityName: '',
        vulnerabilityDesc: '',
      },
    };
  },
  i18n: {
    title: s__('VulnerabilityManagement|Add vulnerability finding'),
    description: s__(
      'VulnerabilityManagement|Manually add a vulnerability entry into the vulnerability report.',
    ),
    form: {
      vulnerabilityName: {
        label: __('Name'),
        description: s__(
          'VulnerabilityManagement|Vulnerability name or type. Ex: Cross-site scripting',
        ),
      },
      vulnerabilityDesc: {
        label: __('Description'),
        description: s__(
          'VulnerabilityManagement|Summary, detailed description, steps to reproduce, etc.',
        ),
      },
    },
  },
};
</script>

<template>
  <div>
    <header class="gl-my-4 gl-border-b-gray-100 gl-border-b-solid gl-border-b-1">
      <h2 class="gl-mt-0 gl-mb-3">
        {{ $options.i18n.title }}
      </h2>
      <p data-testid="page-description">
        {{ $options.i18n.description }}
      </p>
    </header>
    <gl-form class="gl-p-4 gl-w-85p" @submit.prevent>
      <gl-form-group
        :label="$options.i18n.form.vulnerabilityName.label"
        :description="$options.i18n.form.vulnerabilityName.description"
        label-for="form-vulnerability-name"
        class="gl-mb-6"
      >
        <gl-form-input
          id="form-vulnerability-name"
          v-model="form.vulnerabilityName"
          class="gl-mb-2"
          type="text"
        />
      </gl-form-group>
      <gl-form-group
        :label="$options.i18n.form.vulnerabilityDesc.label"
        label-for="form-vulnerability-desc"
      >
        <div
          class="gl-border-solid gl-border-gray-100 gl-border-1 gl-pt-3 gl-pb-5 gl-px-3 gl-rounded-base"
        >
          <markdown-field
            ref="markdownField"
            :can-attach-file="false"
            :add-spacing-classes="false"
            :markdown-preview-path="markdownPreviewPath"
            :markdown-docs-path="markdownDocsPath"
            :textarea-value="form.vulnerabilityDesc"
            :is-submitting="isSubmitting"
          >
            <template #textarea>
              <gl-form-textarea
                id="form-vulnerability-desc"
                v-model="form.vulnerabilityDesc"
                rows="8"
                class="gl-shadow-none! gl-px-0! gl-py-4! gl-h-auto!"
                :aria-label="$options.i18n.form.vulnerabilityDesc.description"
                :placeholder="$options.i18n.form.vulnerabilityDesc.description"
              />
            </template>
          </markdown-field>
        </div>
      </gl-form-group>
    </gl-form>
  </div>
</template>
