<template>
  <v-card>
    <v-card-title v-text="title"></v-card-title>
    <v-card-subtitle v-text="subtitle"></v-card-subtitle>
    <v-card-text>
      <v-form>
        <v-text-field
          class="mb-5"
          label="Regular expression"
          v-model="regex"
          persistent-hint
          hint="Regular expression"
        >
        </v-text-field>

        <fieldset class="pa-3 mb-5">
          <legend>Captures</legend>

          <v-text-field v-for="(item, index) in captures" :key="index"
            v-model="captures[index]"
          >
            <v-btn slot="append-outer"
              fab
              x-small text
              dark
              color="red"
              title="Remove"
              @click="() => captures.splice(index, 1)"
            >
              <v-icon>mdi-minus</v-icon>
            </v-btn>
          </v-text-field>
          <v-btn
            class="mx-2"
            fab dark
            x-small text
            color="primary"
            title="Add capture"
            @click="() => captures.push('')"
          >
            <v-icon dark>mdi-plus</v-icon>
          </v-btn>
        </fieldset>

        <v-text-field
          class="mb-5"
          label="Flags"
          v-model="flags"
          persistent-hint
          hint="Regular expression modifier flags"
        >
        </v-text-field>
      </v-form>
    </v-card-text>
  </v-card>
</template>

<style scoped>
.sample {
  font-family: mono;
  white-space: pre;
}
</style>

<script>
export default {
  name: "DougalProjectSettingsRegexPatternCaptures",

  props: [ "value", "title", "subtitle" ],

  data () {
    return {
      regex: "",
      flags: "",
      captures: []
    }
  },

  watch: {
    value (newValue) {
      this.reset();
    },

    regex () {
      this.save();
    },

    flags () {
      this.save();
    },

    captures () {
      this.save();
    }
  },

  methods: {

    reset () {

      this.regex = this.value?.regex;
      this.flags = this.value?.flags;
      this.captures = this.value?.captures ?? [];
    },

    save () {
      this.$emit('input', {regex: this.regex, flags: this.flags, captures: this.captures});
    },

  },

  mounted () {
    this.reset();
  }

}
</script>
