<script>
import RadioGroup from '@/components/form/RadioGroup';
import ArrayList from '@/components/form/ArrayList';
import Principal from '@/components/auth/Principal';
import SelectPrincipal from '@/components/auth/SelectPrincipal';
import { _EDIT } from '@/config/query-params';
import { addObject } from '@/utils/array';

export default {
  components: {
    SelectPrincipal,
    ArrayList,
    RadioGroup,
    Principal,
  },

  props: {
    provider: {
      type:     String,
      required: true,
    },

    authConfig: {
      type:     Object,
      required: true,
    },

    mode: {
      type:    String,
      default: _EDIT,
    },
  },

  computed: {
    accessModeOptions() {
      return ['unrestricted', 'restricted', 'required'].map((k) => {
        return {
          label: this.t(`authConfig.accessMode.${ k }`, { provider: this.authConfig.nameDisplay }),
          value: k,
        };
      });
    },

    accessMode() {
      return this.authConfig?.accessMode;
    }
  },

  created() {
    if ( !this.authConfig.accessMode ) {
      this.$set(this.authConfig, 'accessMode', 'restricted');
    }
  },

  methods: {
    addPrincipal(id) {
      addObject(this.authConfig.allowedPrincipalIds, id);
    },
  }
};
</script>

<template>
  <div>
    <h3>{{ t('authConfig.accessMode.label', {provider: authConfig.nameDisplay}) }}</h3>

    <div class="row">
      <div class="col span-6">
        <RadioGroup
          v-model="authConfig.accessMode"
          name="accessMode"
          :mode="mode"
          :options="accessModeOptions"
        />
      </div>
      <div class="col span-6">
        <ArrayList
          v-if="accessMode!=='unrestricted'"
          key="allowedPrincipalIds"
          v-model="authConfig.allowedPrincipalIds"
          title-key="authConfig.allowedPrincipalIds.label"
          :mode="mode"
          :protip="false"
        >
          <template #value="{row}">
            <Principal :key="row.value" :value="row.value" />
          </template>

          <template #add>
            <SelectPrincipal :mode="mode" @add="addPrincipal" />
          </template>
        </ArrayList>
      </div>
    </div>
  </div>
</template>
