<template>
  <v-row dense no-gutters>

    <v-col>
      <slot name="prepend"></slot>
    </v-col>

    <v-col cols="2">
      <v-chip v-if="value.item && !readonly"
        outlined
        label
        small
        :color="colour"
        :title="description"
      >{{name}}</v-chip>
      <v-select v-else-if="items.length && !readonly"
        label="Item"
        :items=items
        v-model="value.item"
        dense
        title="Select an item to use as a field"
      ></v-select>
    </v-col>

    <v-col>
      <v-select v-if="type == 'boolean'"
        label="Condition"
        :items="[true, false]"
        v-model="value.when"
        dense
        title="Use this configuration only when the value of this item matches the selected state. This allows the user to configure different values for true and false conditions."
      ></v-select>
    </v-col>

    <v-col>
      <v-text-field  v-if="type == 'boolean' || type == 'text'"
        class="ml-3"
        dense
        label="Value"
        v-model="value.value"
        title="This literal text will be inserted at the designated position"
      ></v-text-field>
      <v-menu v-else-if="type == 'number'"
        max-width="600"
        :close-on-content-click="false"
        offset-y
      >
        <template v-slot:activator="{ on, attrs }">
          <v-chip
            class="ml-3"
            small
            :light="$vuetify.theme.isDark"
            :dark="!$vuetify.theme.isDark"
            :color="value.scale_offset != null || value.scale_multiplier != null ? 'primary' : ''"
            :title="`Number scaling${ value.scale_offset != null ? ('\nOffset: ' + value.scale_offset) : '' }${ value.scale_multiplier != null ? ('\nMultiplier: ' + value.scale_multiplier) : ''}`"
            v-bind="attrs"
            v-on="on"
          >
            <v-icon small>mdi-ruler</v-icon>
          </v-chip>
        </template>

        <v-card rounded outlined>
          <v-card-text>
            <v-row dense no-gutters>
              <v-text-field
                type="number"
                dense
                clearable
                label="Offset"
                title="Offset the value by this amount (after scaling)"
                v-model.number="value.scale_offset"
              ></v-text-field>
            </v-row>
            <v-row dense no-gutters>
              <v-text-field
                type="number"
                dense
                clearable
                label="Scale"
                title="Mutiply the value by this amount (before scaling)"
                v-model.number="value.scale_multiplier"
              ></v-text-field>
            </v-row>
          </v-card-text>
        </v-card>
      </v-menu>
    </v-col>

    <v-col>
      <v-text-field
        class="ml-3"
        dense
        label="From"
        type="number"
        min="0"
        v-model.number="value.offset"
        :readonly="readonly"
      ></v-text-field>
    </v-col>

    <v-col>
      <v-text-field
        class="ml-3"
        dense
        label="Length"
        type="number"
        min="0"
        v-model.number="value.length"
        :readonly="readonly"
      ></v-text-field>
    </v-col>

    <v-col>
      <v-menu v-if="value.length > 1"
        max-width="600"
        :close-on-content-click="false"
        offset-y
        :disabled="!(value.length>1)"
      >
        <template v-slot:activator="{ on, attrs }">
          <v-chip
            class="ml-3"
            small
            :light="$vuetify.theme.isDark"
            :dark="!$vuetify.theme.isDark"
            title="Text alignment"
            v-bind="attrs"
            v-on="on"
            :disabled="!(value.length>1)"
          >
            <v-icon small v-if="value.pad_side=='right'">mdi-format-align-left</v-icon>
            <v-icon small v-else-if="value.pad_side=='left'">mdi-format-align-right</v-icon>
            <v-icon small v-else>mdi-format-align-justify</v-icon>
          </v-chip>
        </template>

        <v-card rounded outlined>
          <v-card-text>
            <v-row dense no-gutters>
              <v-select
                label="Alignment"
                clearable
                :items='[{text:"Left", value:"right"}, {text:"Right", value:"left"}]'
                v-model="value.pad_side"
              ></v-select>
            </v-row>
            <v-row dense no-gutters v-if="value.pad_side">
              <v-text-field
                dense
                label="Pad character"
                title="Fill the width of the field on the opposite side by padding with this character"
                v-model="value.pad_string"
              ></v-text-field>
            </v-row>
          </v-card-text>
        </v-card>
      </v-menu>
    </v-col>

    <v-col>
      <slot name="append"></slot>
    </v-col>

  </v-row>

</template>

<style scoped>

.input {
  flex: 1 1 auto;
  line-height: 20px;
  padding: 8px 0 8px;
  min-height: 32px;
  max-height: 32px;
  max-width: 100%;
  min-width: 0px;
  width: 100%;
}

.input >>> .chunk {
  padding-inline: 1px;
  border: 1px solid;
}

.input >>> .chunk-empty {
  padding-inline: 1px;
}

.input >>> .chunk-overlap {
  padding-inline: 1px;
  border: 1px solid grey;
  color: grey;
}
</style>

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

  components: {
  },

  props: {
    value: Object,
    properties: Object,
    colour: String,
    readonly: Boolean,
  },

  data () {
    return {
    }
  },

  watch: {
    "value.value": function (value, old) {
      if (value != null && String(value).length > this.value.length) {
        this.value.length = String(value).length;
      }
    }
  },

  computed: {

    field: {
      get () {
        return this.value;
      },
      set (v) {
        console.log("input", v);
        this.$emit("input", v);
      }
    },

    item () {
      return this.properties?.[this.value?.item] ?? {};
    },

    items () {
      return Object.entries(this.properties).map(i => ({text: i[1].summary ?? i[0], value: i[0]}))
    },

    name () {
      // TODO Use properties[item].summary or similar
      return this.item?.summary ?? this.value.item ?? "???";
    },

    type () {
      return this.item?.type ?? typeof this.value?.item ?? "undefined";
    },

    description () {
      return this.item?.description;
    }
  },

  methods: {
    reset () {
    }
  },

  mounted () {
    this.reset();
  }

}
</script>
