<commit_before><template>
  <div class="gobierto-data-sql-editor-container-save">
    <!--  only show if label name is set OR the prompt is visible  -->
    <template v-if="isSavingPromptVisible || labelValue">
      <input
        ref="inputText"
        v-model="labelValue"
        :placeholder="placeholder"
        type="text"
        class="gobierto-data-sql-editor-container-save-text"
        @keydown.stop="onKeyDownTextHandler"
      >
    </template>

    <!-- only show checkbox on prompt visible -->
    <template v-if="isSavingPromptVisible">
      <label
        :for="labelPrivate"
        class="gobierto-data-sql-editor-container-save-label"
      >
        <input
          :id="labelPrivate"
          :checked="isPrivate"
          type="checkbox"
          @input="onInputCheckboxHandler"
        >
        {{ labelPrivate }}
      </label>
    </template>

    <!-- only show if label name is set OR the prompt is visible -->
    <template v-if="isSavingPromptVisible || labelValue">
      <PrivateIcon
        :is-closed="isPrivate"
        :style="{ paddingRight: '.5em', margin: 0 }"
      />
    </template>

    <template v-if="isQueryModified">
      <div class="gobierto-data-sql-editor-modified-label-container">
        <span class="gobierto-data-sql-editor-modified-label">
          {{ labelModifiedQuery }}
        </span>
      </div>
    </template>

    <!-- show edit button if there's no prompt but some name, otherwise, save button -->
    <Button
      :text="labelSave"
      :style="
        isSavingPromptVisible
          ? 'color: #fff; background-color: var(--color-base)'
          : 'color: var(--color-base); background-color: rgb(255, 255, 255);'
      "
      :disabled="!enabledSavedButton"
      icon="save"
      color="var(--color-base)"
      background="#fff"
      class="btn-sql-editor"
      @click.native="onClickSaveHandler"
    />

    <!-- only show cancel button on prompt visible -->
    <template v-if="showRevertQuery">
      <Button
        :text="labelRevert"
        :disabled="!enabledSavedButton"
        icon="undo"
        class="btn-sql-editor btn-sql-editor-revert"
        color="var(--color-base)"
        background="#fff"
        @click.native="revertQuery"
      />
    </template>
  </div>
</template>
<script>
import Button from "./Button.vue";
import PrivateIcon from "./PrivateIcon.vue";

