// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements.  See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership.  The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License.  You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied.  See the License for the
// specific language governing permissions and limitations
// under the License.

<template>
  <div class="form-layout" v-ctrl-enter="handleSubmit">
    <a-spin :spinning="loading">
      <a-form
        :ref="formRef"
        :model="form"
        :rules="rules"
        @finish="handleSubmit"
        layout="vertical">
        <a-form-item name="name" ref="name">
          <template #label>
            <tooltip-label :title="$t('label.name')" :tooltip="apiParams.name.description"/>
          </template>
          <a-input
            v-model:value="form.name"
            :placeholder="apiParams.name.description"
            v-focus="true" />
        </a-form-item>
        <a-form-item name="description" ref="description">
          <template #label>
            <tooltip-label :title="$t('label.description')" :tooltip="apiParams.description.description"/>
          </template>
          <a-input
            v-model:value="form.description"
            :placeholder="apiParams.description.description"/>
        </a-form-item>
        <a-form-item name="zoneid" ref="zoneid">
          <template #label>
            <tooltip-label :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
          </template>
          <a-select
            id="zone-selection"
            v-model:value="form.zoneid"
            showSearch
            optionFilterProp="label"
            :filterOption="(input, option) => {
              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }"
            :loading="zoneLoading"
            :placeholder="apiParams.zoneid.description"
            @change="val => { handleZoneChange(this.zones[val]) }">
            <a-select-option v-for="(opt, optIndex) in zones" :key="optIndex" :label="opt.name || opt.description">
              <span>
                <resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
                <global-outlined v-else style="margin-right: 5px" />
                {{ opt.name || opt.description }}
              </span>
            </a-select-option>
          </a-select>
        </a-form-item>
        <ownership-selection v-if="isAdmin()" @fetch-owner="fetchOwnerOptions"/>
        <a-form-item ref="hypervisor" name="hypervisor">
          <template #label>
            <tooltip-label :title="$t('label.hypervisor')" :tooltip="apiParams.hypervisor.description"/>
          </template>
          <a-select
            v-model:value="form.hypervisor"
            :loading="hypervisorLoading"
            :placeholder="apiParams.hypervisor.description"
            showSearch
            optionFilterProp="label"
            @change="val => { handleZoneHypervisorChange(val) }">
            :filterOption="(input, option) => {
              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }" >
            <a-select-option v-for="(opt, optIndex) in selectedZoneHypervisors" :key="optIndex" :label="opt.name || opt.description">
              {{ opt.name || opt.description }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="kubernetesversionid" ref="kubernetesversionid">
          <template #label>
            <tooltip-label :title="$t('label.kubernetesversionid')" :tooltip="apiParams.kubernetesversionid.description"/>
          </template>
          <a-select
            id="version-selection"
            v-model:value="form.kubernetesversionid"
            showSearch
            optionFilterProp="label"
            :filterOption="(input, option) => {
              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }"
            :loading="kubernetesVersionLoading"
            :placeholder="apiParams.kubernetesversionid.description"
            @change="val => { handleKubernetesVersionChange(kubernetesVersions[val]) }">
            <a-select-option v-for="(opt, optIndex) in kubernetesVersions" :key="optIndex" :label="opt.name || opt.description">
              {{ opt.name || opt.description }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="serviceofferingid" ref="serviceofferingid">
          <template #label>
            <tooltip-label :title="$t('label.serviceofferingid')" :tooltip="apiParams.serviceofferingid.description"/>
          </template>
          <a-select
            id="offering-selection"
            v-model:value="form.serviceofferingid"
            showSearch
            optionFilterProp="label"
            :filterOption="(input, option) => {
              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }"
            :loading="serviceOfferingLoading"
            :placeholder="apiParams.serviceofferingid.description">
            <a-select-option v-for="(opt, optIndex) in serviceOfferings" :key="optIndex" :label="opt.name || opt.description">
              {{ opt.name || opt.description }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="noderootdisksize" ref="noderootdisksize">
          <template #label>
            <tooltip-label :title="$t('label.noderootdisksize')" :tooltip="apiParams.noderootdisksize.description"/>
          </template>
          <a-input
            v-model:value="form.noderootdisksize"
            :placeholder="apiParams.noderootdisksize.description"/>
        </a-form-item>
        <a-form-item name="networkid" ref="networkid">
          <template #label>
            <tooltip-label :title="$t('label.networkid')" :tooltip="apiParams.networkid.description"/>
          </template>
          <a-select
            id="network-selection"
            v-model:value="form.networkid"
            showSearch
            optionFilterProp="label"
            :filterOption="(input, option) => {
              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }"
            :loading="networkLoading"
            :placeholder="apiParams.networkid.description">
            <a-select-option v-for="(opt, optIndex) in networks" :key="optIndex" :label="opt.name || opt.description">
              {{ opt.name || opt.description }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="haenable" ref="haenable" v-if="selectedKubernetesVersion != null && selectedKubernetesVersion !== undefined && selectedKubernetesVersion.supportsha === true">
          <template #label>
            <tooltip-label :title="$t('label.haenable')" :tooltip="apiParams.haenable?.description || ''"/>
          </template>
          <a-switch v-model:checked="form.haenable" />
        </a-form-item>
        <a-form-item v-if="form.haenable" name="controlnodes" ref="controlnodes">
          <template #label>
            <tooltip-label :title="$t('label.controlnodes')" :tooltip="apiParams.controlnodes.description"/>
          </template>
          <a-input
            v-model:value="form.controlnodes"
            :placeholder="apiParams.controlnodes.description"/>
        </a-form-item>
        <a-form-item v-if="form.haenable && !selectedZone.isnsxenabled" name="externalloadbalanceripaddress" ref="externalloadbalanceripaddress">
          <template #label>
            <tooltip-label :title="$t('label.externalloadbalanceripaddress')" :tooltip="apiParams.externalloadbalanceripaddress.description"/>
          </template>
          <a-input
            v-model:value="form.externalloadbalanceripaddress"
            :placeholder="apiParams.externalloadbalanceripaddress.description"/>
        </a-form-item>
        <a-form-item name="size" ref="size">
          <template #label>
            <tooltip-label :title="$t('label.cks.cluster.size')" :tooltip="apiParams.size.description"/>
          </template>
          <a-input
            v-model:value="form.size"
            :placeholder="apiParams.size.description"/>
        </a-form-item>
        <a-form-item name="keypair" ref="keypair">
          <template #label>
            <tooltip-label :title="$t('label.keypair')" :tooltip="apiParams.keypair.description"/>
          </template>
          <a-select
            id="keypair-selection"
            v-model:value="form.keypair"
            showSearch
            optionFilterProp="label"
            :filterOption="(input, option) => {
              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }"
            :loading="keyPairLoading"
            :placeholder="apiParams.keypair.description">
            <a-select-option v-for="(opt, optIndex) in keyPairs" :key="optIndex" :label="opt.name || opt.description">
              {{ opt.name || opt.description }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <!-- Advanced configurations -->
        <a-form-item name="advancedmode" ref="advancedmode">
          <template #label>
            <tooltip-label :title="$t('label.isadvanced')" />
          </template>
          <a-switch v-model:checked="form.advancedmode" />
        </a-form-item>
        <a-form-item v-if="form.advancedmode" name="enablecsi" ref="enablecsi" :label="$t('label.enable.csi')">
            <template #label>
              <tooltip-label :title="$t('label.enable.csi')" :tooltip="apiParams.enablecsi.description"/>
            </template>
            <a-switch v-model:checked="form.enablecsi" />
          </a-form-item>
        <a-form-item v-if="form.advancedmode" name="controlofferingid" ref="controlofferingid">
          <template #label>
            <tooltip-label :title="$t('label.cks.cluster.control.nodes.offeringid')" :tooltip="$t('label.cks.cluster.control.nodes.offeringid')"/>
          </template>
          <a-select
            id="control-offering-selection"
            v-model:value="form.controlofferingid"
            showSearch
            optionFilterProp="label"
            :filterOption="(input, option) => {
              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }"
            :loading="serviceOfferingLoading"
            :placeholder="$t('label.cks.cluster.control.nodes.offeringid')">
            <a-select-option v-for="(opt, optIndex) in serviceOfferings" :key="optIndex" :label="opt.name || opt.description">
              {{ opt.name || opt.description }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-if="form.advancedmode" name="controltemplateid" ref="controltemplateid">
          <template #label>
            <tooltip-label :title="$t('label.cks.cluster.control.nodes.templateid')" :tooltip="$t('label.cks.cluster.control.nodes.templateid')"/>
          </template>
          <a-select
            id="control-template-selection"
            v-model:value="form.controltemplateid"
            showSearch
            optionFilterProp="label"
            :filterOption="(input, option) => {
              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }"
            :loading="serviceOfferingLoading"
            :placeholder="$t('label.cks.cluster.control.nodes.templateid')">
            <a-select-option v-for="(opt, optIndex) in templates" :key="optIndex" :label="opt.name || opt.description">
              {{ opt.name || opt.description }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-if="form.advancedmode" name="workerofferingid" ref="workerofferingid">
          <template #label>
            <tooltip-label :title="$t('label.cks.cluster.worker.nodes.offeringid')" :tooltip="$t('label.cks.cluster.worker.nodes.offeringid')"/>
          </template>
          <a-select
            id="worker-offering-selection"
            v-model:value="form.workerofferingid"
            showSearch
            optionFilterProp="label"
            :filterOption="(input, option) => {
              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }"
            :loading="serviceOfferingLoading"
            :placeholder="$t('label.cks.cluster.worker.nodes.offeringid')">
            <a-select-option v-for="(opt, optIndex) in serviceOfferings" :key="optIndex" :label="opt.name || opt.description">
              {{ opt.name || opt.description }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-if="form.advancedmode" name="workertemplateid" ref="workertemplateid">
          <template #label>
            <tooltip-label :title="$t('label.cks.cluster.worker.nodes.templateid')" :tooltip="$t('label.cks.cluster.worker.nodes.templateid')"/>
          </template>
          <a-select
            id="worker-template-selection"
            v-model:value="form.workertemplateid"
            showSearch
            optionFilterProp="label"
            :filterOption="(input, option) => {
              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }"
            :loading="serviceOfferingLoading"
            :placeholder="$t('label.cks.cluster.worker.nodes.templateid')">
            <a-select-option v-for="(opt, optIndex) in templates" :key="optIndex" :label="opt.name || opt.description">
              {{ opt.name || opt.description }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-if="form.advancedmode" name="etcdnodes" ref="etcdnodes">
          <template #label>
            <tooltip-label :title="$t('label.cks.cluster.etcd.nodes')" :tooltip="apiParams.etcdnodes.description"/>
          </template>
          <a-input
            v-model:value="form.etcdnodes"
            :placeholder="apiParams.etcdnodes.description"/>
        </a-form-item>
        <a-form-item v-if="form.advancedmode && form.etcdnodes && form.etcdnodes > 0" name="etcdofferingid" ref="etcdofferingid">
          <template #label>
            <tooltip-label :title="$t('label.cks.cluster.etcd.nodes.offeringid')" :tooltip="$t('label.cks.cluster.etcd.nodes.offeringid')"/>
          </template>
          <a-select
            id="etcd-offering-selection"
            v-model:value="form.etcdofferingid"
            showSearch
            optionFilterProp="label"
            :filterOption="(input, option) => {
              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }"
            :loading="serviceOfferingLoading"
            :placeholder="$t('label.cks.cluster.etcd.nodes.offeringid')">
            <a-select-option v-for="(opt, optIndex) in serviceOfferings" :key="optIndex" :label="opt.name || opt.description">
              {{ opt.name || opt.description }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-if="form.advancedmode && form.etcdnodes && form.etcdnodes > 0" name="etcdtemplateid" ref="etcdtemplateid">
          <template #label>
            <tooltip-label :title="$t('label.cks.cluster.etcd.nodes.templateid')" :tooltip="$t('label.cks.cluster.etcd.nodes.templateid')"/>
          </template>
          <a-select
            id="etcd-template-selection"
            v-model:value="form.etcdtemplateid"
            showSearch
            optionFilterProp="label"
            :filterOption="(input, option) => {
              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }"
            :loading="serviceOfferingLoading"
            :placeholder="$t('label.cks.cluster.etcd.nodes.templateid')">
            <a-select-option v-for="(opt, optIndex) in templates" :key="optIndex" :label="opt.name || opt.description">
              {{ opt.name || opt.description }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-if="form.advancedmode" name="controlaffinitygroupids" ref="controlaffinitygroupids">
          <template #label>
            <tooltip-label :title="$t('label.cks.cluster.control.nodes.affinitygroupid')" :tooltip="$t('label.cks.cluster.control.nodes.affinitygroupid')"/>
          </template>
          <a-select
            v-model:value="controlAffinityGroups"
            mode="multiple"
            showSearch
            optionFilterProp="label"
            :filterOption="(input, option) => option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0"
            :loading="affinityGroupLoading"
            :placeholder="$t('label.cks.cluster.control.nodes.affinitygroupid')">
            <a-select-option v-for="opt in affinityGroups" :key="opt.id" :label="opt.name">
              {{ opt.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-if="form.advancedmode" name="workeraffinitygroupids" ref="workeraffinitygroupids">
          <template #label>
            <tooltip-label :title="$t('label.cks.cluster.worker.nodes.affinitygroupid')" :tooltip="$t('label.cks.cluster.worker.nodes.affinitygroupid')"/>
          </template>
          <a-select
            v-model:value="workerAffinityGroups"
            mode="multiple"
            showSearch
            optionFilterProp="label"
            :filterOption="(input, option) => option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0"
            :loading="affinityGroupLoading"
            :placeholder="$t('label.cks.cluster.worker.nodes.affinitygroupid')">
            <a-select-option v-for="opt in affinityGroups" :key="opt.id" :label="opt.name">
              {{ opt.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-if="form.advancedmode && form.etcdnodes && form.etcdnodes > 0" name="etcdaffinitygroupids" ref="etcdaffinitygroupids">
          <template #label>
            <tooltip-label :title="$t('label.cks.cluster.etcd.nodes.affinitygroupid')" :tooltip="$t('label.cks.cluster.etcd.nodes.affinitygroupid')"/>
          </template>
          <a-select
            v-model:value="etcdAffinityGroups"
            mode="multiple"
            showSearch
            optionFilterProp="label"
            :filterOption="(input, option) => option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0"
            :loading="affinityGroupLoading"
            :placeholder="$t('label.cks.cluster.etcd.nodes.affinitygroupid')">
            <a-select-option v-for="opt in affinityGroups" :key="opt.id" :label="opt.name">
              {{ opt.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-if="form.advancedmode && isASNumberRequired() && !form.networkid" name="asnumber" ref="asnumber">
          <template #label>
              <tooltip-label :title="$t('label.asnumber')" :tooltip="apiParams.asnumber.description"/>
            </template>
            <a-select
             v-model:value="form.asnumber"
              showSearch
              optionFilterProp="label"
              :filterOption="(input, option) => {
                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }"
              :loading="asNumberLoading"
              :placeholder="apiParams.asnumber.description"
              @change="val => { handleASNumberChange(val) }">
              <a-select-option v-for="(opt, optIndex) in asNumbersZone" :key="optIndex" :label="opt.asnumber">
                {{ opt.asnumber }}
              </a-select-option>
            </a-select>
        </a-form-item>
        <a-form-item  v-if="form.advancedmode" name="cniconfigurationid" ref="cniconfigurationid">
          <template #label>
            <tooltip-label :title="$t('label.cniconfiguration')" :tooltip="$t('label.cniconfiguration')"/>
          </template>
            <user-data-selection
              :items="cniConfigurationData"
              :row-count="cniConfigurationData.length"
              :zoneId="zoneId"
              :loading="cniConfigLoading"
              :preFillContent="dataPreFill"
              :showSearch="false"
              @select-user-data-item="($event) => updateCniConfig($event)"
              @handle-search-filter="($event) => handleSearchFilter('userData', $event)"
            />
            <div v-if="cniConfigParams.length > 0">
              <a-input-group>
                <a-table
                  size="small"
                  style="overflow-y: auto"
                  :columns="userDataParamCols"
                  :dataSource="cniConfigParams"
                  :pagination="false"
                  :rowKey="record => record.key">
                  <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'value'">
                      <div v-if="record.key === 'AS_NUMBER'">
                        <a-input style="width: 100%;text-wrap: wrap;" :disabled="true" value="Value is obtained from the network or is automatically obtained at the time of cluster creation" />
                      </div>
                      <a-input v-else v-model:value="cniConfigValues[record.key]" />
                    </template>
                  </template>
                </a-table>
              </a-input-group>
            </div>
        </a-form-item>

        <!-- Experimentation Features -->
        <div v-if="$store.getters.features.kubernetesclusterexperimentalfeaturesenabled">
          <a-form-item name="privateregistry" ref="privateregistry" :label="$t('label.private.registry')">
            <template #label>
              <tooltip-label :title="$t('label.private.registry')" :tooltip="apiParams.keprivateregistryypair.description"/>
            </template>
            <a-switch v-model:checked="form.privateregistry" />
          </a-form-item>
          <div v-if="form.privateregistry">
            <a-form-item name="dockerregistryusername" ref="dockerregistryusername">
              <template #label>
                <tooltip-label :title="$t('label.username')" :tooltip="apiParams.dockerregistryusername.description"/>
              </template>
              <a-input
                v-model:value="form.dockerregistryusername"
                :placeholder="apiParams.dockerregistryusername.description"/>
            </a-form-item>
            <a-form-item name="dockerregistrypassword" ref="dockerregistrypassword">
              <template #label>
                <tooltip-label :title="$t('label.password')" :tooltip="apiParams.dockerregistrypassword.description"/>
              </template>
              <a-input-password
                v-model:value="form.dockerregistrypassword"
                :placeholder="apiParams.dockerregistrypassword.description"/>
            </a-form-item>
            <a-form-item name="dockerregistryurl" ref="dockerregistryurl">
              <template #label>
                <tooltip-label :title="$t('label.url')" :tooltip="apiParams.dockerregistryurl.description"/>
              </template>
              <a-input
                v-model:value="form.dockerregistryurl"
                :placeholder="apiParams.dockerregistryurl.description"/>
            </a-form-item>
          </div>
        </div>
        <div :span="24" class="action-button">
          <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
          <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
        </div>
      </a-form>
    </a-spin>
  </div>
</template>

<script>
import { ref, reactive, toRaw } from 'vue'
import { getAPI, postAPI } from '@/api'
import { mixinForm } from '@/utils/mixin'
import ResourceIcon from '@/components/view/ResourceIcon'
import TooltipLabel from '@/components/widgets/TooltipLabel'
import UserDataSelection from '@views/compute/wizard/UserDataSelection'
import OwnershipSelection from '@/views/compute/wizard/OwnershipSelection'

export default {
  name: 'CreateKubernetesCluster',
  mixins: [mixinForm],
  components: {
    TooltipLabel,
    ResourceIcon,
    UserDataSelection,
    OwnershipSelection
  },
  props: {},
  data () {
    return {
      zones: [],
      zoneLoading: false,
      selectedZone: {},
      kubernetesVersions: [],
      kubernetesVersionLoading: false,
      selectedKubernetesVersion: {},
      serviceOfferings: [],
      serviceOfferingLoading: false,
      networks: [],
      networkLoading: false,
      keyPairs: [],
      keyPairLoading: false,
      loading: false,
      templates: [],
      templateLoading: false,
      selectedZoneHypervisors: [],
      hypervisorLoading: false,
      configLoading: false,
      cniConfigurationData: [],
      cniConfigLoading: false,
      cniConfigParams: [],
      cniConfigValues: {},
      userDataParamCols: [
        {
          title: this.$t('label.key'),
          dataIndex: 'key'
        },
        {
          title: this.$t('label.value'),
          dataIndex: 'value',
          key: 'value'
        }
      ],
      cksNetworkOfferingName: null,
      cksNetworkOffering: null,
      asNumbersZone: [],
      asNumberLoading: false,
      selectedAsNumber: 0,
      affinityGroups: [],
      affinityGroupLoading: false,
      controlAffinityGroups: [],
      workerAffinityGroups: [],
      etcdAffinityGroups: [],
      owner: {}
    }
  },
  beforeCreate () {
    this.apiParams = this.$getApiParams('createKubernetesCluster')
  },
  created () {
    this.emptyEntry = {
      id: null,
      name: ''
    }
    this.networks = [this.emptyEntry]
    this.keyPairs = [this.emptyEntry]
    this.initForm()
    this.fetchData()
  },
  methods: {
    initForm () {
      this.formRef = ref()
      this.form = reactive({
        controlnodes: 3,
        size: 1,
        noderootdisksize: 8,
        hypervisor: null
      })
      this.rules = reactive({
        name: [{ required: true, message: this.$t('message.error.kubecluster.name') }],
        zoneid: [{ required: true, message: this.$t('message.error.zone.for.cluster') }],
        kubernetesversionid: [{ required: true, message: this.$t('message.error.version.for.cluster') }],
        serviceofferingid: [{ required: true, message: this.$t('message.error.serviceoffering.for.cluster') }],
        noderootdisksize: [
          {
            validator: async (rule, value) => {
              if (value && (isNaN(value) || value < 8)) {
                return Promise.reject(this.$t('message.validate.min').replace('{0}', '8GB'))
              }
              return Promise.resolve()
            }
          }
        ],
        size: [
          {
            required: true,
            message: this.$t('message.error.size.for.cluster')
          },
          { type: 'number', validator: this.validateNumber }
        ],
        dockerregistryusername: [{ required: true, message: this.$t('label.required') }],
        dockerregistrypassword: [{ required: true, message: this.$t('label.required') }],
        dockerregistryurl: [{ required: true, message: this.$t('label.required') }],
        controlnodes: [
          { required: true, message: this.$t('message.error.input.value') },
          {
            validator: async (rule, value) => {
              if (value && (isNaN(value) || value < 2)) {
                return Promise.reject(this.$t('message.validate.number'))
              }
              return Promise.resolve()
            }
          }
        ]
      })
    },
    fetchData () {
      this.fetchZoneData()
      if (!this.isAdmin()) {
        this.fetchKeyPairData()
      }
      this.fetchCksTemplates()
      this.fetchCKSNetworkOfferingName()
      this.fetchCniConfigurations()
    },
    fetchAffinityGroups () {
      this.affinityGroups = []
      this.controlAffinityGroups = []
      this.workerAffinityGroups = []
      this.etcdAffinityGroups = []
      const params = {}
      if (!this.isObjectEmpty(this.selectedZone)) {
        params.zoneid = this.selectedZone.id
      }
      if (this.owner.account) {
        params.account = this.owner.account
        params.domainid = this.owner.domainid
      } else if (this.owner.projectid) {
        params.projectid = this.owner.projectid
      }
      this.affinityGroupLoading = true
      getAPI('listAffinityGroups', params).then(json => {
        const groups = json.listaffinitygroupsresponse.affinitygroup
        if (this.arrayHasItems(groups)) {
          this.affinityGroups = groups.filter(group => group.type !== 'ExplicitDedication')
        }
      }).finally(() => {
        this.affinityGroupLoading = false
      })
    },
    isValidValueForKey (obj, key) {
      return key in obj && obj[key] != null
    },
    isASNumberRequired () {
      return !this.isObjectEmpty(this.cksNetworkOffering) && this.cksNetworkOffering.specifyasnumber && this.cksNetworkOffering.routingmode && this.cksNetworkOffering.routingmode.toLowerCase() === 'dynamic'
    },
    arrayHasItems (array) {
      return array !== null && array !== undefined && Array.isArray(array) && array.length > 0
    },
    isObjectEmpty (obj) {
      return !(obj !== null && obj !== undefined && Object.keys(obj).length > 0 && obj.constructor === Object)
    },
    isUserAllowedToListCniConfig () {
      console.log(Boolean('listCniConfiguration' in this.$store.getters.apis))
      return Boolean('listCniConfiguration' in this.$store.getters.apis)
    },
    fetchZoneData () {
      const params = {}
      this.zoneLoading = true
      params.showicon = true
      getAPI('listZones', params).then(json => {
        var listZones = json.listzonesresponse.zone
        if (listZones) {
          listZones = listZones.filter(x => x.allocationstate === 'Enabled')
          this.zones = this.zones.concat(listZones)
        }
      }).finally(() => {
        this.zoneLoading = false
        if (this.arrayHasItems(this.zones)) {
          this.form.zoneid = 0
          this.handleZoneChange(this.zones[0])
        }
      })
    },
    handleZoneChange (zone) {
      this.selectedZone = zone
      this.fetchKubernetesVersionData()
      this.fetchZoneHypervisors()
      this.fetchZoneASNumbers()
      if (!this.isAdmin()) {
        this.fetchNetworkData()
        this.fetchAffinityGroups()
      }
    },
    handleASNumberChange (selectedIndex) {
      this.selectedAsNumber = this.asNumbersZone[selectedIndex].asnumber
      this.form.asnumber = this.selectedAsNumber
    },
    fetchKubernetesVersionData () {
      this.kubernetesVersions = []
      const params = {}
      if (!this.isObjectEmpty(this.selectedZone)) {
        params.zoneid = this.selectedZone.id
      }
      this.kubernetesVersionLoading = true
      getAPI('listKubernetesSupportedVersions', params).then(json => {
        const versionObjs = json.listkubernetessupportedversionsresponse.kubernetessupportedversion
        if (this.arrayHasItems(versionObjs)) {
          for (var i = 0; i < versionObjs.length; i++) {
            if (versionObjs[i].state === 'Enabled' && versionObjs[i].isostate === 'Ready') {
              this.kubernetesVersions.push(versionObjs[i])
            }
          }
        }
      }).finally(() => {
        this.kubernetesVersionLoading = false
        if (this.arrayHasItems(this.kubernetesVersions)) {
          this.form.kubernetesversionid = 0
          this.handleKubernetesVersionChange(this.kubernetesVersions[0])
        }
      })
    },
    handleKubernetesVersionChange (version) {
      this.selectedKubernetesVersion = version
      this.fetchServiceOfferingData()
    },
    fetchServiceOfferingData () {
      this.serviceOfferings = []
      const params = {}
      this.serviceOfferingLoading = true
      getAPI('listServiceOfferings', params).then(json => {
        var items = json.listserviceofferingsresponse.serviceoffering
        var minCpu = 2
        var minMemory = 2048
        if (!this.isObjectEmpty(this.selectedKubernetesVersion)) {
          minCpu = this.selectedKubernetesVersion.mincpunumber
          minMemory = this.selectedKubernetesVersion.minmemory
        }
        if (items != null) {
          for (var i = 0; i < items.length; i++) {
            if (items[i].iscustomized === false &&
                items[i].cpunumber >= minCpu && items[i].memory >= minMemory) {
              this.serviceOfferings.push(items[i])
            }
          }
        }
      }).finally(() => {
        this.serviceOfferingLoading = false
        if (this.arrayHasItems(this.serviceOfferings)) {
          this.form.serviceofferingid = 0
          this.form.controlofferingid = undefined
          this.form.workerofferingid = undefined
          this.form.etcdofferingid = undefined
        }
      })
    },
    isAdmin () {
      return this.$store.getters.userInfo.roletype === 'Admin'
    },
    isAdminOrDomainAdmin () {
      return ['Admin', 'DomainAdmin'].includes(this.$store.getters.userInfo.roletype)
    },
    fetchOwnerOptions (ownerOptions) {
      this.owner = {}
      if (ownerOptions.selectedAccountType === 'Account') {
        if (!ownerOptions.selectedAccount) {
          return
        }
        this.owner.account = ownerOptions.selectedAccount
        this.owner.domainid = ownerOptions.selectedDomain
      } else if (ownerOptions.selectedAccountType === 'Project') {
        if (!ownerOptions.selectedProject) {
          return
        }
        this.owner.projectid = ownerOptions.selectedProject
      }
      this.fetchNetworkData()
      this.fetchKeyPairData()
      this.fetchAffinityGroups()
    },
    fetchCksTemplates () {
      var filters = []
      if (this.isAdminOrDomainAdmin()) {
        filters = ['all']
      } else {
        filters = ['self', 'featured', 'community']
      }
      var ckstemplates = []
      for (const filtername of filters) {
        const params = {
          templatefilter: filtername,
          forcks: true,
          isready: true
        }
        this.templateLoading = true
        getAPI('listTemplates', params).then(json => {
          var templates = json?.listtemplatesresponse?.template || []
          ckstemplates.push(...templates)
        }).finally(() => {
          this.templateLoading = false
        })
      }
      this.templates = ckstemplates
    },
    fetchNetworkData () {
      const params = {}
      if (!this.isObjectEmpty(this.selectedZone)) {
        params.zoneid = this.selectedZone.id
      }
      if (this.owner.account) {
        params.account = this.owner.account
        params.domainid = this.owner.domainid
      } else if (this.owner.projectid) {
        params.projectid = this.owner.projectid
      }
      this.networkLoading = true
      this.networks = []
      getAPI('listNetworks', params).then(json => {
        var listNetworks = json.listnetworksresponse.network
        if (this.arrayHasItems(listNetworks)) {
          listNetworks = listNetworks.filter(n => n.type !== 'L2')
          this.networks = listNetworks
        }
      }).finally(() => {
        this.networkLoading = false
        this.networks = [this.emptyEntry].concat(this.networks)
        if (this.arrayHasItems(this.networks)) {
          this.form.networkid = 0
        }
      })
    },
    fetchKeyPairData () {
      const params = {}
      if (this.owner.account) {
        params.account = this.owner.account
        params.domainid = this.owner.domainid
      } else if (this.owner.projectid) {
        params.projectid = this.owner.projectid
      }
      this.keyPairLoading = true
      this.keyPairs = [this.emptyEntry]
      getAPI('listSSHKeyPairs', params).then(json => {
        const listKeyPairs = json.listsshkeypairsresponse.sshkeypair
        if (this.arrayHasItems(listKeyPairs)) {
          for (var i = 0; i < listKeyPairs.length; i++) {
            this.keyPairs.push({
              id: listKeyPairs[i].name,
              description: listKeyPairs[i].name
            })
          }
        }
      }).finally(() => {
        this.keyPairLoading = false
        if (this.arrayHasItems(this.keyPairs)) {
          this.form.keypair = 0
        }
      })
    },
    fetchZoneHypervisors () {
      const params = {
        zoneid: this.selectedZone.id
      }
      this.hypervisorLoading = true

      getAPI('listHypervisors', params).then(json => {
        const listResponse = json.listhypervisorsresponse.hypervisor || []
        this.selectedZoneHypervisors = listResponse.filter(hypervisor => hypervisor.name !== 'External')
      }).finally(() => {
        this.hypervisorLoading = false
      })
    },
    handleZoneHypervisorChange (index) {
      this.form.hypervisor = index
    },
    fetchCKSNetworkOfferingName () {
      const params = {
        name: 'cloud.kubernetes.cluster.network.offering'
      }
      this.configLoading = true
      getAPI('listConfigurations', params).then(json => {
        if (json.listconfigurationsresponse.configuration !== null) {
          const config = json.listconfigurationsresponse.configuration[0]
          if (config && config.name === params.name) {
            this.cksNetworkOfferingName = config.value
          }
        }
      }).then(() => {
        this.fetchCKSNetworkOffering(this.cksNetworkOfferingName)
      }).finally(() => {
        this.configLoading = false
      })
    },
    fetchCKSNetworkOffering (offeringName) {
      return new Promise((resolve, reject) => {
        const args = {
          name: offeringName
        }

        getAPI('listNetworkOfferings', args).then(json => {
          const listNetworkOfferings = json.listnetworkofferingsresponse.networkoffering || []
          resolve(listNetworkOfferings)
          this.cksNetworkOffering = listNetworkOfferings[0] || {}
        }).catch(error => {
          resolve(error)
        })
      })
    },
    fetchZoneASNumbers () {
      const params = {}
      params.zoneid = this.selectedZone.id
      params.isallocated = false
      getAPI('listASNumbers', params).then(json => {
        this.asNumbersZone = json.listasnumbersresponse.asnumber
      })
    },
    fetchCniConfigurations () {
      this.cniConfigLoading = true
      getAPI('listCniConfiguration', {}).then(
        response => {
          const listResponse = response.listcniconfigurationresponse.cniconfig || []
          if (listResponse) {
            this.cniConfigurationData = listResponse
          }
        }).finally(() => {
        this.cniConfigLoading = false
      })
    },
    updateCniConfig (id) {
      if (id === '0') {
        this.form.cniconfigurationid = undefined
        return
      }
      this.form.cniconfigurationid = id
      this.cniConfigParams = []
      getAPI('listCniConfiguration', { id: id }).then(json => {
        const resp = json?.listcniconfigurationresponse?.cniconfig || []
        if (resp) {
          var params = resp[0].params
          if (params) {
            var dataParams = params.split(',')
          }
          var that = this
          dataParams.forEach(function (val, index) {
            that.cniConfigParams.push({
              id: index,
              key: val
            })
          })
        }
      })
    },
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
      this.formRef.value.validate().then(() => {
        const formRaw = toRaw(this.form)
        const values = this.handleRemoveFields(formRaw)
        this.loading = true
        const params = {
          name: values.name,
          description: values.description,
          zoneid: this.zones[values.zoneid].id,
          kubernetesversionid: this.kubernetesVersions[values.kubernetesversionid].id,
          serviceofferingid: this.serviceOfferings[values.serviceofferingid].id,
          size: values.size,
          clustertype: 'CloudManaged'
        }
        if (this.owner.account) {
          params.account = this.owner.account
          params.domainid = this.owner.domainid
        } else if (this.owner.projectid) {
          params.projectid = this.owner.projectid
        }
        if (values.hypervisor !== null) {
          params.hypervisor = this.selectedZoneHypervisors[values.hypervisor].name.toLowerCase()
        }
        var advancedOfferings = 0
        if (this.isValidValueForKey(values, 'advancedmode') && values.advancedmode && this.isValidValueForKey(values, 'controlofferingid') && this.arrayHasItems(this.serviceOfferings) && this.serviceOfferings[values.controlofferingid].id != null) {
          params['nodeofferings[' + advancedOfferings + '].node'] = 'control'
          params['nodeofferings[' + advancedOfferings + '].offering'] = this.serviceOfferings[values.controlofferingid].id
          advancedOfferings++
        }
        if (this.isValidValueForKey(values, 'advancedmode') && values.advancedmode && this.isValidValueForKey(values, 'workerofferingid') && this.arrayHasItems(this.serviceOfferings) && this.serviceOfferings[values.workerofferingid].id != null) {
          params['nodeofferings[' + advancedOfferings + '].node'] = 'worker'
          params['nodeofferings[' + advancedOfferings + '].offering'] = this.serviceOfferings[values.workerofferingid].id
          advancedOfferings++
        }
        if (this.isValidValueForKey(values, 'advancedmode') && values.advancedmode && this.isValidValueForKey(values, 'etcdnodes') && values.etcdnodes > 0) {
          params.etcdnodes = values.etcdnodes
          if (this.isValidValueForKey(values, 'etcdofferingid') && this.arrayHasItems(this.serviceOfferings) && this.serviceOfferings[values.etcdofferingid].id != null) {
            params['nodeofferings[' + advancedOfferings + '].node'] = 'etcd'
            params['nodeofferings[' + advancedOfferings + '].offering'] = this.serviceOfferings[values.etcdofferingid].id
            advancedOfferings++
          }
        }
        var advancedTemplates = 0
        if (this.isValidValueForKey(values, 'advancedmode') && values.advancedmode && this.isValidValueForKey(values, 'controltemplateid') && this.arrayHasItems(this.templates) && this.templates[values.controltemplateid].id != null) {
          params['nodetemplates[' + advancedTemplates + '].node'] = 'control'
          params['nodetemplates[' + advancedTemplates + '].template'] = this.templates[values.controltemplateid].id
          advancedTemplates++
        }
        if (this.isValidValueForKey(values, 'advancedmode') && values.advancedmode && this.isValidValueForKey(values, 'workertemplateid') && this.arrayHasItems(this.templates) && this.templates[values.workertemplateid].id != null) {
          params['nodetemplates[' + advancedTemplates + '].node'] = 'worker'
          params['nodetemplates[' + advancedTemplates + '].template'] = this.templates[values.workertemplateid].id
          advancedTemplates++
        }
        if (this.isValidValueForKey(values, 'advancedmode') && values.advancedmode && this.isValidValueForKey(values, 'etcdnodes') && values.etcdnodes > 0) {
          params.etcdnodes = values.etcdnodes
          if (this.isValidValueForKey(values, 'etcdtemplateid') && this.arrayHasItems(this.templates) && this.templates[values.etcdtemplateid].id != null) {
            params['nodetemplates[' + advancedTemplates + '].node'] = 'etcd'
            params['nodetemplates[' + advancedTemplates + '].template'] = this.templates[values.etcdtemplateid].id
            advancedTemplates++
          }
        }
        if (values.advancedmode) {
          let affinityIndex = 0
          const addAffinityGroups = (nodeType, groups) => {
            if (groups && groups.length > 0) {
              params[`nodeaffinitygroups[${affinityIndex}].node`] = nodeType
              params[`nodeaffinitygroups[${affinityIndex}].affinitygroup`] = groups.join(',')
              affinityIndex++
            }
          }
          addAffinityGroups('control', this.controlAffinityGroups)
          addAffinityGroups('worker', this.workerAffinityGroups)
          if (values.etcdnodes > 0) {
            addAffinityGroups('etcd', this.etcdAffinityGroups)
          }
        }
        if (this.isValidValueForKey(values, 'noderootdisksize') && values.noderootdisksize > 0) {
          params.noderootdisksize = values.noderootdisksize
        }
        if (this.isValidValueForKey(values, 'haenable') && values.haenable &&
          this.isValidValueForKey(values, 'controlnodes') && values.controlnodes > 0) {
          params.controlnodes = values.controlnodes
        }
        if (this.isValidValueForKey(values, 'externalloadbalanceripaddress') && values.externalloadbalanceripaddress !== '') {
          params.externalloadbalanceripaddress = values.externalloadbalanceripaddress
        }
        if (this.isValidValueForKey(values, 'networkid') && this.arrayHasItems(this.networks) && this.networks[values.networkid].id != null) {
          params.networkid = this.networks[values.networkid].id
        }
        if (this.isValidValueForKey(values, 'keypair') && this.arrayHasItems(this.keyPairs) && this.keyPairs[values.keypair].id != null) {
          params.keypair = this.keyPairs[values.keypair].id
        }
        if (values.privateregistry) {
          params.dockerregistryusername = values.dockerregistryusername
          params.dockerregistrypassword = values.dockerregistrypassword
          params.dockerregistryurl = values.dockerregistryurl
        }

        if (values.cniconfigurationid) {
          params.cniconfigurationid = values.cniconfigurationid
        }

        if (values.enablecsi) {
          params.enablecsi = values.enablecsi
        }

        var idx = 0
        if (this.cniConfigValues) {
          for (const [key, value] of Object.entries(this.cniConfigValues)) {
            params['cniconfigdetails[' + idx + '].' + `${key}`] = value
            idx++
          }
        }
        if ('asnumber' in values && this.isASNumberRequired()) {
          params.asnumber = values.asnumber
        }

        postAPI('createKubernetesCluster', params).then(json => {
          const jobId = json.createkubernetesclusterresponse.jobid
          this.$pollJob({
            jobId,
            title: this.$t('label.kubernetes.cluster.create'),
            description: values.name,
            loadingMessage: `${this.$t('label.kubernetes.cluster.create')} ${values.name} ${this.$t('label.in.progress')}`,
            catchMessage: this.$t('error.fetching.async.job.result'),
            successMessage: this.$t('message.success.create.kubernetes.cluster') + ' ' + values.name
          })
          this.closeAction()
        }).catch(error => {
          this.$notifyError(error)
        }).finally(() => {
          this.loading = false
        })
      }).catch(error => {
        this.formRef.value.scrollToField(error.errorFields[0].name)
      })
    },
    closeAction () {
      this.$emit('close-action')
    },
    async validateNumber (rule, value) {
      if (value && (isNaN(value) || value <= 0)) {
        return Promise.reject(this.$t('message.validate.number'))
      }
      return Promise.resolve()
    }
  }
}
</script>

<style scoped lang="less">
  .form-layout {
    width: 80vw;

    @media (min-width: 700px) {
      width: 550px;
    }
  }
</style>