<script setup lang="ts">
import { onMounted } from 'vue'

import { hasAdminRole } from '@/utils/admin-auth'

import AdminKuaishouCloudNinetyoneSection from './components/AdminKuaishouCloudNinetyoneSection.vue'
import AdminKuaishouCloudOverviewSection from './components/AdminKuaishouCloudOverviewSection.vue'
import AdminKuaishouCloudRuleSection from './components/AdminKuaishouCloudRuleSection.vue'
import { useKuaishouCloudConfig } from './composables/useKuaishouCloudConfig'
import { useKuaishouCloudNinetyone } from './composables/useKuaishouCloudNinetyone'
import { useKuaishouCloudSku } from './composables/useKuaishouCloudSku'

const config = useKuaishouCloudConfig()
const ninetyone = useKuaishouCloudNinetyone(config)
const cloudSku = useKuaishouCloudSku(config.cloudtentaclesSourceOptions)

onMounted(config.loadConfigs)
</script>

<template>
  <section class="admin-panel">
    <div v-if="!hasAdminRole('admin')" class="empty-block">仅管理员可以维护新履约配置。</div>

    <template v-else>
      <AdminKuaishouCloudOverviewSection
        :file-path="config.filePath.value"
        :metrics="config.metrics.value"
      />

      <p v-if="config.errorMessage.value" class="error-copy">{{ config.errorMessage.value }}</p>
      <div v-if="config.loading.value" class="empty-block">新履约配置加载中</div>

      <template v-else>
        <AdminKuaishouCloudNinetyoneSection
          :ninetyone-lookup-loading="ninetyone.ninetyoneLookupLoading.value"
          :ninetyone-lookup-error-message="ninetyone.ninetyoneLookupErrorMessage.value"
          :ninetyone-lookup-results="ninetyone.ninetyoneLookupResults.value"
          :ninetyone-lookup-metrics="ninetyone.ninetyoneLookupMetrics.value"
          :ninetyone-lookup-form="ninetyone.ninetyoneLookupForm"
          :is-imported="ninetyone.isNinetyoneProductImported"
          @lookup="ninetyone.lookupNinetyoneProducts()"
          @import-product="ninetyone.importNinetyoneProduct($event)"
        />

        <AdminKuaishouCloudRuleSection
          :enabled="config.enabled.value"
          :saving="config.saving.value"
          :cloudtentacles-source-options="config.cloudtentaclesSourceOptions.value"
          :cloud-sku-catalog-loading="cloudSku.cloudSkuCatalogLoading.value"
          :validation-state="config.validationState.value"
          :items="config.items.value"
          :filtered-items="config.filteredItems.value"
          :rule-filter="config.ruleFilter.value"
          :rule-filter-options="config.ruleFilterOptions.value"
          :is-collapsed="config.isCollapsed"
          :is-item-complete="config.isItemComplete"
          :get-card-title="config.getCardTitle"
          :get-card-summary="config.getCardSummary"
          :get-rule-state="config.getRuleState"
          :get-external-match-summary="config.getExternalMatchSummary"
          :get-cloud-sku-summary="config.getCloudSkuSummary"
          :get-consume-shop-summary="config.getConsumeShopSummary"
          :get-cloud-sku-options="cloudSku.getCloudSkuOptions"
          :format-cloud-sku-option-label="cloudSku.formatCloudSkuOptionLabel"
          :get-kuaishou-consume-shop-options="config.getKuaishouConsumeShopOptions"
          :format-kuaishou-consume-shop-option="config.formatKuaishouConsumeShopOption"
          :cloud-sku-catalog-error-message="cloudSku.cloudSkuCatalogErrorMessage.value"
          @update:enabled="config.enabled.value = $event"
          @update:rule-filter="config.ruleFilter.value = $event"
          @expand-all="config.expandAllRules()"
          @collapse-ready="config.collapseReadyRules()"
          @refresh-cloud-sku="cloudSku.refreshCloudSkuCatalog()"
          @add-item="config.addItem()"
          @save-configs="config.saveConfigs()"
          @toggle-collapsed="config.toggleCollapsed($event)"
          @handle-cloud-sku-selected="(item, value) => cloudSku.handleCloudSkuSelected(item, value)"
          @handle-cloud-sku-dropdown-visible="
            (item, visible) => cloudSku.handleCloudSkuDropdownVisible(item, visible)
          "
          @handle-kuaishou-consume-shop-selected="config.handleKuaishouConsumeShopSelected($event)"
          @remove-item="config.removeItem($event)"
        />
      </template>
    </template>
  </section>
</template>

<style scoped src="./AdminKuaishouCloudFulfillment.css"></style>
