// 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-alert
        v-if="resource"
        type="info"
        style="margin-bottom: 16px">
        <template #message>
          <div style="display: block; width: 100%;">
            <div style="display: block; margin-bottom: 8px;">
              <strong>{{ $t('message.clone.offering.from') }}: {{ resource.name }}</strong>
            </div>
            <div style="display: block; font-size: 12px;">
              {{ $t('message.clone.offering.edit.hint') }}
            </div>
          </div>
        </template>
      </a-alert>
      <a-form
        layout="vertical"
        :ref="formRef"
        :model="form"
        :rules="rules"
        @finish="handleSubmit"
       >
        <a-form-item name="name" ref="name">
          <template #label>
            <tooltip-label :title="$t('label.name')" :tooltip="apiParams.name.description"/>
          </template>
          <a-input
            v-focus="true"
            v-model:value="form.name"/>
        </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"/>
        </a-form-item>
        <a-form-item name="zoneid" ref="zoneid">
          <template #label>
            <tooltip-label :title="$t('label.zoneid')" :tooltip="apiParams.zoneid ? apiParams.zoneid.description : ''"/>
          </template>
          <a-select
            allowClear
            v-model:value="form.zoneid"
            :loading="zones.loading"
            @change="onChangeZone"
            showSearch
            optionFilterProp="label"
            :filterOption="(input, option) => {
              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }" >
            <a-select-option v-for="zone in zones.opts" :key="zone.name" :label="zone.name">
              <span>
                <resource-icon v-if="zone.icon" :image="zone.icon.base64image" size="1x" style="margin-right: 5px"/>
                <global-outlined v-else style="margin-right: 5px"/>
                {{ zone.name }}
              </span>
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="externalid" ref="externalid">
          <template #label>
            <tooltip-label :title="$t('label.externalid')" :tooltip="apiParams.externalid ? apiParams.externalid.description : ''"/>
          </template>
          <a-select
            allowClear
            v-model:value="form.externalid"
            :loading="externals.loading"
            showSearch
            optionFilterProp="label"
            :filterOption="(input, option) => {
              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }" >
            <a-select-option v-for="opt in externals.opts" :key="opt.id" :label="opt.name">
              {{ opt.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="allowuserdrivenbackups" ref="allowuserdrivenbackups">
          <template #label>
            <tooltip-label :title="$t('label.allowuserdrivenbackups')" :tooltip="apiParams.allowuserdrivenbackups ? apiParams.allowuserdrivenbackups.description : ''"/>
          </template>
          <a-switch v-model:checked="form.allowuserdrivenbackups"/>
        </a-form-item>
        <a-form-item name="ispublic" ref="ispublic" :label="$t('label.ispublic')" v-if="isAdmin()">
          <a-switch v-model:checked="form.ispublic" @change="onChangeIsPublic" />
        </a-form-item>
        <a-form-item name="domainid" ref="domainid" v-if="!form.ispublic">
          <template #label>
            <tooltip-label :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
          </template>
          <a-select
            mode="multiple"
            :getPopupContainer="(trigger) => trigger.parentNode"
            v-model:value="form.domainid"
            @change="onChangeDomain"
            showSearch
            optionFilterProp="label"
            :filterOption="(input, option) => {
              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }"
            :loading="domains.loading"
            :placeholder="apiParams.domainid.description">
            <a-select-option v-for="(opt, optIndex) in domains.opts" :key="optIndex" :label="opt.path || opt.name || opt.description">
              <span>
                <resource-icon v-if="opt && opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
                <block-outlined v-else style="margin-right: 5px" />
                {{ opt.path || opt.name || opt.description }}
              </span>
            </a-select-option>
          </a-select>
        </a-form-item>
        <div :span="24" class="action-button">
          <a-button :loading="loading" @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 ResourceIcon from '@/components/view/ResourceIcon'
import TooltipLabel from '@/components/widgets/TooltipLabel'
import { GlobalOutlined } from '@ant-design/icons-vue'
import { isAdmin } from '@/role'

export default {
  name: 'CloneBackupOffering',
  components: {
    TooltipLabel,
    ResourceIcon,
    GlobalOutlined
  },
  props: {
    resource: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      loading: false,
      zones: {
        loading: false,
        opts: []
      },
      externals: {
        loading: false,
        opts: []
      },
      domains: {
        loading: false,
        opts: []
      }
    }
  },
  beforeCreate () {
    this.apiParams = this.$getApiParams('cloneBackupOffering')
  },
  created () {
    this.initForm()
    this.fetchData()
  },
  methods: {
    initForm () {
      this.formRef = ref()
      this.form = reactive({
        allowuserdrivenbackups: true
      })
      this.rules = reactive({
        name: [{ required: true, message: this.$t('message.error.required.input') }],
        description: [{ required: true, message: this.$t('message.error.required.input') }]
      })
    },
    fetchData () {
      this.fetchZone()
      this.fetchDomain()
      this.$nextTick(() => {
        this.populateFormFromResource()
      })
    },
    fetchZone () {
      this.zones.loading = true
      getAPI('listZones', { available: true, showicon: true }).then(json => {
        this.zones.opts = json.listzonesresponse.zone || []
        this.$nextTick(() => {
          this.populateFormFromResource()
        })
      }).catch(error => {
        this.$notifyError(error)
      }).finally(() => {
        this.zones.loading = false
      })
    },
    fetchDomain () {
      this.domains.loading = true
      const params = { listAll: true, showicon: true, details: 'min' }
      getAPI('listDomains', params).then(json => {
        this.domains.opts = json.listdomainsresponse.domain || []
        this.$nextTick(() => {
          this.populateFormFromResource()
        })
      }).catch(error => {
        this.$notifyError(error)
      }).finally(() => {
        this.domains.loading = false
      })
    },
    fetchExternal (zoneId) {
      if (!zoneId) {
        this.externals.opts = []
        return
      }
      this.externals.loading = true
      getAPI('listBackupProviderOfferings', { zoneid: zoneId }).then(json => {
        this.externals.opts = json.listbackupproviderofferingsresponse.backupoffering || []
      }).catch(error => {
        this.$notifyError(error)
      }).finally(() => {
        this.externals.loading = false
      })
    },
    populateFormFromResource () {
      if (!this.resource) return

      const r = this.resource

      this.form.name = r.name + ' - Clone'
      this.form.description = r.description || r.name

      if (r.allowuserdrivenbackups !== undefined) {
        this.form.allowuserdrivenbackups = r.allowuserdrivenbackups
      }

      if (r.domainid) {
        let offeringDomainIds = r.domainid
        offeringDomainIds = (typeof offeringDomainIds === 'string' && offeringDomainIds.indexOf(',') !== -1) ? offeringDomainIds.split(',') : [offeringDomainIds]
        const selected = []
        for (let i = 0; i < offeringDomainIds.length; i++) {
          for (let j = 0; j < this.domains.opts.length; j++) {
            if (String(offeringDomainIds[i]) === String(this.domains.opts[j].id)) {
              selected.push(j)
            }
          }
        }
        if (selected.length > 0) {
          this.form.ispublic = false
          this.form.domainid = selected
        }
      } else {
        if (isAdmin()) {
          this.form.ispublic = true
        }
      }

      if (r.zoneid && this.zones.opts.length > 0) {
        const zone = this.zones.opts.find(z => z.id === r.zoneid)
        if (zone) {
          this.form.zoneid = zone.name
          this.fetchExternal(zone.id)
        }
      }

      if (r.externalid) {
        this.$nextTick(() => {
          this.form.externalid = r.externalid
        })
      }
    },
    handleSubmit (e) {
      if (e) {
        e.preventDefault()
      }
      if (this.loading) return

      this.formRef.value.validate().then(() => {
        const values = toRaw(this.form)
        const params = {
          sourceofferingid: this.resource.id
        }

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

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

        if (values.zoneid) {
          const zone = this.zones.opts.find(z => z.name === values.zoneid)
          if (zone) {
            params.zoneid = zone.id
          }
        }

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

        if (values.allowuserdrivenbackups !== undefined) {
          params.allowuserdrivenbackups = values.allowuserdrivenbackups
        }

        // Include selected domain IDs when offering is not public
        if (values.ispublic !== true) {
          const domainIndexes = values.domainid
          let domainId = null
          if (domainIndexes && domainIndexes.length > 0) {
            const domainIds = []
            const domains = this.domains.opts
            for (let i = 0; i < domainIndexes.length; i++) {
              domainIds.push(domains[domainIndexes[i]].id)
            }
            domainId = domainIds.join(',')
          }
          if (domainId) {
            params.domainid = domainId
          }
        }

        this.loading = true
        const title = this.$t('message.success.clone.backup.offering')

        postAPI('cloneBackupOffering', params).then(json => {
          const jobId = json.clonebackupofferingresponse?.jobid
          if (jobId) {
            this.$pollJob({
              jobId,
              title,
              description: values.name,
              successMethod: result => {
                this.$message.success(`${title}: ${values.name}`)
                this.$emit('refresh-data')
                this.closeAction()
              },
              loadingMessage: `${title} ${this.$t('label.in.progress')} ${this.$t('label.for')} ${params.name}`,
              catchMessage: this.$t('error.fetching.async.job.result'),
              catchMethod: () => {
                this.closeAction()
              }
            })
          } else {
            this.$message.success(`${title}: ${values.name}`)
            this.$emit('refresh-data')
            this.closeAction()
          }
        }).catch(error => {
          this.$notifyError(error)
        }).finally(() => {
          this.loading = false
        })
      }).catch(error => {
        this.formRef.value.scrollToField(error.errorFields[0].name)
      })
    },
    onChangeZone (value) {
      if (!value) {
        this.externals.opts = []
        this.form.externalid = null
        return
      }
      const zone = this.zones.opts.find(z => z.name === value)
      if (zone) {
        this.fetchExternal(zone.id)
      }
    },
    onChangeIsPublic (value) {
      // when made public, clear any domain selection
      try {
        if (value === true) {
          this.form.domainid = []
        }
      } catch (e) {
        // ignore
      }
    },
    onChangeDomain (value) {
      // value is an array of selected indexes (as used in the form), when empty -> make offering public
      try {
        if (!value || (Array.isArray(value) && value.length === 0)) {
          this.form.ispublic = true
          // clear domain selection to avoid confusing hidden inputs
          this.form.domainid = []
        } else {
          this.form.ispublic = false
        }
      } catch (e) {
        // defensive - do nothing on error
      }
    },
    closeAction () {
      this.$emit('close-action')
    },
    isAdmin () {
      return isAdmin()
    }
  }
}
</script>

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

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