<script>
import { _VIEW } from '@/config/query-params';
import ArrayList from '@/components/form/ArrayList';
import LabeledInput from '@/components/form/LabeledInput';
import LabeledSelect from '@/components/form/LabeledSelect';

const OPERATOR_VALUES = {
  IS_SET:      'Exists',
  IS_NOT_SET:  'DoesNotExist',
  IN_LIST:     'In',
  NOT_IN_LIST: 'NotIn'
};

export default {
  components: {
    ArrayList,
    LabeledInput,
    LabeledSelect
  },

  props: {
    value: {
      type:    Array,
      default: null
    },
    mode: {
      type:    String,
      default: _VIEW
    },
    addLabel: {
      type:     String,
      required: true
    }
  },

  data() {
    return {
      operatorOptions: [
        {
          label: 'is set',
          value: OPERATOR_VALUES.IS_SET,
        },
        {
          label: 'is not set',
          value: OPERATOR_VALUES.IS_NOT_SET,
        },
        {
          label: 'in list',
          value: OPERATOR_VALUES.IN_LIST,
        },
        {
          label: 'not in list',
          value: OPERATOR_VALUES.NOT_IN_LIST,
        }
      ],
      optionsWithValueDisabled: [
        OPERATOR_VALUES.IS_SET,
        OPERATOR_VALUES.IS_NOT_SET
      ]
    };
  },

  computed: {
    localValue: {
      get() {
        return this.value;
      },
      set(localValue) {
        this.$emit('input', localValue);
      }
    },
    defaultAddValue() {
      return {
        key:      '',
        operator: OPERATOR_VALUES.IS_SET,
      };
    }
  },

  methods: {
    onOperatorInput(scope, operator) {
      scope.row.value.operator = operator;
      if (this.optionsWithValueDisabled.includes(operator)) {
        if (scope.row.value.values) {
          delete scope.row.value.values;
        }
      } else {
        scope.row.value.values = scope.row.value.values || [];
      }
      scope.queueUpdate();
    },

    isValueDisabled(scope) {
      return this.optionsWithValueDisabled.includes(scope.row.value.operator);
    },
    getValue(scope) {
      return scope.row.value.values?.join(',') || '';
    },
    onValueInput(scope, rawValue) {
      scope.row.value.values = rawValue.split(',')
        .map(entry => entry.trim());
      scope.queueUpdate();
    }
  },
};
</script>

<template>
  <div class="rule-selector" :class="{[mode]: true}">
    <ArrayList
      v-model="localValue"
      :protip="false"
      :show-header="true"
      :add-label="addLabel"
      :default-add-value="defaultAddValue"
      :mode="mode"
    >
      <template v-slot:column-headers>
        <div class="box">
          <div>
            Key
          </div>
          <div>
            Operator
          </div>
          <div>
            Value
          </div>
          <div> </div>
        </div>
      </template>
      <template v-slot:columns="scope">
        <div class="key">
          <LabeledInput v-model="scope.row.value.key" :mode="mode" @input="scope.queueUpdate" />
        </div>
        <div class="operator">
          <LabeledSelect
            style="height: 100%;"
            :mode="mode"
            :value="scope.row.value.operator"
            :options="operatorOptions"
            @input="onOperatorInput(scope, $event)"
          />
        </div>
        <div class="value col span-4">
          <LabeledInput :disabled="isValueDisabled(scope)" :value="getValue(scope)" :mode="mode" @input="onValueInput(scope, $event)" />
        </div>
      </template>
    </ArrayList>
  </div>
</template>

<style lang="scss">
.rule-selector {
  &:not(.view) table {
    table-layout: initial;
  }

  .box {

    & > * {
      width: 33.333%;
      padding-right: 10px;

      &:nth-child(2), &:nth-child(4) {
        width:16.155%;
      }
    }

    .key, .value {
      input {
        height: 33px;
      }
    }

    .operator {
      .vs__dropdown-toggle {
        height: 59px;
      }
    }

    .vs--open {
      .vs__dropdown-toggle {
        padding: 18px 0;
      }

      .labeled-input {
        display: none;
      }
    }

    .vs__dropdown-toggle {
      padding: 3px 0;
    }
  }
}
</style>
