<template>
  <div
    :key="componentKey"
    class="ivyforms-google-sheets-integration ivyforms-flex ivyforms-flex-direction-column ivyforms-gap-24"
  >
    <div
      v-if="!isAddingIntegration && !initialLoading"
      class="ivyforms-form-integration__option-bar ivyforms-pb-8 ivyforms-flex ivyforms-align-items-center"
    >
      <div class="ivyforms-form-integration__title regular-16">
        {{ getLabel('google_sheets') }}
      </div>
      <div
        class="ivyforms-form-integration__option-bar__right ivyforms-flex ivyforms-gap-8 ivyforms-align-items-center ivyforms-justify-content-end"
      >
        <IvyButtonAction
          v-if="isSingleConfigMode"
          priority="secondary"
          size="d"
          @click="confirmDeleteIntegration()"
        >
          {{ getLabel('delete') }}
        </IvyButtonAction>
        <IvyButtonAction
          :priority="isAddMoreUpgradeMode ? 'pro' : 'primary'"
          size="d"
          icon-start="plus"
          @click="startAddingIntegration"
        >
          {{ getLabel(isAddMoreUpgradeMode ? 'add_more_google_sheets' : 'add_google_sheet') }}
        </IvyButtonAction>
      </div>
    </div>

    <IvyNotification
      v-if="!isGoogleConnected && !isAddingIntegration && !editingIntegrationId && !initialLoading"
      type="stripe"
      state="warning"
      :style="'stripe'"
      :show-button="true"
      :button-label="getLabel('go_to_settings')"
      :show-title-icon="false"
      :show-description-icon="true"
      :description="getLabel('google_sheets_not_connected')"
      @button-click="navigateToGlobalSettings"
    />

    <GoogleSheetsEmptyState
      v-if="
        integrations.length === 0 &&
        !isAddingIntegration &&
        !editingIntegrationId &&
        !initialLoading &&
        isGoogleConnected
      "
      @add-integration="startAddingIntegration"
    />

    <GoogleSheetsForm
      v-else-if="isAddingIntegration || editingIntegrationId"
      :integration-data="currentIntegration"
      :form-fields="formFields"
      :loading="loading"
      :form-loading="formLoading"
      :is-editing="!!editingIntegrationId"
      @save="saveIntegration"
      @cancel="cancelEditing"
      @update:integration-data="onIntegrationDataUpdate"
    />

    <GoogleSheetsList
      v-else-if="integrations.length > 0"
      :integrations="integrations"
      :loading="initialLoading || loading"
      :max-integrations="maxIntegrations"
      :show-limit-notice="showLimitNotice"
      @edit-integration="startEditingIntegration"
      @delete-integration="confirmDeleteIntegration"
      @toggle-integration="handleToggle"
      @upgrade-plan="startAddingIntegration"
    />
  </div>
</template>

<script setup lang="ts">
import { useLabels } from '@/composables/useLabels'
import { useGoogleSheetsFormIntegrations } from '@/integrations/google-sheets/composables/useGoogleSheetsFormIntegrations'
import IvyButtonAction from '@/views/_components/button/IvyButtonAction.vue'
import IvyNotification from '@/views/_components/notification/IvyNotification.vue'
import GoogleSheetsEmptyState from './components/GoogleSheetsEmptyState.vue'
import GoogleSheetsForm from './components/GoogleSheetsForm.vue'
import GoogleSheetsList from './components/GoogleSheetsList.vue'
import type { GoogleSheetIntegration } from '@/integrations/google-sheets/types/google-sheets.types'

const { getLabel } = useLabels()

const {
  integrations,
  isAddingIntegration,
  editingIntegrationId,
  loading,
  initialLoading,
  formLoading,
  currentIntegration,
  componentKey,
  maxIntegrations,
  showLimitNotice,
  isAddMoreUpgradeMode,
  isSingleConfigMode,
  formFields,
  isGoogleConnected,
  navigateToGlobalSettings,
  startAddingIntegration,
  startEditingIntegration,
  cancelEditing,
  saveIntegration,
  confirmDeleteIntegration,
  handleToggle,
} = useGoogleSheetsFormIntegrations()

const onIntegrationDataUpdate = (data: Partial<GoogleSheetIntegration>) => {
  currentIntegration.value = data
}
</script>

<style lang="scss" scoped>
.ivyforms-google-sheets-integration {
  height: 100%;
  min-height: 0;

  :deep(.ivyforms-google-sheets-form) {
    flex: 1;
    min-height: 0;
  }
}
</style>