export default {
  name: 'SavingDialog',
  components: {
    Button,
    PrivateIcon
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    labelSave: {
      type: String,
      default: ''
    },
    isQueryModified: {
      type: Boolean,
      default: false
    },
    enabledSavedButton: {
      type: Boolean,
      default: false
    },
    showRevertQuery: {
      type: Boolean,
      default: false
    },
    showPrivate: {
      type: Boolean,
      default: false
    },
    disabledInputSaved: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isPrivate: false,
      isSavingPromptVisible: false,
      labelValue: this.value,
      labelPrivate: I18n.t('gobierto_data.projects.private') || "",
      labelCancel: I18n.t('gobierto_data.projects.cancel') || "",
      labelEdit: I18n.t("gobierto_data.projects.edit") || "",
      labelRevert: I18n.t("gobierto_data.projects.revert") || "",
      labelModifiedQuery: I18n.t("gobierto_data.projects.modifiedQuery") || ""
    }
  },
  watch: {
    value(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.labelValue = newValue
      }
    },
    $route(to, from) {
      if (to.path !== from.path) {
        this.isSavingPromptVisible = false
      }
    },
    showPrivate(newValue) {
      this.isPrivate = newValue ? true : false
    },
    disabledInputSaved(newValue, oldValue) {
      console.log("disabledInputSaved -> oldValue", oldValue)
      console.log("disabledInputSaved -> newValue", newValue)
      if (newValue !== oldValue) {
        this.isSavingPromptVisible = false
      }
    }
  },
  methods: {
    onClickSaveHandler() {
      if (!this.isSavingPromptVisible) {
        this.isSavingPromptVisible = true
        this.$nextTick(() => this.$refs.inputText.focus());
      } else {
        // the output is the content of the input plus the private flag
        this.$emit('save', { name: this.labelValue, privacy: this.isPrivate })

        this.isSavingPromptVisible = false
        this.$root.$emit('disabledSavedButton')
        this.$root.$emit("resetToInitialState");
      }
    },
    onKeyDownTextHandler(event) {
      const { value } = event.target
      this.labelValue = value<commit_msg>remove watcher<commit_after><template>
  <div class="gobierto-data-sql-editor-container-save">
    <!--  only show if label name is set OR the prompt is visible  -->
    <template v-if="isSavingPromptVisible || labelValue">
      <input
        ref="inputText"
        v-model="labelValue"
        :placeholder="placeholder"
        type="text"
        class="gobierto-data-sql-editor-container-save-text"
        @keydown.stop="onKeyDownTextHandler"
      >
    </template>

    <!-- only show checkbox on prompt visible -->
    <template v-if="isSavingPromptVisible">
      <label
        :for="labelPrivate"
        class="gobierto-data-sql-editor-container-save-label"
      >
        <input
          :id="labelPrivate"
          :checked="isPrivate"
          type="checkbox"
          @input="onInputCheckboxHandler"
        >
        {{ labelPrivate }}
      </label>
    </template>

    <!-- only show if label name is set OR the prompt is visible -->
    <template v-if="isSavingPromptVisible || labelValue">
      <PrivateIcon
        :is-closed="isPrivate"
        :style="{ paddingRight: '.5em', margin: 0 }"
      />
    </template>

    <template v-if="isQueryModified">
      <div class="gobierto-data-sql-editor-modified-label-container">
        <span class="gobierto-data-sql-editor-modified-label">
          {{ labelModifiedQuery }}
        </span>
      </div>
    </template>

    <!-- show edit button if there's no prompt but some name, otherwise, save button -->
    <Button
      :text="labelSave"
      :style="
        isSavingPromptVisible
          ? 'color: #fff; background-color: var(--color-base)'
          : 'color: var(--color-base); background-color: rgb(255, 255, 255);'
      "
      :disabled="!enabledSavedButton"
      icon="save"
      color="var(--color-base)"
      background="#fff"
      class="btn-sql-editor"
      @click.native="onClickSaveHandler"
    />

    <!-- only show cancel button on prompt visible -->
    <template v-if="showRevertQuery">
      <Button
        :text="labelRevert"
        :disabled="!enabledSavedButton"
        icon="undo"
        class="btn-sql-editor btn-sql-editor-revert"
        color="var(--color-base)"
        background="#fff"
        @click.native="revertQuery"
      />
    </template>
  </div>
</template>
<script>
import Button from "./Button.vue";
import PrivateIcon from "./PrivateIcon.vue";

export default {
  name: 'SavingDialog',
  components: {
    Button,
    PrivateIcon
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    labelSave: {
      type: String,
      default: ''
    },
    isQueryModified: {
      type: Boolean,
      default: false
    },
    enabledSavedButton: {
      type: Boolean,
      default: false
    },
    showRevertQuery: {
      type: Boolean,
      default: false
    },
    showPrivate: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isPrivate: false,
      isSavingPromptVisible: false,
      labelValue: this.value,
      labelPrivate: I18n.t('gobierto_data.projects.private') || "",
      labelCancel: I18n.t('gobierto_data.projects.cancel') || "",
      labelEdit: I18n.t("gobierto_data.projects.edit") || "",
      labelRevert: I18n.t("gobierto_data.projects.revert") || "",
      labelModifiedQuery: I18n.t("gobierto_data.projects.modifiedQuery") || ""
    }
  },
  watch: {
    value(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.labelValue = newValue
      }
    },
    $route(to, from) {
      if (to.path !== from.path) {
        this.isSavingPromptVisible = false
      }
    },
    showPrivate(newValue) {
      this.isPrivate = newValue ? true : false
    }
  },
  methods: {
    onClickSaveHandler() {
      if (!this.isSavingPromptVisible) {
        this.isSavingPromptVisible = true
        this.$nextTick(() => this.$refs.inputText.focus());
      } else {
        // the output is the content of the input plus the private flag
        this.$emit('save', { name: this.labelValue, privacy: this.isPrivate })

        this.isSavingPromptVisible = false
        this.$root.$emit('disabledSavedButton')
        this.$root.$emit("resetToInitialState");
      }
    },
    onKeyDownTextHandler(event) {
      const { value } = event.target
      this.labelValue = value
{'fraction_non_alphanumeric': 0.14090407938257993, 'fraction_numerical': 0.004630650496141125, 'mean_word_length': 2.2735474557921327, 'pattern_counts': {'":': 0, '<': 65, '<?xml version=': 0, '>': 69, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6962321', 'n_tokens_mistral': 2810, 'n_tokens_neox': 2761, 'n_words': 528}