<template>
  <q-form ref="elementForm">
    <q-card class="elementBody simpleElementBody row justify-between">
      <q-card-section class="col-10 q-pa-none">
        <q-form ref="form" class="q-pa-md">
          <slot></slot>
        </q-form>
      </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 {
  methods: {
    removeThisElement () {
      const { removeElement } = useNewsletterStore()
      removeElement(this.id)
    },
    async validateForm () {
      // Get the form reference
      const formRef = this.$refs.form
      if (formRef) {
        // Validate the form
        if (!await formRef.validate()) {
          return false
        }
      }
      return true
    }
  },
  created () {
    // Listen for the 'validate' event through the event bus
    bus.on('validate', this.validateForm)
  },
  beforeUnmount () {
    // Clean up the event listener when the component is destroyed
    bus.off('validate', this.validateForm)
  },
  props: {
    id: {
      type: String,
      required: true
    }
  }
}
</script>