<script>

import LabeledInput from '@/components/form/LabeledInput';
import Checkbox from '@/components/form/Checkbox';
import { _EDIT } from '@/config/query-params';
import { importMachineConfig } from '@/utils/dynamic-importer';
import Taints from '@/components/form/Taints.vue';
import KeyValue from '@/components/form/KeyValue.vue';
import AdvancedSection from '@/components/AdvancedSection.vue';
import { randomStr } from '@/utils/string';

export default {

  components: {
    LabeledInput,
    Checkbox,
    Taints,
    KeyValue,
    AdvancedSection,
  },

  props: {
    value: {
      type:     Object,
      required: true,
    },

    credentialId: {
      type:     String,
      required: true,
    },

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

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

  data() {
    return { uuid: randomStr() };
  },

  computed: {
    configComponent() {
      const haveProviders = this.$store.getters['plugins/machineDrivers'];

      if ( haveProviders.includes(this.provider) ) {
        return importMachineConfig(this.provider);
      }

      return importMachineConfig('generic');
    }
  },
};
</script>

<template>
  <div>
    <div class="row">
      <div class="col span-4">
        <LabeledInput v-model="value.pool.name" :mode="mode" label="Pool Name" :required="true" />
      </div>
      <div class="col span-2">
        <LabeledInput
          v-model.number="value.pool.quantity"
          :mode="mode"
          label="Machine Count"
          type="number"
          min="0"
          :required="true"
        />
      </div>
      <div class="col span-6 pt-5">
        <h3>Roles</h3>
        <Checkbox v-model="value.pool.etcdRole" :mode="mode" label="etcd" />
        <Checkbox v-model="value.pool.controlPlaneRole" :mode="mode" label="Control Plane" />
        <Checkbox v-model="value.pool.workerRole" :mode="mode" label="Worker" />
      </div>
    </div>

    <hr class="mt-10" />

    <component
      :is="configComponent"
      :uuid="uuid"
      :mode="mode"
      :value="value.config"
      :provider="provider"
      :credential-id="credentialId"
      @error="e=>errors = e"
    />

    <AdvancedSection :mode="mode" class="advanced">
      <portal-target :name="'advanced-' + uuid" multiple />

      <div class="spacer" />

      <KeyValue
        v-model="value.pool.labels"
        :add-label="t('labels.addLabel')"
        :mode="mode"
        title="Kubernetes Node Labels"
        :read-allowed="false"
        :value-can-be-empty="true"
      />

      <div class="spacer" />

      <Taints v-model="value.pool.taints" :mode="mode" />

      <portal-target :name="'advanced-footer-' + uuid" multiple />
    </AdvancedSection>
  </div>
</template>

<style lang="scss" scoped>
  .advanced ::v-deep >.vue-portal-target:empty,
  .advanced ::v-deep >.vue-portal-target:empty + .spacer {
    display: none;
  }
</style>
