<script>
import Card from '@/components/Card';
import AsyncButton from '@/components/AsyncButton';
import Banner from '@/components/Banner';

import RadioGroup from '@/components/form/RadioGroup';
import Select from '@/components/form/Select';

import { get } from '@/utils/object';
import { exceptionToErrorsArray } from '@/utils/error';

export default {
  components: {
    Select,
    RadioGroup,
    Card,
    AsyncButton,
    Banner
  },

  props: {
    resources: {
      type:     Array,
      required: true
    }
  },

  data() {
    return {
      selectedService: '', allServices: true, errors: []
    };
  },

  computed:   {
    cluster() {
      return this.resources?.[0];
    },

    serviceOptions() {
      const schema = this.$store.getters['rancher/schemaFor']('rotatecertificateinput');

      return get(schema, 'resourceFields.services.options') || [];
    },

    actionParams() {
      if (this.allServices) {
        return {
          services:       null,
          caCertificates: false,
        };
      } else {
        return {
          services:       this.selectedService,
          caCertificates: false,
        };
      }
    }
  },

  mounted() {
    this.selectedService = this.serviceOptions[0] || '';
  },

  methods: {
    close() {
      this.$emit('close');
    },

    async rotate(buttonDone) {
      const cluster = this.cluster.mgmt;
      const params = this.actionParams;

      try {
        await cluster.doAction('rotateCertificates', params);
        buttonDone(true);
        this.close();
      } catch (err) {
        this.errors = exceptionToErrorsArray(err);
        buttonDone(false);
      }
    }
  }
};
</script>

<template>
  <Card class="prompt-rotate" :show-highlight-border="false" :style="{'height':'100%'}">
    <template #title>
      <h3>{{ t('cluster.rotateCertificates.modalTitle') }}</h3>
    </template>
    <template #body>
      <Banner v-for="(error, i) in errors" :key="i" class="" color="error" :label="error" />
      <div class="options">
        <RadioGroup v-model="allServices" name="service-mode" :options="[{value: true,label:t('cluster.rotateCertificates.allServices')}, {value: false, label:t('cluster.rotateCertificates.selectService')}]" />
        <Select v-model="selectedService" :options="serviceOptions" class="service-select" :class="{'invisible': allServices}" />
      </div>
    </template>
    <div slot="actions" class="buttons">
      <button class="btn role-secondary mr-20" @click="close">
        {{ t('generic.cancel') }}
      </button>
      <AsyncButton mode="rotate" :disabled="!allServices && !selectedService" @click="rotate" />
    </div>
  </Card>
</template>

<style lang='scss' scoped>
  .prompt-rotate {
    margin: 0;
  }
  .buttons {
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }
  .options {
    display: flex;
    flex-direction: column;

    .service-select {
      margin-left: 20px;
      margin-top: 10px;
      width: fit-content;
      min-width: 260px;
    }
  }

.rotate-modal ::v-deep.v--modal-box{
  border:none;

  & .card-container{
    margin: 0;

    & .card-wrap {
      display:flex;
      flex-direction:column;
    }

    & .card-body {
      flex: 1;
    }

    & .card-actions{
      align-self: center
    };
  }
}
</style>
