<script>
import { RadioGroup } from '@components/Form/Radio';
import ArrayList from '@shell/components/form/ArrayList';
import Principal from '@shell/components/auth/Principal';
import SelectPrincipal from '@shell/components/auth/SelectPrincipal';
import { _EDIT } from '@shell/config/query-params';
import uniq from 'lodash/uniq';

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.authConfig['accessMode'] = 'restricted';
    } if (!this.authConfig.allowedPrincipalIds) {
      this.authConfig['allowedPrincipalIds'] = [];
    }
  },

  methods: {
    addPrincipal(id) {
      this.authConfig.allowedPrincipalIds = uniq([...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:value="authConfig.accessMode"
          name="accessMode"
          :mode="mode"
          :options="accessModeOptions"
        />
      </div>
      <div class="col span-6">
        <h4 v-if="accessMode!=='unrestricted'">
          <t
            k="authConfig.allowedPrincipalIds.title"
            :raw="true"
          />
        </h4>
        <ArrayList
          v-if="accessMode!=='unrestricted'"
          key="allowedPrincipalIds"
          v-model:value="authConfig.allowedPrincipalIds"
          title-key="authConfig.allowedPrincipalIds.label"
          :mode="mode"
          :protip="false"
        >
          <template #value="{row}">
            <Principal
              :value="row.value"
            />
          </template>

          <template
            v-if="authConfig.allowedPrincipalIds.length <= 1"
            #remove-button
          >
            <button
              type="button"
              disabled
              class="btn role-link bg-transparent"
            >
              {{ t('generic.remove') }}
            </button>
          </template>

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