<template>
  <q-tabs
    v-model="tab"
    inline-label
    class="bg-dark text-accent elementTab row"
    content-class="row justify-evenly"
  >
    <q-tab name="german" :label="$t('de')" />
    <q-tab name="english" :label="$t('en')" />
  </q-tabs>
  <q-form ref="elementForm">
    <q-card class="elementBody row justify-between">
      <q-card-section class="col-10 q-pa-none">
        <q-tab-panels v-model="tab" animated class="transparent q-pa-none">
          <q-tab-panel name="german" class="transparent q-pa-md">
            <q-form ref="germanForm">
              <!-- German form elements go here -->
              <slot name="german"></slot>
            </q-form>
          </q-tab-panel>
          <q-tab-panel name="english" class="transparent q-pa-md">
            <q-form ref="englishForm">
              <!-- English form elements go here -->
              <slot name="english"></slot>
            </q-form>
          </q-tab-panel>
        </q-tab-panels>
      </q-card-section>
      <q-card-section class="column col-2 items-end justify-between q-pa-none">
        <q-icon name="sym_o_menu" class="handle cursor-pointer q-pa-md" color="accent" size="2.5rem"/>
        <q-btn round class="cursor-pointer q-ma-md" dense icon="sym_o_delete" color="negative" size="xs" @click="removeThisElement" />
      </q-card-section>
    </q-card>
  </q-form>
</template>

<script>
import { useNewsletterStore } from 'src/stores/newsletter.js'
import bus from 'src/utils/eventBus.js'

export default {
  data () {
    return {
      tab: 'german'
    }
  },
  props: {
    id: {
      required: true
    }
  },
  methods: {
    removeThisElement () {
      const { removeElement } = useNewsletterStore()
      removeElement(this.id)
    },
    async validateAllTabs () {
      // Save the current tab
      const currentTab = this.tab

      // Define tabs to validate
      const tabsToValidate = ['german', 'english']

      // Validate each tab
      for (const tab of tabsToValidate) {
        // Switch to the tab
        this.tab = tab

        // Wait for the tab content to render
        await this.$nextTick()

        // Get the form reference for the current tab
        const formRef = this.$refs[`${tab}Form`]
        if (formRef) {
          // Validate the form for the current tab
          if (!await formRef.validate()) {
            break
          } else {
            // Restore the original tab
            this.tab = currentTab
          }
        }
      }
    }
  },
  // Listen for the 'validate' event through the event bus
  created () {
    bus.on('validate', () => {
      this.validateAllTabs()
    })
  },
  beforeUnmount () {
    // Clean up the event listener when the component is destroyed
    bus.off('validate')
  }
}
</script>